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

Question

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

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

Answer 1

In iOS 10+

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

<video src="file.mp4" playsinline>

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

答案很长：你可以通过略读视频来模拟播放，而不是实际上用.play()来解决这个问题。

Answer 2

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

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

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

......应该希望能为你解决这个问题。我不知道它是否适用于您的Android设备。它是一个webkit属性，所以它可能。无论如何，值得一试。

Answer 3

这是Apple开发人员链接，明确指出 -

在iPhone和iPod touch上，这是小屏幕设备，“视频不在网页中显示”

现在：

webkit-playsinline属性适用于iOS上的HTML5视频，但仅当您将网页作为webapp保存到主屏幕时 - 如果在Safari中打开页面则不行
对于带有WebView的本机应用程序（或带有HTML，CSS，JS的混合应用程序），UIWebView允许以内联方式播放视频，但前提是set the allowsInlineMediaPlayback property类的UIWebView为true

Answer 4

在iOS 10 beta 4. HTML5中的正确代码是

<video src="file.mp4" webkit-playsinline="true" playsinline="true">

webkit-playsinline适用于iOS <10，而playsinline适用于iOS> = 10

Answer 5

根据这个页面，https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html只有在（仅在UIWebView中启用allowInlineMediaPlayback属性设置为YES时才可用。）我在Mobile Safari中了解这在iPad上是YES而在iPhone和iPod Touch上是NO。

Answer 6

我不知道Android，但由于屏幕尺寸小，iPhone或iPod touch上的Safari将全屏播放所有视频。在iPad上，它将在页面上播放视频，但允许用户全屏显示。