Question

使用移动设备时，视频自动播放功能在Chrome上不起作用，但适用于Firefox＆amp;歌剧。（不知道Safari的故事是什么，因为我没有iOS设备）。

选项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>

我的问题：

在移动设备上查看网页时是否有任何强制在Chrome浏览器上自动播放的JavaScript代码？还有其他建议吗？谢谢！

Answer 1

不是真的。出于同样的原因，移动版Safari和Chrome会忽略autoplay和preload代码的audio和video属性，他们也不尊重play()或load()方法 - 或任何会导致网络上数据活动的方法 - 用于相关实体，除非它们直接在用户交互回调处理程序中调用。原因是为了防止用户对蜂窝数据的潜在代价高昂的数据费用。有关详情，请参见Apple's Documentation。

阅读Overcoming iOS HTML5 audio limitations - 一篇精彩的文章，解释您的具体情况并提供示例解决方案。

我过去使用过的黑客攻击是放置一个有效的“用户互动”事件（例如onmousedown，onmouseup，onclick和{{1 }}）在高级元素上并在其回调中启动数据加载。作为一个说明性示例，您可以在ontouchstart上放置ontouchstart事件 - 只要用户在页面上任何时将触发该事件 - 以确保数据开始加载为尽可能早。

body

但最好的解决方案将取决于您的用例。始终考虑audio sprites并使用WebAudio框架（例如HolwerJS）可以真正简化您的生活！

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

1 个答案: