从零到一实现微信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 视频行内自动播放，就是我的银弹了。

希望对大家有帮助吧！