Phonegap 内嵌视频无法正常工作，但设置正确答案

【问题标题】：Phonegap inline video not working, with correct settingsPhonegap 内嵌视频无法正常工作，但设置正确
【发布时间】：2015-03-12 14:47:27
【问题描述】：

我希望在 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

【问题讨论】：

标签： ios cordova html5-video phonegap-build

【解决方案1】：

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

小屏幕优化

目前，Safari 优化了小屏幕的视频演示在 iPhone 或 iPod touch 上使用全屏播放视频—视频触摸屏幕时会出现控件，并且视频会缩放到以纵向或横向模式适应屏幕。视频未呈现网页内。高度和宽度属性只影响网页上分配的空间，并且控制属性被忽略。这仅适用于小屏幕设备上的 Safari。在 Mac 操作系统上 X、Windows 和 iPad，Safari 内嵌播放视频，嵌入在网页。

现在很多人都建议您尝试过。但是那些没有按预期工作。所以我想这是不可能的。请参阅Can I avoid the native fullscreen video player with HTML5 on iPhone or android? 的第一个答案中对 cmets 的支持，这表明这个内联的东西不能正常工作。 iPhone 将继续抓取视频，如果找到合适的大屏幕，则内联属性将起作用。

【讨论】：

谢谢，那我可以停止尝试了。也许将来我可以将视频转换为.gif，现在我只需要接受全屏

【解决方案2】：

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

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

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

这里有一个github repo 非常适合此目的，尽管您当然可以编写自己的解决方案。

【讨论】：

【解决方案3】：

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

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

【讨论】：