如何在Iphone Phonegap中播放内联视频

Question

我正在使用Phonegap创建一个应用程序,它必须有内联视频.当我为内联视频设置代码时,它在iPad上运行良好,但它不适用于iPhone.在iPhone上,它只是自动全屏显示它.我已尝试在config.xml文件中放入首选项窗格,但它仍然无效.这是代码:

config.xml中

<preference name="AllowInlineMediaPlayback" value="true" />

的index.html

<video width="95%" style="display: block; margin: auto; margin-top: 10%;border: 1px inset #bbbbbb;" autoplay="" id="video" webkit-playsinline>
        <source src="used_files/lesson2_1.mp4" type="video/mp4" id="video">
        Your browser does not support the video tag.
</video>

Answer 1

我使用Cordova为IOS制作了一个混合应用程序,在iPhone上播放视频时遇到了同样的问题.视频全屏显示所有原生控制面板,我根本不需要(打破我的所有应用程序设计).在iPad上它运行良好,但不适用于iPhone.解决问题:

在config.xml中添加

<preference name="AllowInlineMediaPlayback" value="true" />

在您的JavaScript(a)或HTML(b)中(取决于您的代码)

a)在你的JavaScript中

var video = document.getElementById("myVideo");// Get your video
video.setAttribute('webkit-playsinline', 'webkit-playsinline');// Fix fullscreen problem on IOS 8 and 9
video.setAttribute('playsinline', 'playsinline');// Fix fullscreen problem on IOS 10

b)在你的HTML中

<video id="myVideo" webkit-playsinline playsinline>

Answer 2

您可以通过将其添加到您的 config.xml 来轻松允许此操作：

<preference name="AllowInlineMediaPlayback" value="true" />

Answer 3

我终于明白出了什么问题。由于 config.xml 仅在构建项目时更新，因此它确实有效，但在测试视图中无效。我将它作为本机 iPhone 应用程序运行，并且它可以在 iPhone 应用程序中运行。