Playing Video Inline in Ionic/Phonegap (Webkit-Playsinline Not Working)

Playing video inline in Ionic/Phonegap (webkit-playsinline not working)

The reason why is the UIWebView was not configured to allow inline video playback. On iPads it is defaulted to allow it, but on iPhones it is not.

You can easily allow this by adding this to your config.xml:

<preference name="AllowInlineMediaPlayback" value="true" />

The UIWebView should then respect the webkit-playsinline attribute.

Also the code will work on most Android devices as well (especially if you add the Crosswalk plugin). However you should put the webm first, then the mp4 file to avoid problems with some versions of Chrome).

You should also add a poster="firstFrame.jpg" to the video tag so that you get an image while the video gets ready to play. The jpg should be the first frame of the video (use whatever video editor you like to extract it).

See this site for a much more complete example (and free...). I have used this on Android / iOS with Cordova with minimal changes. The changes needed were load the files into the project, use CrossWalk for Android, remove the media selector in the css (it stops video on small screens by design, but it works ok in Cordova), add the playsinline attribute, and finally add in the preference in the config.xml.

http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

video tag inline in ionic with ios playsinline works first time

You have to add one line in DidStartLoad function in below file.

File Location

platforms->ios->appName->Plugins->cordova-plugin-themeablebrowser->CDVThemeableBrowser.m

Function in file

- (void)webViewDidStartLoad:(UIWebView*)theWebView
{
    theWebView.allowsInlineMediaPlayback = YES;
}

Hope that will work for you.

Related Topics