javascript - iPhone 上的 Facebook Instant Articles 中的内联视频播放

Question

我正在使用 iframe 将视频嵌入到 Facebook Instant Article 中。

• 当我尝试在 Android 手机上播放视频时，它会内嵌(即)播放，而不是全屏播放。
• 但是，如果我尝试观看即时文章并尝试在 iPhone 上播放视频，它会被 native iOS 视频播放器接管。
• 我需要它在我的自定义视频播放器中播放，这就是我使用 iframe 嵌入它的原因。

我已经尝试将 playsinline 和 webkit-playsinline 属性添加到视频标签和 iframe 中。

但是它们只适用于 Safari 而不是即时文章。

有什么方法可以在即阅文中实现内联视频播放吗？

Answer 1

我也遇到了同样的问题。让我分享一下我的发现:

嵌入在 iframe 中的自定义 HTML5 视频播放器不能在 iPhone 上内联播放 Facebook Instant Articles。这是因为 Facebook 使用 WebView 呈现即阅文，并且未配置为内联播放。我在某些 Ionic 项目中看到了相同的行为，基本上除非 Facebook 更改某些 WebView 设置，否则您无能为力(至少我迄今为止还没有找到任何解决方法)。不仅仅是你。查看Youtube sample来自 Facebook 文档 - 它的行为相同。

此外，当您在 iframe 中使用自定义播放器时，似乎(至少在 iOS 10+ 上)默认 iOS 控件会在您退出全屏时立即显示，这可能会导致控件双重显示，这并不理想。我再次认为这是因为不允许内联播放。我也看到了在 iPhone 上播放视频广告的问题。

最重要的是，自定义 HTML5 视频播放器在 iPhone 上的 Instant Articles 中效果不佳，最好使用简单的 HTML5 video tag .

我希望他们将来能改变这一点。