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

我已经建立了一个网络应用程序,使用 HTML5标签和 JavaScript 代码,使其他内容与正在运行的视频同步。它在桌面浏览器(Firefox,Chrome 和 Safari)中运行良好。在 iPhone 或 DroidX 上,本地视频播放器弹出并接管屏幕,从而模糊了我想同时显示的其他动态内容。

还有别的办法吗?如果有必要的话,我会想办法为这两个平台编写本地应用程序,但如果我能坚持使用 HTML5/JavaScript 的话,这将节省我大量的工作。

137769 次浏览

我不了解 Android,但 iPhone 或 iPod touch 上的 Safari 可以全屏播放所有视频,因为它们的屏幕尺寸很小。在 iPad 上,它会在页面上播放视频,但允许用户将其设置为全屏。

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

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

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

希望能帮你解决问题。我不知道它是否能在你的 Android 设备上工作。这是网络工具包的属性,所以有可能。不管怎样,值得一试。

根据这一页 Https://developer.apple.com/library/archive/documentation/appleapplications/reference/safarihtmlref/articles/attributes.html 它只有在下列情况下才可用(仅在 UIWebView 中启用,且 allowsInlineMediaPlayback 属性设置为 YES。)我知道在 Mobile Safari 中,在 iPad 上是 YES,在 iPhone 和 iPod Touch 上是 NO。

旧答案(适用至2016年)

这里有一个苹果开发者的链接,明确地说-

在 iPhone 和 iPod touch 这些小屏幕设备上,“视频是在网页内呈现的 没有

特定于 Safari 设备的注意事项

你的选择 :

  • webkit-playsinline属性适用于 iOS 上的 HTML5视频,但是如果在 Safari 中打开一个页面,就不适用于 只有当你保存网页到你的主屏幕作为一个网页应用程序-Not
  • 对于带有 WebView 的本地应用程序(或者带有 HTML、 CSS、 JS 的混合应用程序) ,UIWebView允许内联播放视频,但是只有在 设置 allowsInlineMediaPlayback属性UIWebView类为 true 时才允许

在 iOS10 + 中

苹果在 iOS10的所有浏览器中都启用了 playsinline属性,所以这个功能是无缝的:

<video src="file.mp4" playsinline>

在 iOS8和 iOS9中

简短的回答: 使用 Iphone-内联-视频,它支持内联播放和同步音频。

长的回答: 你可以通过模拟 掠夺播放视频而不是实际的 .play()来解决这个问题。

在 iOS10β4中,HTML5的正确代码是

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

webkit-playsinline表示 iOS < 10,playsinline表示 iOS > = 10

通过 https://webkit.org/blog/6784/new-video-policies-for-ios/查看详细信息