autoplay自動(dòng)播放策略

1. chrome66以及更高的版本不允許媒體自動(dòng)播放荠商。

2. safari 阻止自動(dòng)播放視頻。
   

   safari阻止自動(dòng)播放

3. 出于用戶體驗(yàn)驶乾，節(jié)省流量的考慮惰爬，移動(dòng)端禁止自動(dòng)播放

4. opera 阻止autoplay

解決策略參考：
1. Chrome autoplay-policy
2. safari
3. opera autoplay

• 自動(dòng)播放策略：
  1. 靜音自動(dòng)播放總是被允許的辖试。
  2. 用戶已經(jīng)產(chǎn)生交互（點(diǎn)擊觸摸滑動(dòng)等..） ，這里的交互指的是只要用戶在頁(yè)面中用有了操作劈狐，而不是說(shuō)一定要用戶點(diǎn)擊audio或者video去播放
  3. 使用iframe授權(quán)自動(dòng)播放
  4. chrome提高M(jìn)EI指數(shù)（?）
  5. 移動(dòng)端用戶將網(wǎng)站添加到home screen(沒(méi)試過(guò))

一罐孝、視頻（video）

• 靜音的自動(dòng)播放總是被允許的。
  經(jīng)過(guò)測(cè)試肥缔，靜音的視頻元素可以自動(dòng)播放莲兢。音頻元素添加muted后也無(wú)法自動(dòng)播放。
  所以video元素可通過(guò)添加muted屬性使其自動(dòng)播放续膳，然后提示用戶打開(kāi)聲音改艇。

二、音頻（audio）

• 使用Web Audio API播放聲音姑宽。
  經(jīng)過(guò)查閱發(fā)現(xiàn)這是一個(gè)非常強(qiáng)大的處理聲音的API遣耍，可以實(shí)現(xiàn)很多的聲音效果（擴(kuò)音，縮音炮车，淡入淡出等）舵变，有待學(xué)習(xí)。
  兼容情況：

  
  
  Web Audio API兼容情況

三瘦穆、音視頻（audio+video）

1. 在用戶交互(點(diǎn)擊纪隙，觸摸滑動(dòng)等操作)后，使用.paly()方法播放扛或。
   注意：用戶沒(méi)有產(chǎn)生交互前調(diào)用play()會(huì)拋出異常

• 使用iframe允許自動(dòng)播放绵咱。
  <iframe src = "http://fjdx.sc.chinaz.com/Files/DownLoad/sound1/201808/10467.wav" allow = "autoplay"/>

四、瀏覽器/參數(shù)設(shè)置

1. chrome

- 設(shè)置開(kāi)發(fā)者開(kāi)關(guān)熙兔，更改chrome自動(dòng)播放策略悲伶。
前往：**chrome://flags/#autoplay-policy**，設(shè)置 **Autoplay policy**開(kāi)關(guān)住涉。

2. safari

- [safari官網(wǎng)](https://www.apple.com/cn/safari/)提示：可以進(jìn)入Safari瀏覽器中的單個(gè)網(wǎng)站設(shè)置麸锉，啟用媒體自動(dòng)播放。

解決辦法：

1. 使用Web Audio API播放聲音舆声。
2. 不直接使用autoplay進(jìn)行自動(dòng)播放花沉。使用.play()方法播放。
   video.play()和audio.play()都返回promise媳握。未禁止的播放完后會(huì)resolve碱屁，禁止的會(huì)reject。
   video和audio可以在用戶交互（click蛾找，touch娩脾，tap等）后調(diào)用.play()播放,video還可以靜音后播放。

   /**video.play()返回一個(gè)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('可以自動(dòng)播放');
   }).catch((err)=>{
       console.log(err);
       console.log("不允許自動(dòng)播放");
   
       //視頻元素可以選擇靜音后再播放,提示用戶打開(kāi)聲音
       video.muted=true;
       video.play();
   
       //也可以在用戶交互后調(diào)用.play()
       // ...
   });
   
   audioPlay.then(()=>{
       console.log('可以自動(dòng)播放');
   }).catch((err)=>{
       console.log(err);
       console.log("不允許自動(dòng)播放");
   
       //音頻元素只在用戶交互后調(diào)用.play(),
       // ...
   });
   

3. android h5 webview
   android 4.2 webview添加了是否需要用戶手勢(shì)去觸發(fā)音視頻的播放開(kāi)關(guān)架曹，默認(rèn)為true(需要用戶手勢(shì)觸發(fā))。
   將webview的這個(gè)開(kāi)關(guān)設(shè)置為不需要用戶觸發(fā)：
   mWebview.getSettings().setMediaPlaybackRequiresUserGesture(false);
4. IOS h5 webview
   IOS APP給webview設(shè)置mediaPlaybackRequiresUserAction后可以允許自動(dòng)播放.