autoplay自动播放策略

1. chrome66以及更高的版本不允许媒体自动播放。

2. safari 阻止自动播放视频。
   

   safari阻止自动播放

3. 出于用户体验，节省流量的考虑，移动端禁止自动播放

4. opera 阻止autoplay

解决策略参考：
1. Chrome autoplay-policy
2. safari
3. opera autoplay

• 自动播放策略：
  1. 静音自动播放总是被允许的。
  2. 用户已经产生交互（点击触摸滑动等..） ，这里的交互指的是只要用户在页面中用有了操作，而不是说一定要用户点击audio或者video去播放
  3. 使用iframe授权自动播放
  4. chrome提高MEI指数（?）
  5. 移动端用户将网站添加到home screen(没试过)

一、视频（video）

• 静音的自动播放总是被允许的。
  经过测试，静音的视频元素可以自动播放。音频元素添加muted后也无法自动播放。
  所以video元素可通过添加muted属性使其自动播放，然后提示用户打开声音。

二、音频（audio）

• 使用Web Audio API播放声音。
  经过查阅发现这是一个非常强大的处理声音的API，可以实现很多的声音效果（扩音，缩音，淡入淡出等），有待学习。
  兼容情况：

  
  
  Web Audio API兼容情况

三、音视频（audio+video）

1. 在用户交互(点击，触摸滑动等操作)后，使用.paly()方法播放。
   注意：用户没有产生交互前调用play()会抛出异常

• 使用iframe允许自动播放。
  <iframe src = "http://fjdx.sc.chinaz.com/Files/DownLoad/sound1/201808/10467.wav" allow = "autoplay"/>

四、浏览器/参数设置

1. chrome

- 设置开发者开关，更改chrome自动播放策略。
前往：**chrome://flags/#autoplay-policy**，设置 **Autoplay policy**开关。

2. safari

- [safari官网](https://www.apple.com/cn/safari/)提示：可以进入Safari浏览器中的单个网站设置，启用媒体自动播放。

解决办法：

1. 使用Web Audio API播放声音。
2. 不直接使用autoplay进行自动播放。使用.play()方法播放。
   video.play()和audio.play()都返回promise。未禁止的播放完后会resolve，禁止的会reject。
   video和audio可以在用户交互（click，touch，tap等）后调用.play()播放,video还可以静音后播放。

   /**video.play()返回一个promise，未禁止则resolve，禁止则reject**/
   let video = document.getElementById("video");
   let audio = document.getElementById("audio");
   let videoPlay = video.play();
   let audioPlay = audio.play();
   
   videoPlay.then(()=>{
       console.log('可以自动播放');
   }).catch((err)=>{
       console.log(err);
       console.log("不允许自动播放");
   
       //视频元素可以选择静音后再播放,提示用户打开声音
       video.muted=true;
       video.play();
   
       //也可以在用户交互后调用.play()
       // ...
   });
   
   audioPlay.then(()=>{
       console.log('可以自动播放');
   }).catch((err)=>{
       console.log(err);
       console.log("不允许自动播放");
   
       //音频元素只在用户交互后调用.play(),
       // ...
   });
   

3. android h5 webview
   android 4.2 webview添加了是否需要用户手势去触发音视频的播放开关，默认为true(需要用户手势触发)。
   将webview的这个开关设置为不需要用户触发：
   mWebview.getSettings().setMediaPlaybackRequiresUserGesture(false);
4. IOS h5 webview
   IOS APP给webview设置mediaPlaybackRequiresUserAction后可以允许自动播放.