在移动设备上使用Chrome浏览器强制视频自动播放

Force Video Autoplay Using Chrome Browser on mobile devices

本文关键字：浏览器 视频 自动播放 Chrome 移动      更新时间：2023-09-26

在使用移动设备时，视频自动播放不能在Chrome上工作，但可以在Firefox上工作;歌剧。(由于我没有iOS设备，所以不确定Safari的情况如何)。

选项1:使用视频标签:

html代码:

<video autoplay loop poster="images/bg.jpg" id="video_bg">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
css代码: 
video#video_bg {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(../images/bg.jpg) no-repeat;
background-size: cover;
}

选项2:使用带有自动播放设置的YouTube嵌入视频代码:(同样，适用于桌面但不适用于移动设备)

html代码:

<iframe src="http://www.youtube.com/embed/xzvScRnF6MU?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe>

我的问题:

是否有任何javascript代码，将强制自动播放Chrome浏览器，而在移动设备上查看页面?还有其他建议吗?谢谢你！

不完全是。出于同样的原因，移动Safari和Chrome忽略audio和video标签的autoplay和preload属性，它们也将不尊重play()或load()方法-或任何会导致网络上数据活动的方法-除非它们在用户交互回调处理程序中直接调用。其原因是为了防止蜂窝数据用户潜在的昂贵数据费用。更多信息见Apple文档。

阅读克服iOS HTML5音频限制-一篇很棒的文章，解释了你的确切情况，并提供了示例解决方案。

我过去使用的一种方法是将一个有效的"用户交互"事件(如onmousedown、onmouseup、onclick和ontouchstart)放在高级元素上，并在其回调中初始化数据加载。作为一个示例，您可以在body上放置一个ontouchstart事件——当用户在页面上执行任何操作时都会触发该事件——以确保数据尽早开始加载。

var body = document.getElementById('body');
var audio = document.getElementById('audio');
var loadData = function () {
    audio.load();
};
body.addEventListener('ontouchstart', loadData, false);

但是最好的解决方案实际上取决于你的用例。始终考虑音频精灵，并使用WebAudio框架，如HolwerJS，可以真正简化你的生活!

相关文章：