这是克服您在网站上进行视频自动播放的所有难题的小技巧:
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();
}
});
注意:autoplay属性是非常基本的属性,除了这些脚本外,还需要将其添加到视频标签中。
您可以在以下链接中看到带有代码的工作示例:
设备处于低功耗模式/数据保存模式/ Safari浏览器问题时如何自动播放视频