iPhone 与 iPad/浏览器上的 HTML5 内嵌视频

Posted 2023-02-19

【中文标题】iPhone 与 iPad/浏览器上的 HTML5 内嵌视频

【英文标题】：HTML5 inline video on iPhone vs iPad/Browser

【发布时间】：2011-04-11 14:28:43

【问题描述】：

我创建了一个 html5 视频播放器（非常简单），可以在 iPad 和浏览器上完美运行。

但是，当我在 iPhone 上打开它时，我只得到一个播放按钮，按下该按钮时，会在新窗口中打开本地视频播放器，在我所有的东西之上。

这意味着我无法访问我的自定义控件和时间跟踪（用 javascript 编写），因为视频现在是独立运行的。

有什么方法可以覆盖苹果对 iPhone 上的 HTML5 视频的控制，让它像在 ipad 上一样工作？

干杯

【问题讨论】：

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

【参考方案1】：

没错，

我对此无处可去，并向 Apple 提交了一个错误。

几周后，他们回复我说，非常简单，我应该在 HTML 的视频标签中添加“webkit-playsinline”，并在 UIWebView 上添加“allowsInlineMediaPlayback”属性。

所以最后是这样的：

HTML

<video id="player"   webkit-playsinline>

Obj-C

webview.allowsInlineMediaPlayback = YES;

一切都很好:)

希望这对某人有所帮助，因为它几乎没有文档记录，而且我唯一能在 iAds 参考中找到对“webkit-playsinline”的引用，其中写着：“iAds JS only”。

【讨论】：

我只是想在你的回答中澄清一些事情......如果你正在开发一个仅限网络的解决方案（在这种情况下 UIWebView 不会发挥作用）那么这将不起作用对吧？

@Andre：你能帮我解释一下，我如何在我的纯 HTML5 网页上使用 obj-c？我想在我的 html5 网站的视频播放器中在 iPhone 上播放视频。

如果您使用的是 Phonegap / Cordova，您可以在 config.xml 文件中使用 <preference name="AllowInlineMediaPlayback" value="true" /> 启用内联媒体播放，并将 webkit-playsinline 添加到 <video> 标签

谢谢！我一直在寻找这个信息。

@Andre 它在 UIWebView 中仍然有效。我最近在一个应用程序中尝试过它，所以我知道它确实如此。这是我的错，我误解了 OP 的问题，并认为他试图在移动 Safari（不是 UIWebView）中执行此操作，这是我目前正在寻找的解决方案。早在 2011 年，我就可以通过使用自定义视频控件在 Safari 中内联播放视频，但现在已经不行了。

【参考方案2】：

在 ios Safari 实现内联视频支持之前，您需要使用 Web 支持的语言编写视频解码器。现有的视频解码器实现，例如 Broadway 用于 H.264（视频），jsmpeg 用于 mpeg1 和 ogv.js（视频和声音支持）。

请注意，视频解码过程的计算量很大。预计 FPS 会相对较慢 (±20)。

供你参考，这些家伙有一个视频prepared a demo，你可以在你的 iOS 设备上播放。

【参考方案3】：

在 iOS 10+ 中

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

<video src="file.mp4" playsinline>

在 iOS 8 和 iOS 9 中

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

您可以使用iphone-inline-video 来处理播放和音频同步（如果有），它可以让<video> 正常工作。

【参考方案4】：

您是否创建了一个应用程序，或者这是用于移动 safari 的应用程序？如果你有一个应用程序并使用 UIWebView，你应该设置 UIWebView 的allowInlineMediaPlayback 属性..

【讨论】：

我有一个 UIWebView 包装器！这听起来像是救命稻草，但它只是半有效的。我收到了 JS 事件（提示点），但由于某种原因，它仍在使用自己的视频控件全屏运行：/

我正在尝试实现相同的目标，但对于移动 safari（因此没有 UIWebView）。你有什么提示吗？

对不起，不是真的。一年多前我在看这个，从那以后就再也没看过。祝你好运！

【参考方案5】：

在 iOS 10 中，将“playsinline”属性添加到 HTML5 视频标签并不会阻止 iPhone UIWebview 上的全屏播放，直到我还添加了“控件”属性。这就是我的工作方式：

<video   controls playsinline>
      <source src="movie.mp4" type="video/mp4" >
</video>

当然，在 ViewController 中也有 _webView.allowsInlineMediaPlayback=YES;。

【参考方案6】：

有一些变通方法，我正在开发一个库以自动启用此功能。但是，直到 Apple 将 safari 设置为

webview.allowsInlineMediaPlayback = YES;

那么我们将不得不对相同的行为使用 hack。

您可以在这里查看该项目：https://github.com/newshorts/InlineVideo，看看它是否满足您的需求。

【参考方案7】：

只需将以下内容添加到您的 config.xml 中： <preference name="AllowInlineMediaPlayback" value="true" /> 否则 UIWebView 将忽略 webkit-playsinline 属性。

【参考方案8】：

您可以通过将其添加到您的 config.xml 来轻松地实现这一点： 然后 UIWebView 应该尊重 webkit-playsinline 属性。