在Ionic / Phonegap中播放视频内联（webkit-playsinline无法正常工作） [英] Playing video inline in Ionic/Phonegap (webkit-playsinline not working)

问题描述

我正在使用HTML5视频标签在我的离子应用中播放视频。这是我的代码：

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>

视频自动播放正常，但视频会打开本机播放器并且不播放内联播放器。经过一些研究后，我开始明白 webkit-playsinline 应该解决这个问题，至少在iOS上是这样，但对于我在iOS8和iOS上进行测试似乎并不是这样。 9。

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.

我甚至付了钱一点点来获取此代码： https://creativemarket.com/DenzilDoyle/194974-Ionic-background-video 这说明了我正在尝试创建的内容（我的登录屏幕上的背景视频），但视频仍然打开了原生播放器。

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.

有没有人设法让他们的离子/ phonegap应用程序内嵌视频？如果是这样的话？

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

推荐答案

原因是UIWebView未配置为允许内联视频播放。在iPad上它默认允许它，但在iPhone上它不是。

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.

你可以通过将它添加到你的config.xml轻松地允许这个：

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

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

然后，UIWebView应尊重webkit-playsinline属性。

The UIWebView should then respect the webkit-playsinline attribute.

此外，该代码也适用于大多数Android设备（特别是如果你添加了Crosswalk插件）。但是你应该首先放入webm，然后放入mp4文件以避免某些版本的Chrome出现问题。）

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).

你还应该添加一个poster =firstFrame.jpg来视频标记，以便在视频准备播放时获取图像。 jpg应该是视频的第一帧（使用你喜欢的任何视频编辑器来提取它）。

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).

请参阅此站点以获得更完整的示例（并且免费。 ..）。我在Android / iOS上使用了Cordova，只做了很少的改动。所需的更改是将文件加载到项目中，使用CrossWalk for Android，删除css中的媒体选择器（它在设计上在小屏幕上停止视频，但在Cordova中可以正常工作），添加playsinline属性，最后添加config.xml中的首选项。

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

这篇关于在Ionic / Phonegap中播放视频内联（webkit-playsinline无法正常工作）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！