在 Ionic/Phonegap 中在线播放视频(webkit-playsinline 不起作用) [英] Playing video inline in Ionic/Phonegap (webkit-playsinline not working)

问题描述

我正在使用 HTML5 视频标签在我的 ionic 应用程序中播放视频.这是我的代码:

视频自动播放正常，但视频在本机播放器中打开并且无法内联播放.经过一些研究，我开始明白 webkit-playsinline 应该可以解决这个问题，至少在 iOS 上是这样，但我在 iOS8&9 上测试似乎并非如此.

我尝试了 videogular，但仍然出现了该死的本地播放器.

我什至花了一点钱在这里得到这个代码:https://creativemarket.com/DenzilDoyle/194974-Ionic-background-video 准确地说明了我正在尝试创建的内容(登录屏幕上的背景视频)，但视频仍会在本机播放器中打开.

有没有人设法让视频在他们的 ionic/phonegap 应用上在线播放?如果是这样怎么办?

解决方案

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

您可以通过将其添加到 config.xml 中来轻松允许此操作:

UIWebView 应该尊重 webkit-playsinline 属性.

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

您还应该向视频标签添加poster="firstFrame.jpg"，以便在视频准备播放时获得图像.jpg 应该是视频的第一帧(使用任何你喜欢的视频编辑器来提取它).

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

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

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?

解决方案

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

这篇关于在 Ionic/Phonegap 中在线播放视频(webkit-playsinline 不起作用)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！