手機瀏覽器自動播放視頻video（設置autoplay無效）的解決方案 - JavaShuo

一、問題的提出

某一天接了個需求，須要在手機的H5頁面內加入視頻，我開開心心作完，準備交付的時候，問題來了，PM想要用戶一進入頁面，視頻就開始播放，不須要用戶手動點擊。html

二、嘗試解決

加autoplay

「視頻自動播放」這個需求是ok的，那我就在video標籤上加個autoplay屬性嘛，在PC端瀏覽器裏面試了一下，運行流暢，沒有遇到什麼問題，可是放在手機瀏覽器裏面打開，就跟沒設置autoplay是同樣的。web

監聽canplay

那不行的話，我在頁面加載完成的時候，監聽video的canplay，而後執行play()，應該能夠運行了吧？然而放到手機裏一看，仍是不行。面試

<video id="video" src="video.mp4" controls></video>
var video = document.querySelector('#video');
video.addEventListener('canplay', function () {
   video.play();
})

三、思考

問題來了，加autoplay不行，能夠理解，可能手機瀏覽器不支持這個屬性吧，可是我監聽視頻加載完成，手動去play()，這是程序常規方法，爲何也不行？
我嘗試在監聽回調裏面加了個alert,發現沒有彈出框。
因此我很長一段時間認爲，手機瀏覽器沒法自動播放視頻，是由於內存大小的限制，致使沒法監聽video的加載完成。chrome

四、解決方案

方案1 使用彈框

昨天在segment上游蕩，發現了原來如今的手機瀏覽器是不容許網頁中視頻自動播放的，只有與用戶進行了一次交互動做，才能夠播放視頻。（音頻同理，這裏就不重複提）
我嘗試了一下，在頁面上加一個彈框，用戶點擊了彈框以後(至關於一次交互完成)，開始播放視頻，發現是能夠播放的，部分代碼以下。json

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
  <title>視頻自動播放</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
    }
    .video-container {
      width: 300px;
      height: 600px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      margin: 0 auto;
    }
    #video {
      display: block;
      width: 100%;
    }
    #mask {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.83);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .pop-container {
      width: 250px;
      height: 200px;
      background: white;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    button {
      width: 50px;
      height: 30px;
      border-radius: 4px;
    }
  </style>
</head>
<body>

<div class="video-container">
  <video id="video" src="video.mp4"></video>
</div>
<div id="mask">
  <div class="pop-container">
    <p>頁面內有自動播放視頻 請注意流量</p>
    <button onclick="playVideo()">我知道了</button>
  </div>
</div>
<script>
  function playVideo() {
    document.getElementById('mask').style.display = 'none';
    var video = document.querySelector('#video');
    video.play();
  }
</script>
</body>
</html>

因此解決視頻自動播放的通常作法是，在頁面加載的時候彈框與用戶產生交互，而後才能開始自動播放(如此看來，手機瀏覽器是真的很重視用戶的流量了。）canvas

存在的問題

按照上面的方法，只要想要在手機端頁面中實現進入頁面，視頻當即自動播放，就必需要藉助一個額外的動做去引導與用戶發生一次交互，那豈不是很醜，有沒有辦法是能夠不借助彈框呢？答案是有的。segmentfault

方案2 使用jsmpeg.js

jsmpeg是一款視頻解碼器，具體怎麼用，能夠百度相關文檔，實話說我對此也不熟悉，第一次聽見的時候是據說jsmpeg能夠實現網頁端的視頻直播功能，這一次用來解決視頻自動播放的需求也是借鑑別人的想法。
關鍵代碼以下：（前提：項目中已經引入了jsmpeg.min.js）瀏覽器

<canvas id="canvas" height="750" width="750"></canvas>

頁面加載完成的時候執行下面的js代碼：
var canvas = document.querySelector('#canvas');
// 注意這裏須要將video.mp4轉換成ts格式的文件 才能生效
var player = new JSMpeg.Player('video.ts', { canvas: canvas, loop: false, autoplay: false, audio: true });
player.audioOut.unlock(this.onUnlocked);
player.play();

//  onUnlocked方法
function onUnlocked() {
    player.volume = 1;
}

這樣即便不跟用戶產生交互視頻也能自動播放了，
注意點
1.demo必須放在服務器上面跑才能正常加載ts文件，若是是在本地的話，不能直接拖進瀏覽器運行，須要起個本地服務器
2.ts文件編碼方式必須爲MPEG編碼，考慮到如今先進的ts編碼方式是H.264了，以前用H.264編碼的ts發現播放不了
存在的問題
1.這樣播出的視頻是沒有聲音的
附參考連接：微信Android自動播放視頻（可交互，設置層級，無控制條，非X5）ffmpeg,jsmpeg.js,.ts視頻服務器

五、補充

1.雖然最後無論經過什麼方法，算是實現了視頻自動播放的需求，可是在真正播放的示例中，你會發現，使用video標籤的時候，雖然設置了視頻的寬高，可是不起做用，因此須要在video中使用下面的屬性
<video id="video" src="" controls webkit-playsinline="webkit-playsinline" playsinline></video>
這樣就能夠在固定區域播放視頻了。
2.藉助方案1的思路，其實能夠實現用戶上傳視頻時的預覽微信

<input type="file" id="filepicker" accept="video/mp4" onchange="chooseVideoInput()">
<div class="video-container">
  <video id="video" src="" controls webkit-playsinline="webkit-playsinline" playsinline></video>
</div>
<script>
  function chooseVideoInput() {
    var files = document.getElementById('filepicker').files[0];
    var video = document.getElementById('video');
    // 注意下面3行代碼
    var url = URL.createObjectURL(files);
    video.src = url;
    video.play();
  }
</script>

3.將mp4轉換成jsmpeg可播放的ts文件的方法
mac os下安裝homebrew,以後使用brew install jsmpeg，運行下面命令：ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 out.ts (其中in.mp4和out.ts填寫原視頻的路徑以及轉出ts的路徑)，親測有效

六、總結

其實關於瀏覽器video的問題困擾了我好久，昨日在segment上瀏覽到「chrome66 禁止自動播放後，有什麼比較好的方法實現audio的自動播放嗎」這樣一個提問的時候，進去看到回答，忽然想起video是否是也是同樣的狀況，今天看了下，果真是相似的，解了好久的疑問，因此勉勵本身必定要善於發現並觸類旁通。
上面提到的不管是解決方案或者說補充的，大概能解決一大半手機瀏覽器視頻相關的問題，剩下的問題有機會再補充。

參考連接：
chrome66 禁止自動播放後，有什麼比較好的方法實現audio的自動播放嗎
 微信Android自動播放視頻（可交互，設置層級，無控制條，非X5）ffmpeg,jsmpeg.js,.ts視頻
 mac osx 下 homebrew安裝
 mac 系統安裝使用 ffmpeg
HTML5音視頻播放(Video,Audio)和常見的坑處理
 video在微信和QQ瀏覽器中不全屏播放解決