电话间隙内联视频不起作用，设置正确

Question

我想在 S3 存储桶上托管我的视频的内联视频。我使用 HTML 视频标签来实现这一点，并更改了以下设置，defaults.xml

<!-- Preferences for iOS -->
<preference name="AllowInlineMediaPlayback" value="true" />

如果我构建我的 iPhone 应用程序，config.xml文件会正确显示此设置：

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.helloworld" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
    <preference name="AllowInlineMediaPlayback" value="true" />

在我的应用程序中，我有以下代码：

<div className="hub-videobox">
    <video webkit-playsinline >
        <source src="https://s3-eu-west-1.amazonaws.com/mybucket/0rdrd88" type="video/mp4"/>
    </video>
</div>

我希望这会产生内联视频。但是，本机视频播放器已启动，并且全屏播放。为什么会这样？

谢谢！

我正在使用 phonegap/cordova 4.2.0

Answer 1

到目前为止，我发现，无论你尝试多少事情，它仍然会发生。看到这个苹果开发者链接，它提到如果屏幕很小，那么本机应用程序将捕获视频。没有提到避免它。

针对小屏幕的优化

目前，Safari 针对较小的屏幕优化了视频演示 在 iPhone 或 iPod touch 上使用全屏播放视频 - 视频 触摸屏幕时会出现控件，并将视频缩放到 使屏幕适合纵向或横向模式。不显示视频 在网页内。高度和宽度属性仅影响 在网页上分配的空间，并且控件属性将被忽略。 这仅适用于小屏幕设备上的 Safari。在 Mac OS 上 X，Windows和iPad，Safari内联播放视频，嵌入在 网页。

现在你尝试过的事情被许多人建议。但这些并没有按预期工作。所以我想这是不可能的。在第一个答案中查看对评论的赞成票 我可以避免在 iPhone 或 Android 上使用 HTML5 的原生全屏视频播放器吗？这表明这种内联内容无法正常工作。iPhone将继续抓取视频，如果找到合适的大屏幕，则内联属性将起作用。

Answer 2

我见过的最好的方法是在HTML5画布中显示视频。

基本上，利用画布可以直接从视频帧绘制图像的事实。设置一个循环，以增加视频时间，抓取当前帧，然后绘制它。对于大多数视频，效果将是无缝的，并且不会全屏显示，因为您不是在播放视频文件，而只是将其用作画布的参考。

请注意，如果您需要音频，由于画布不直接支持音频，您将需要一个 HTML5 音频元素来以某种方式播放音频并将其同步到视频。

这是一个适用于此目的的 github 存储库，尽管您当然可以编写自己的解决方案。

Answer 3

我在使用Cordova 6.3.1和运行iOS 10的iPhone时遇到了同样的问题。我设法用蛮力阻止了它，但显然有效：

      mediaElement.play()
      mediaElement.webkitExitFullScreen()
      mediaElement.controls = false