从零到一：实现微信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，亲测可用，需测试兼容性