移动端视频播放方案——JSMpeg

一、应用场景

• 移动端全屏播放视频

主要规避了原生video标签存在的如下兼容问题：

• 原生UI不一致
• 国产浏览器对播放器劫持（点名：QQ浏览器、百度浏览器、UC浏览器......）
• 内联播放且视频层级无法覆盖
• 🤣 其他问题

二、JSMpeg介绍

• 一个用 JavaScript 编写的视频播放器
• 由 MPEG-TS 解复用器、MPEG1 视频和 MP2 音频解码器、WebGL 和 Canvas2D 渲染器和 WebAudio 声音输出组成
• 可以通过 Ajax 加载静态视频，并允许通过 WebSockets 进行低延迟流式传输（约 50 毫秒）
• 可以在 iPhone 5S 上以 30fps 的速度解码 720p 视频
• 可以在任何现代浏览器（Chrome、Firefox、Safari、Edge）中使用，并且压缩后仅 20kb

三、开发流程

1. 准备视频资源

FFmpeg

1. 介绍

   • FFmpeg 视频处理入门教程|阮一峰
   • FFmpeg|官网
   • ffmpeg的中文文档

2. 安装

   • 知乎|ffmpeg详细安装教程

3. 使用

   • FFmpeg 教程
   • 简书|ffmpeg使用教程

🌰栗子1：将MP4格式转码为TS格式

将1.mp4视频转码为

视频mpeg1video编码，码率3500k，等比缩放成宽度750px，音频mp2编码的

out.ts视频

ffmpeg \
-i 1.mp4 \
-f mpegts -codec:v mpeg1video -b:v 3500k -vf scale=750:-1 -codec:a mp2 \
out.ts

🌰栗子2：截取视频指定时长的片段

ffmpeg \
-ss 00:00:00 -t 00:00:05 \
-i 1.mp4 -f mpegts -codec:v mpeg1video -b:v 3500k -vf scale=750:-1 -codec:a mp2 \
out1.ts

2. 编写相关代码

1. 引入JSMpeg库

<script src="jsmpeg.min.js"></script>

2. 放置视频容器

<canvas id="video"></canvas>

3. 创建视频对象（详细参数配置见官方文档）

var demo = new JSMpeg.Player('https://jsmpeg.com/bjork-all-is-full-of-love.ts', {
    canvas: document.getElementById('video'), // 容器id
    throttled: false, // 这里设置为false，不然不触发onSourceCompleted事件
    chunkSize: 4 * 1024 * 1024, // 使用分块加载数据时，一次加载的块大小。默认1024*1024(1mb)
    progressive: false, // 是否分块加载数据
    loop: false, // 是否循环播放视频。默认true
    onSourceCompleted: () => {
        console.log('completed')
    },
    onPlay: () => {
        console.log('play')
    },
    onPause: () => {
        console.log('pause')
    },
    onEnded: () => {
        console.log('end')
    },
    onStalled: () => {
        console.log('没有足够的数据用于播放')
    },
    onSourceEstablished: () => {
        console.log('第一次收到数据')
    }
})

4. 播放视频

demo.audioOut.unlock() // 需要用户交互以解锁音频功能
demo.target.play() // 播放视频

5. 销毁视频对象

demo.destroy()

四、🐞相关问题归档

1. 分块加载数据时提示跨域

   • 源站未配置允许跨域

2. 码率的选择（源自某度）

   • 1080*720的分度辨率，用5000K左右
   • 720*576的分辨率，用3500K左右
   • 640*480的分辨率，用1500K左右

3. 第一段视频在安卓大部分原生浏览器上出现音画不同步的现象

   • 在第一段视频开始前先后台播一段1s的视频

六、相关文档

• JSMpeg|官网
• JSMpeg|github
• JSMpeg的使用

1. 主流视频解码库

• JSMpeg
• Broadway.js
• ogv.js

经评估JSMpeg支持情况较好

2. 移动端视频方案

• 张鑫旭|JS视频解码JSMpeg和Broadway开箱测评
• 张鑫旭|使用ogv.js在Android浏览器解析webM视频
• 掘金|移动端h5视频方案

3. 视频播放器相关库

• Chimee|一套可扩展的H5视频播放器组件化框架
• 西瓜播放器

以上均未解决QQ浏览器、百度浏览器的层级与无法关闭问题

4. 透明视频

• vap