• 使用JSMpeg实现视频自动播放
  • 方案调研
    • 方案对比
  • JSMpeg
    • Vue端使用示例
  • 附录

使用JSMpeg实现视频自动播放

方案调研

需要实现动图效果，共有以下几种方案：

• GIF图
• 视频Video标签
• 导出Webp和APNG
• 使用jsmpg

方案对比

方案	优点	缺点	结论
GIF图	全平台支持	尺寸大，效果差	一般的小图可以继续用GIF途
视频Video标签	尺寸小，效果好	移动浏览器不支持自动播放autoloop，即移动端浏览器做了限制。 移动端自动播放的前提是，静音播放或用户已经产生点击触摸滑动等主动行为的交互后调用play方法	不需要自动播放的场景，可以考虑直接使用Video标签
Webp	尺寸小，效果好	Chrome支持，但是Safari从 iOS14开始支持，iOS16完全支持，即在iOS上兼容性差	一般情况下不考虑使用Webp
APNG	尺寸小，效果好	Chrome从59开始支持，Safari从iOS8上开始支持，	动图尺寸较大的情况，考虑使用APNG，整体支持情况还可以，Chrome 59已经是比较低的版本了，且在低版本上APNG会显示首帧图。
jsmpg	同视频格式，可以实现自动播放，且规避了video标签的兼容问题（原生UI不一致等各种兼容问题）	需要将视频转成.ts文件，转换后ts文件会比MP4文件大一点	需要实现自动播放视频的场景，可以使用JSMpeg方案实现

小结：

1. 需要视频自动播放的场景，一般可以使用jsmpeg方案实现
2. 需要动图的场景，如果GIF图较大，可以考虑使用APNG实现，APNG支持24位真彩色图片、支持8为Alpha透明通道、向下兼容PNG，且体积比Gif更小

注意：

1. 关于 Webp和APNG的支持情况，可以在caniuse (opens new window)网站查询

JSMpeg

JSMpeg是JS写的视频、音频解码器，能使用WebGL&Canvas2D渲染以及WebAudio声音输出。在需要实现自动播放视频的场景，可以使用JSMpeg方案实现。

JSMpeg支持MPEG1 video & MP2 audio，需要将MP4文件转成.ts文件，具体转换工具官网中有提供。

Vue端使用示例

// 1. 官网下载 min.js文件，引入工程，在index.html中加载脚本
<script type="text/javascript" src="/js/jsmpeg.min.js"></script>

// 具体Vue文件中使用
<canvas class="video" id="video"></canvas>

onMounted(() => {
  {
    let canvas = document.getElementById('video')
    let url = 'xxx.ts'

    let player = new JSMpeg.Player(url, {
      canvas: canvas,
      // poster: "xxx.png",
      audio: false,
      // throttled: false, // 这里设置为false，不然不触发onSourceCompleted事件
      // chunkSize: 1024 * 1024, // 使用分块加载数据时，一次加载的块大小。默认1024*1024(1mb)
      progressive: false, // 是否分块加载数据，如果服务器不支持分片，需要设置该属性，否则默认打开分片会加载失败
      loop: true, // 是否循环播放视频。默认true
      autoplay: true,
      // onPlay: () => {
      //   console.log('play')
      // },
      // onPause: () => {
      //   console.log('pause')
      // },
      // onEnded: () => {
      //   console.log('end')
      // },
      // onStalled: () => {
      //   console.log('没有足够的数据用于播放')
      // },
      // onSourceEstablished: () => {
      //   console.log('第一次收到数据')
      // }
      onSourceCompleted: () => {
        // 解决最开始播放时候出现一瞬间的白屏问题,即在 元素上设置一个图片，等视频下载完成后再隐藏图片开始播放
        let shade = document.getElementById('video-shade')
        shade.style.visibility = 'hidden';	// 隐藏元素
      }
    })
  }
})

附录

• JSMpeg官网Github地址：https://github.com/phoboslab/jsmpeg

• CANIUSE网站：https://caniuse.com/，用于查询浏览器各种支持情况