Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

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

I'm using the HTML5 video tag to get a video playing in my ionic app. Here's my code:

<video autoplay loop class="video" webkit-playsinline>
    <source src="videos/polina.mp4" type='video/mp4; codecs="h.264"' >
    <source src="videos/polina.webm" type="video/webm">
</video>

The video autoplays fine, however the video opens up into the native player and doesn't play inline. After some research I came to understand that webkit-playsinline should solve this issue, at least on iOS, but this doesn't seem to be the case for me testing on iOS8&9.

I tried videogular and I'm still getting the blasted native player appearing.

I even paid a little bit to get this code here: https://creativemarket.com/DenzilDoyle/194974-Ionic-background-video that illustrates exactly what I am trying to create (a background video on my login screen) but still the video opens up into the native player.

Has anyone managed to get a video to play inline on their ionic/phonegap app? If so how?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...