定制开发video自动播放

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

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

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

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

谷歌相关规则

解决方案：

1. 静音播放

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

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

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();		  });	});});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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