网页不能自动播放视频、音频的解决方案

至于原因，就是谷歌以及基于 Chromium 开发的浏览器自身限制，出发点是影响用户体验，想想也是，万一，一不小心点开哪个网页，突然播放一些乱七八糟的声音，而且特别大声，估计谁也受不了。

考虑到目前地球上绝大多数浏览器都是基于开源的 Chromium 开发，而且浏览器厂商也统一静止了自动播放，我们就不得不想办法着手解决这个问题。

先看看大厂们是怎么解决的，比如优酷、B站是可以自动播放视频的，那它们是怎么做的？

研究了一下，它们是以静音的方式开启自动播放，然后提示用户手动打开音量。

<video muted src="video.mp4" controls="controls" autoplay="autoplay" width="400" height="300" />

如果你还是觉得不爽可以这么做，当用户在当前页面按下鼠标或者任意键就恢复音量进行播放也是可行滴。

绑定 keydown 或者 mouseup 两个事件，然后可以进行处理，最好是一次性事件。这是我写的一段断码，没整理，可以借鉴下思路。

$(document).ready(function() {

	(function(window, $) {
		var events = ['keydown', 'mouseup'];
		var classes = [".pause", ".play"];
		var listener = function(event) {
			$(classes[+audio.paused], $player).click(); // 播放媒体
			events.forEach(function(e) {
				if (event.type != e) {
					$(window).unbind(e);
				}
			});
		};
		events.forEach(function(e) {
			$(window).one(e, listener);
		});
	})(window, jQuery);
});