Phonegap 内联视频不工作，设置正确

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

到目前为止我发现，无论你尝试多少事情，它仍然会发生。参见 this apple developer link，它提到如果屏幕很小，那么本机应用程序将捕获视频。没有提到避免它。

Optimization for Small Screens

Currently, Safari optimizes video presentation for the smaller screen on iPhone or iPod touch by playing video using the full screen—video controls appear when the screen is touched, and the video is scaled to fit the screen in portrait or landscape mode. Video is not presented within the webpage. The height and width attributes affect only the space allotted on the webpage, and the controls attribute is ignored. This is true only for Safari on devices with small screens. On Mac OS X, Windows, and iPad, Safari plays video inline, embedded in the webpage.

现在你尝试的东西被很多人推荐了。但是那些并没有按预期工作。所以我想这是不可能的。请参阅 Can I avoid the native fullscreen video player with HTML5 on iPhone or android? 的第一个答案中对评论的赞成票这表明此内联事物无法正常工作。 iPhone 将继续抓取视频，如果找到合适的大屏幕，则内联属性将起作用。

Answer 2

我见过的最好的方法是以 HTML5 canvas.

格式显示视频

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

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

这里有一个 github repo 可以很好地用于此目的，尽管您当然可以编写自己的解决方案。

Answer 3

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

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

Phonegap 内联视频不工作，设置正确

Phonegap inline video not working, with correct settings

html5-video

ios

cordova

phonegap-build