在 iPhone 上自动播放 HTML5 视频

我遇到了一个奇怪的问题。我想创建一个带有循环背景视频的网站。代码如下

TylerH
已编辑的问题 12日 六月 2018 в 4:20
编程
html5 ios video webkit autoplay
23日 四月 2017 в 11:18
尚无意见

playsinline "属性有帮助吗？

我的情况如下：

        <amp-video autoplay loop muted playsinline class="video-background ">

        </amp-video>

请参阅此处关于 playsinline 的评论： https://webkit.org/blog/6784/new-video-policies-for-ios/

评论(9)

iOs 10+ 允许视频内嵌自动播放，但你必须关闭 iPhone 上的"低功耗模式"。

halfer
编辑本段答案12日 六月 2018 в 4:18
评论(5)

这里有一个小窍门，能克服你在网站视频自动播放中遇到的所有困难：

  1. 检查视频是否正在播放。
  2. 在身体点击或触摸等事件发生时触发视频播放。

注意：有些浏览器不允许自动播放视频，除非用户与设备进行了交互。

因此，可以使用脚本来检查视频是否正在播放：

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});

然后，您只需在正文中附加事件监听器，即可自动播放视频：

$('body').on('click touchstart', function () {
        const videoElement = document.getElementById('home_video');
        if (videoElement.playing) {
            // video is already playing so do nothing
        }
        else {
            // video is not playing
            // so play video now
            videoElement.play();
        }
});

注意：自动播放属性是最基本的属性，除了这些脚本外，还需要添加到视频标记中。

您可以在此链接查看带代码的工作示例：

[设备处于低电量模式/数据保存模式/Safari 浏览器问题时如何自动播放视频][1］

Shakti
编辑本段答案6日 十月 2019 в 9:45
评论(0)