前端页面播放流媒体 #24
Description
需求描述
为了实现流媒体播放的效果，不仅需要用 FFmpeg 把视频切割成 ts 文件和对应的 m3u8 播放列表，前端还需要用 hls.js 这个库来播放。这个库的兼容性比 video.js 好很多，PC 和移动端都不报错；video.js 总是在页面第一次刷新出来的时候报错，再刷新一下才能播放视频。
方案调研
调研过程
暂无
入选方案
以列表形式记录入选的方案。
- video-dev/hls.js：前端流媒体播放就用它！
应用过程
vue-cli 集成
vue-cli 中引入 hls.js 的正确姿势：
- Google:
Hls is not defined - HLS.js and RequireJS #904：文末提到了作者在其它项目中引入 hls.js 的方式：
- https://github.com/mediaelement/mediaelement/blob/master/docs/usage.md#react
import hlsjs from 'hls.js';
...
window.Hls = hlsjs;实际调用
在前端页面中的实际调用代码，使用 hls.js 官方文档提供的代码 即可：
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video"></video>
<script>
var video = document.getElementById('video');
if(Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
video.addEventListener('loadedmetadata',function() {
video.play();
});
}
</script>错误排查 1
有时候控制台会报下面的错误：
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()
上网查了一下，是 play() 和 pause() 这两个方法之间起了冲突。解决方法在这里：How to prevent “The play() request was interrupted by a call to pause()” error?。
关键代码：
var isPlaying = video.currentTime > 0 && !video.paused && !video.ended
&& video.readyState > 2;
if (!isPlaying) {
video.play();
}错误排查 2
控制台又会报下面的错误：
Uncaught DOMException: Failed to read the 'buffered' property from 'SourceBuffer': This SourceBuffer has been removed from the parent media source.
at e.onSBUpdateEnd
查看报错的地方，是 hls.js，查看对应的 m3u8 和 ts，都是可以在浏览器中直接正常访问的，说明是别的地方的问题。
后来经过排查，发现是视频本身的问题，用格式工厂先预处理一下，然后再用 FFmpeg 切片之后就没问题了。
要点总结
相关 issue：
- 常规视频处理成流媒体 常规视频处理成流媒体 #22