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应用程序中运行。

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

3 个答案: