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，它提到如果屏幕较小，则原生应用会捕获视频。没有提到避免它。

小屏幕优化

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

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

Answer 2

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

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

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

这是一个适用于此目的的github repo，虽然您当然可以编写自己的解决方案。

Answer 3

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

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

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

3 个答案: