一、利用场景

  • 挪动端全屏播放视频

次要躲避了原生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>
  1. 搁置视频容器
<canvas id="video"></canvas>
  1. 创立视频对象（具体参数配置见官网文档）
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('第一次收到数据')    }})
  1. 播放视频
demo.audioOut.unlock() // 须要用户交互以解锁音频性能demo.target.play() // 播放视频
  1. 销毁视频对象
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