写在前面

不知不觉又到了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视频行内自动播放，就是我的银弹了。

希望对大家有帮助吧！