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

【问题标题】：Force Video Autoplay Using Chrome Browser on mobile devices在移动设备上使用 Chrome 浏览器强制视频自动播放
【发布时间】：2014-08-02 13:55:05
【问题描述】：

在使用移动设备时，视频自动播放无法在 Chrome 上使用，但在 Firefox 和 Opera 上可以使用。（不知道 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>

我的问题：

在移动设备上查看页面时，是否有任何 javascript 代码可以强制在 Chrome 浏览器上自动播放？请问还有什么建议吗？谢谢！

【问题讨论】：

AFAIK .. 截至今天 2016 年 6 月 .. 默认情况下，自动播放可在 Chrome 上运行 .. chk plus.google.com/+FrancoisBeaufort/posts/6PiJQqJzGqX

标签： javascript jquery google-chrome

【解决方案1】：

不是真的。出于同样的原因，移动版 Safari 和 Chrome 会忽略 audio 和 video 标签的 autoplay 和 preload 属性，它们也将不支持 play() 或 load() 方法- 或任何会导致网络上的数据活动的方法 - 用于相关实体，除非它们在用户交互回调处理程序中直接调用。原因是为了防止用户在蜂窝数据上产生潜在的昂贵数据费用。更多信息在Apple's Documentation。

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

我过去使用的一个技巧是将有效的“用户交互”事件之一（例如 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);

但最佳解决方案实际上取决于您的用例。始终考虑audio sprites 以及使用WebAudio 框架，例如HolwerJS，可以真正简化您的生活！

【讨论】：