返回科尔多瓦 iOS 应用程序中的页面时，webkit-playsinline 停止工作

Posted 2023-05-08

【中文标题】返回科尔多瓦 iOS 应用程序中的页面时，webkit-playsinline 停止工作

【英文标题】：webkit-playsinline stops working when returning to page in cordova iOS app

【发布时间】：2014-12-19 14:33:50

【问题描述】：

我在适用于 ios 的 cordova (phonegap) 应用程序的主页中嵌入了一个内嵌视频。我已将必要的允许设置添加到 config.xml

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

视频 html 看起来像这样

<video webkit-playsinline poster="img/videoplaceholder.png" loop class="video" autoplay="autoplay">
    <source src="media/homepage.iphone.mp4"/>
</video>

当应用首次启动时，视频会内联播放并完美运行。但是，如果我离开主页然后返回，视频会在页面加载时全屏显示。 我尝试将视频移到页面下方以测试是否是因为浏览器专注于页面加载。我还尝试使用 JS 删除自动播放和延迟触发播放。我已经在 iOS7 和 iOS8 中测试了上述所有内容，因为它们是我的目标版本。 有什么建议吗？

提前谢谢你。

【问题讨论】：

当您返回视频页面时。您是从头开始重新加载它还是使用 javascript 像 window.history.go(-1)

一样返回

这两种方法我都试过了。该应用程序是使用 angular 构建的，所以我尝试使用 window.location.hash = 'home' 和 window.history.go(-1) 都产生相同的结果

这就是问题所在，iOS webkit 中hashchange 和window.history.go(-1) 的问题，<video> 没有得到正确解析。您必须通过 JS video.load(); 手动触发加载事件或使用 window.open("/index.html"); 从头开始​​重新加载页面以强制加载/解析视频。

感谢您的回复。我刚刚尝试使用video.load()，这仍然会全屏打开视频，window.open("/index.html"); 似乎也会产生同样的问题。

【参考方案1】：

您需要将“allowinlinemediaplayback=YES”添加到您的第一个 window.open 调用中。所以它看起来像这样：

window.open('http://google.com', 'Google', 'location=0,status=0,allowinlinemediaplayback=YES');

出于某种愚蠢的原因，InAppBrowser 将您的 allowinlinemediaplayback 设置默认为 NO。

【讨论】：

我遇到了同样的问题，这解决了它。这个答案应该被接受。

问题不在于 inappbrowser。

你拯救了我的一天！