從零到一：實現微信H5視頻行內autoplay

寫在前面

不知不覺又到了2019年的深秋，想不到上一篇文章孩子還沒出生，這一篇就已經半歲了。創業加上帶孩子，時間會過得飛快。在這裏勸你們仍是不要過早創業（gank），多多學習（發育）才實際。打工雖不自由，起碼安穩，面對任務和書本，勝於面對盈利仍是虧本。

廢話很少說，如下正文。

一般會出現的需求

1. 微信進入H5後，自動播放視頻
2. 在流行終端上體驗儘可能一致
3. 可在視頻上疊加UI

轉化爲技術需求

1. 視頻須要自動播放
2. 如何兼容iOS和安卓
3. 視頻須要行內播放

PS：要疊加UI，就得是行內播放而非全屏，iOS倒好，安卓的微信用的X5內核，一言難盡，卡住很多人，網上求助相關問題的不在少數。

---

來個簡單的demo

查看demo
倉庫地址
PS：在微信中打開才能自動播放哦。

關鍵代碼塊

<div class="container">
  <!-- For iOS -->
  <video src="https://static.shikehuyu.com/vincent/wx-video-demo/movie.mp4"
    playsinline webkit-playsinline loop>
  </video>
  <!-- For Android -->
  <canvas></canvas>
  <!-- 示例彈幕 -->
  <div class="danmu">示例彈幕，表示你能夠聽任意UI在視頻上面</div>
</div>

<style>
video {
  width: 80vw;
  height: 80vw;
  object-fit: contain;
  object-position: center;
  display: none;
}
canvas {
  display: none;
}
</style>

function initVideo() {
  var isAndroid = window.navigator.userAgent.match(/android/ig)
  if (isAndroid) { // 安卓
    var src = "https://static.shikehuyu.com/vincent/wx-video-demo/movie.ts"
    player = new JSMpeg.Player(src, {
      canvas: canvas,
      autoplay: true,
      progressive: false,
      loop: true,
      onVideoDecode: function() {
        canvas.style.display = 'block'
        canvas.style.height = 80 / (canvas.width / canvas.height) + "vw"
      }
    })
  } else { // iOS
    player = video
    video.style.display = 'block'
  }
}

window.onload = function() {
  initVideo()
  // 自動播放
  document.addEventListener('WeixinJSBridgeReady', () => {
    player.play()
  })
}

實現要點

1. 區分開iOS和安卓，iOS用原生video標籤，安卓用JSMpeg，繪製畫面到canvas上。
2. iOS用mp4或者其餘原生video標籤支持的視頻格式，安卓用ts格式。(其中ts格式須要用ffmpeg來轉一下，下文會說起)
3. 監聽WeixinJSBridgeReady事件，調用視頻播放方法，實現自動播放。

---

什麼是ts文件

來自百度百科
ts即"Transport Stream"的縮寫。MPEG2-TS格式的特色就是要求從視頻流的任一片斷開始都是能夠獨立解碼的。

簡單地說就是視頻數據流，將mp4等格式視頻轉換成ts後，就能夠一段段進行解析，可用於視頻直播。JSMpeg就是經過解析視頻數據，而後繪製在canvas上，來實現視頻播放的。

如何轉換爲ts格式

參考 JSMpeg的README

轉換前須要安裝ffmpeg，能夠到ffmpeg官網下載，也能夠用homebrew等工具安裝：

brew install ffmpeg

我目前只單純的轉換一下，沒特別輸入其餘參數，按教程來走吧。終端進入到視頻目錄，輸入以下命令：

ffmpeg -i movie.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 movie.ts

踩坑注意

1.用npm安裝的JSMpeg不可用，親測會出現雪花屏，官網https://jsmpeg.com/下載的纔可用！

2.progressive需手動設置爲false，默認爲true，會發起屢次請求，產生額外流量！

延伸問題

1. 媒體的播放，包括音頻和視頻，在移動端上須要用戶操做才能夠播放。（老生常談）
2. 特別的是，視頻用video標籤，加muted屬性，也就是靜音，就能夠autoplay了。（大概是瀏覽器的開發人員被 某帶顏色網站突如其來的聲音 嚇到了？🐶）

結語

看起來只是一個很小的功能實現，預計5分鐘，填坑2小時。不知道是否有其餘更好的實現方法，就目前而言，iOS用video、Android用JSMpeg，而後依靠監聽WeixinJSBridgeReady事件，實現微信H5視頻行內自動播放，就是個人銀彈了。

但願對你們有幫助吧！

---

其餘實現

x5-video-player-type="h5-page"

感謝 gchxp的回覆： tx今年新加的新屬性x5-video-player-type="h5-page" 針對Android，親測可用，需測試兼容性