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

Posted 2023-02-19

【中文标题】我可以避免在 iPhone 或 android 上使用 HTML5 的原生全屏视频播放器吗？

【英文标题】：Can I avoid the native fullscreen video player with HTML5 on iPhone or android?

【发布时间】：2011-06-30 14:04:24

【问题描述】：

我已经构建了一个使用 html5 标记和 javascript 代码的网络应用程序，该代码可以呈现与正在运行的视频同步的其他内容。它在桌面浏览器中运行良好：Firefox、Chrome 和 Safari。在 iPhone 或 DroidX 上，原生视频播放器会弹出并占据屏幕，从而遮盖了我想与视频同时显示的其他动态内容。

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

【问题讨论】：

实际上，在 ios 和 android 中的 a/v 播放器的浏览器实现都像地狱一样有 bug。在页面上尝试几个播放器或尝试向它们添加时尚的控件，您会发现 - 它无法使用。因此，可能用于播放视频的外部全屏应用程序 - 还不错；）

每次苹果设备以预期的方式呈现我的内容时，我都很高兴。我用来庆祝这一点。

技术上没有，但是有几个库可以使其成为可能， 比如iphone-inline-video（披露：我写的）

【参考方案1】：

在 iOS 10+ 中

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

<video src="file.mp4" playsinline>

在 iOS 8 和 iOS 9 中

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

长答案：您可以通过略读视频而不是实际.play()'ing 来模拟播放来解决此问题。

【讨论】：

在 Captive Network Assistant（Captive Portal）中不起作用

【参考方案2】：

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

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

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

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

【讨论】：

感谢您的建议。不幸的是，它并没有改变我看到的行为 - iPhone 和 DroidX 上都会弹出全屏原生视频播放器。

我也有这个问题。我已经添加了 webkit-playsinline 甚至是 webkit-playsinline="webkit-playsinline" 的 xml 验证版本，但并没有改变行为

这可能不适用于 iPhone 版 Safari，因为 Web 视图不允许内嵌视频播放。但是，如果网页托管在您自己的应用程序中您自己的 UIWebView 中，您可以设置这些属性并且可以进行内联视频播放：webview.allowsInlineMediaPlayback = YES; webview.mediaPlaybackRequiresUserAction = NO;

这也适用于 Cordova/PhoneGap。只需将以下内容添加到 Cordova 项目中的 config.xml：<preference name="AllowInlineMediaPlayback" value="true" />

太好了！它在我的 iPhone 上运行良好。非常感谢。

【参考方案3】：

旧答案（适用于 2016 年）

这是一个 Apple 开发者链接，明确表明 -

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

Safari Device-Specific Considerations

您的选择：

webkit-playsinline 属性适用于 iOS 上的 HTML5 视频，但

仅当您将网页作为 web 应用程序保存到主屏幕时

- 如果在 Safari 中打开页面则无效 对于带有 WebView 的本机应用程序（或带有 HTML、CSS、JS 的混合应用程序），UIWebView 允许内联播放视频，但前提是 set the allowsInlineMediaPlayback property 用于

UIWebView

类为真

【讨论】：

查看我的 cmets 以获取已接受的答案。 ICYMI，对于 Cordova，将以下内容添加到您的 config.xml：<preference name="AllowInlineMediaPlayback" value="true" />

在 YouTube.com 上无需全屏即可播放

答案是旧的，2014 年，事情可能已经改变。此外，youtube.com 不是答案中提到的 带有 WebView 的本机应用程序。不过感谢您的关注。

【参考方案4】：

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

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

webkit-playsinline 适用于 iOS playsinline 适用于 iOS >= 10

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

【参考方案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。

【讨论】：

这似乎只有在您将 HTML5 播放器页面设置为“存在于”本机 iOS 应用程序时才有效。它当然不适用于普通的网页。

【参考方案6】：

我不了解安卓，但 iPhone 或 iPod touch 上的 Safari 会因为屏幕尺寸小而全屏播放所有视频。在 iPad 上，它会在页面上播放视频，但允许用户将其设为全屏。