我可以避免在iPhone或安卓系统上使用HTML5的原生全屏视频播放器吗？

Question

我已经构建了一个web应用程序，它使用HTML5标记和JavaScript代码来呈现与正在运行的视频同步的其他内容。它在桌面浏览器中工作得很好: Firefox、Chrome和Safari。在iPhone或DroidX上，原生视频播放器会弹出并占据屏幕，从而使我希望与视频同时显示的其他动态内容变得模糊。

有什么办法可以解决这个问题吗？如果有必要，我会弄清楚如何为这两个平台编写原生应用程序，但如果我能坚持使用HTML5/JavaScript，那将会节省我大量的精力。

Answer 1

在iOS 10+中

苹果在iOS 10上的所有浏览器中都启用了属性playsinline，因此它可以无缝工作：

<video src="file.mp4" playsinline>

在iOS 8和iOS 9中

简短回答：使用iphone-inline-video，它支持内联播放和同步音频。

Long answer:你可以通过浏览视频来模拟回放，而不是实际的.play()‘来解决这个问题。

Answer 2

有一个属性可以在iOS web浏览器中启用/禁用内嵌媒体播放(如果您正在编写本机应用程序，则它将是UIWebView的allowsInlineMediaPlayback属性)。默认情况下，在iPhone上设置为NO，但在iPad上设置为YES。

幸运的是，您还可以在HTML中调整此行为，如下所示：

<video id="myVideo" width="280" height="140" webkit-playsinline>

...that希望能帮你解决这个问题。我不知道它是否能在你的Android设备上工作。这是一个webkit属性，所以它可能是。不管怎样，值得一试。

Answer 3

旧答案(适用至2016年)

这是一个苹果开发者的链接，明确表示说-

在iPhone和iPod touch这两种小屏幕设备上，"Video is NOT presented the Web Page“

Your options

• webkit-playsinline属性仅适用于iOS上的HTML5视频，但仅当您将网页作为when应用程序保存到主屏幕上时才有效-如果在Safari
• 中为具有WebView的本机应用程序(或具有超文本标记语言、CSS、JS的混合应用程序)打开页面，则UIWebView允许内联播放视频，但前提是您将set the allowsInlineMediaPlayback property for the save类设置为true<代码>H221<代码>F222