如何在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>

- Darryl Tanzil

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>

- Faks

Answer 2

你可以通过将以下代码添加到你的config.xml中轻松实现此功能：

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

- Paradise

Answer 3

我终于弄清了问题出在哪里。由于config.xml只在构建项目时更新，所以它确实起作用，但在测试视图中却不起作用。我将其作为本机iPhone应用程序运行，并且在iPhone应用程序中它可以正常工作。

- Darryl Tanzil