video自动播放

最近在做大屏展示，需要在一开始播放引导视频，产生自动播放需求。

大部分浏览器都有对视频自动播放的限制，除非用户和浏览器发生交互，否则不允许自动播放，执行play方法，报错：

Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.

目前是没有完美的解决方案，只能根据业务场景来选择合适方案。

谷歌相关规则

Improving Autoplay in Chrome

解决方案：

1. 静音播放

静音情况下自动播放是被允许的，所以如果视频不需要声音，设置静音属性，便可自动播放。
腾讯视频目前采用的就是这个方案：默认使用静音播放，用户自己打开声音。

<video muted autoplay src="http://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4"></video>

2. 增加交互

就是在播放前让用户和浏览器发生交互，这个需要根据业务场景来选择。

3. navigator.mediaDevices .getUserMedia

此方案是我最终选择的方案
缺陷：

1. 浏览器第一次打开页面的时候需要用户允许权限， 后续在打开就不需要了。
2. 需要htttps
   因为我目前的项目是内部项目，而且只有一台电脑在操作，所以在第一次打开的时候设置权限，以后再打开页面不需要再有任何操作是可以接受的。
   

var video = document.querySelector("video");
video.addEventListener("canplay", function () {
	video.play().catch(function () {
		navigator.mediaDevices
		  .getUserMedia({ audio: true })
		  .then(function () {
			video.play();
		  })
		  .catch(function () {
		  	// 获取权限错误，则静音播放
			video.muted = true;
			video.play();
		  });
	});
});

4. iframe触发播放权限【测试无效】

iframe触发自动播放权限 文章中提到的使用iframe触发自动播放权限，我测试过是无效的。