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

时间:2011-02-20 00:50:35

标签: iphone android html5 video fullscreen

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

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

6 个答案:

答案 0 :(得分:60)

在iOS 10 +

Apple在iOS 10上的所有浏览器中都启用了属性playsinline,因此可以无缝运行:

<video src="file.mp4" playsinline>

在iOS 8和iOS 9中

简答:使用iphone-inline-video,它可以启用内联播放并同步音频。

答案很长:您可以通过略过视频模拟播放而不是实际.play()来解决此问题。< / p>

答案 1 :(得分:51)

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

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

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

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

答案 2 :(得分:40)

这是一个Apple开发人员链接明确表示 -

iPhone和iPod touch上的

是小屏幕设备,“视频在网页中显示”

Safari Device-Specific Considerations

现在

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

答案 3 :(得分:14)

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

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

webkit-playsinline适用于iOS&lt; 10,playsinline适用于iOS&gt; = 10

通过https://webkit.org/blog/6784/new-video-policies-for-ios/

查看详情

答案 4 :(得分:11)

根据此页面 https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html 它仅在(仅在UIWebView中启用且allowInlineMediaPlayback属性设置为YES时启用。)我理解在Mobile Safari中,iPad上为YES,iPhone和iPod Touch上为NO。

答案 5 :(得分:9)

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