Html iPhone 和 iPad/浏览器上的 HTML5 内嵌视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3699552/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 inline video on iPhone vs iPad/Browser
提问by Andre
I've created an HTML5 video player (very simple) that works perfectly on the iPad and the browser.
我创建了一个 HTML5 视频播放器（非常简单），可以在 iPad 和浏览器上完美运行。
However, when I open it on the iPhone, I only get a play button which, when pressed, opens the native video player on a new window, on top of all my stuff.
但是，当我在 iPhone 上打开它时，我只会得到一个播放按钮，按下该按钮时，会在我所有内容的顶部在新窗口中打开本机视频播放器。
That means I lose access to my custom controls and time tracking (written in Javascript), since the video is now running isolated.
这意味着我无法访问我的自定义控件和时间跟踪（用 Javascript 编写），因为视频现在是孤立运行的。
Is there any way to override Apple's control of HTML5 video on the iphone and get it working like on the ipad?
有什么办法可以在 iPhone 上覆盖 Apple 对 HTML5 视频的控制并让它像在 iPad 上一样工作？
Cheers
干杯
回答by Andre
Right,
对，
I was going nowhere with this and filed a bug with Apple.
我对此无能为力，并向Apple提交了一个错误。
After a couple of weeks they got back to me saying, very simply, that I should add "webkit-playsinline" to the video tag on the HTML, as well as adding the "allowsInlineMediaPlayback" property on the UIWebView.
几周后，他们回复我说，非常简单，我应该在 HTML 的视频标签中添加“webkit-playsinline”，并在 UIWebView 上添加“allowsInlineMediaPlayback”属性。
So in the end, this is what it looks like:
所以最后，这就是它的样子：
HTML
HTML
<video id="player" width="480" height="320" webkit-playsinline>
Obj-C
对象-C
webview.allowsInlineMediaPlayback = YES;
And all works just fine :)
一切正常:)
Hope this helps someone, as it's virtually undocumented and the only place I could find a reference to "webkit-playsinline" was in the iAds reference, where it says: "iAds JS only".
希望这对某人有所帮助，因为它几乎没有记录，而且我能找到对“webkit-playsinline”的唯一引用是在 iAds 参考中，它说：“仅 iAds JS”。
回答by Gajus
Until iOS Safari implements inline video support, you need to write video decoder in a web supported language. There are existing implementations of video decoders, such as Broadwayfor H.264 (video), jsmpegfor mpeg1, and ogv.js(video and sound support).
在 iOS Safari 实现内联视频支持之前，您需要使用 Web 支持的语言编写视频解码器。有视频解码器，如现有实现百老汇的H.264（视频），jsmpeg为MPEG1，和ogv.js（视频和声音的支持）。
Keep in mind that the process of decoding a video is computationally heavy. Expect a relatively slow FPS (±20).
请记住，解码视频的过程计算量很大。预计 FPS 相对较慢 (±20)。
For your reference, these guys have prepared a demoof a video that you can play on your iOS device.
回答by fregante
In iOS 10+
在 iOS 10+
Apple enabled the attribute playsinlinein all browsers on iOS 10, so this works seamlessly:
Appleplaysinline在 iOS 10 上的所有浏览器中启用了该属性，因此可以无缝运行：
<video src="file.mp4" playsinline>
In iOS 8 and iOS 9
在 iOS 8 和 iOS 9 中
You can work around this issue by simulating the playback by skimmingthe video instead of actually .play()'ing it.
您可以通过浏览视频而不是实际播放来模拟播放来解决此问题.play()。
You can use iphone-inline-videoto take care of the playback and audio sync (if any), and it keeps the <video>working as it should.
您可以使用iphone-inline-video来处理播放和音频同步（如果有），它会保持<video>正常工作。
回答by saswanb
In iOS 10 adding 'playsinline' attribute to the HTML5 video tag did not prevent fullscreen playback on an iPhone UIWebview until I also added the 'controls' attribute. This is how I got it working:
在 iOS 10 中，向 HTML5 视频标签添加“playsinline”属性并不会阻止 iPhone UIWebview 上的全屏播放，直到我还添加了“控件”属性。这就是我让它工作的方式：
<video width="100%" height="240" controls playsinline>
<source src="movie.mp4" type="video/mp4" >
</video>
With, of course, _webView.allowsInlineMediaPlayback=YES;in the ViewController also.
当然，_webView.allowsInlineMediaPlayback=YES;在 ViewController 中也有。
回答by LarsJK
Do you have an app created or is this for mobile safari? If you have an app and use UIWebView you should set UIWebView's allowsInlineMediaPlayback property..
您是否创建了一个应用程序或者这是用于移动 Safari 的？如果你有一个应用程序并使用 UIWebView 你应该设置 UIWebView 的 allowedInlineMediaPlayback 属性..
回答by newshorts
There are some work arounds, I'm working on a library to allow this functionality automatically. However, until Apple sets safari to
有一些变通方法，我正在开发一个库以自动允许此功能。但是，直到 Apple 将 safari 设置为
webview.allowsInlineMediaPlayback = YES;
then we will have to use hacks for the same behavior.
那么我们将不得不为相同的行为使用 hacks。
You can check out the project here: https://github.com/newshorts/InlineVideoto see if it meets your needs.
你可以在这里查看项目：https: //github.com/newshorts/InlineVideo看看它是否满足你的需求。
回答by Paradise
Just add following to your config.xml:
<preference name="AllowInlineMediaPlayback" value="true" />Otherwise UIWebView will neglect the webkit-playsinline attribute.
只需在 config.xml 中添加以下内容：
<preference name="AllowInlineMediaPlayback" value="true" />否则 UIWebView 将忽略 webkit-playsinline 属性。
回答by Paradise
You can easily allow this by adding this to your config.xml: The UIWebView should then respect the webkit-playsinline attribute.
您可以通过将其添加到您的 config.xml 来轻松允许此操作： UIWebView 应该尊重 webkit-playsinline 属性。
