共计 1823 个字符,预计需要花费 5 分钟才能阅读完成。
一、利用场景
- 挪动端全屏播放视频
次要躲避了原生 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
-
介绍
- FFmpeg 视频解决入门教程 | 阮一峰
- FFmpeg| 官网
- ffmpeg 的中文文档
-
装置
- 知乎 |ffmpeg 具体装置教程
-
应用
- 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. 编写相干代码
- 引入 JSMpeg 库
<script src="jsmpeg.min.js"></script>
- 搁置视频容器
<canvas id="video"></canvas>
- 创立视频对象(具体参数配置见官网文档)
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('第一次收到数据')
}
})
- 播放视频
demo.audioOut.unlock() // 须要用户交互以解锁音频性能
demo.target.play() // 播放视频
- 销毁视频对象
demo.destroy()
四、🐞相干问题归档
-
分块加载数据时提醒跨域
- 源站未配置容许跨域
-
码率的抉择(源自某度)
- 1080*720 的分度辨率,用 5000K 左右
- 720*576 的分辨率,用 3500K 左右
- 640*480 的分辨率,用 1500K 左右
-
第一段视频在安卓大部分原生浏览器上呈现音画不同步的景象
- 在第一段视频开始前先后台播一段 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
正文完
发表至: javascript
2021-09-03