解决Chrome浏览器无法自动播放音频视频的问题，Uncaught (in promise) DOMException

原文地址 http://www.nooong.com/docs/chrome_video_autoplay.htm

在最新版的 Chrome 浏览器（以及所有以 Chromium 为内核的浏览器）中，已不再允许自动播放音频和视频。（Google 的某些做法还真是令开发者不爽）。就算你为 video 或audio标签设置了 autoplay 属性也一样不能自动播放。

<video autoplay></video>

如果你用 javascript 代码显式调用 play 方法，你将会在控制台看到如下异常：Uncaught (in promise) DOMException。

这是因为，Chrome 只允许用户对网页进行主动触发后才可自动播放音频和视频。其实，严格地来说，是 Chrome 不允许在用户对网页进行触发之前播放音频，而视频其实是不受限制的。但因为视频文件同样包含了音频，所以也一同被禁止了。Chrome 这样做的目的是为了防止开发者滥用自动播放功能而对用户产生骚扰。

既然知道了原因，那就开始找解决方法。

比较常规的做法是，为 video 标签设置 muted 属性，使它静音，这样视频就能自动播放了，但是没有声音。然后待用户在网页上有了任意触发后，再将 muted 去掉。或者让用户手动去打开音频（腾讯视频就是这样做的）。

<video autoplay muted></video>

document.body.addEventListener('mousedown', function(){vdo.muted = false;}, false);

但是这样给用户的体验终归不太好。那么接下来介绍一种非常规的做法。

Chrome 浏览器虽然对 video 标签和 audio 标签做了非常严格的限制，但它对另一个同样能播放音频和视频的标签 iframe 的限制却没那么严格。那么我们是否可使用 iframe 来触发权限呢？

<video></video>
<iframe allow="autoplay" style="display:none" src="一个空的音频文件"></iframe>

ifm.onload = function(){
	vdo.src = 'YOUR_VIDEO_URL';
	vdo.oncanplay = function(){vdo.play();
	};
};

将 iframe 的src属性指向一个音频文件，使它播放音频。为了给用户比较好的体验，这个音频文件最好是一个空的音频文件，即没有音频内容的文件，时长也尽可能短一点，比如 500ms。

当 iframe 播放了这个音频文件后，就能触发网页播放音频的权限，这样再来播放视频或音频，就没有问题了。