前言
上个项目中需要实现一个播放监控的视频的页面,播放的内容是流媒体,播放控制条除了正常的播放,暂停按钮外,还需要抓拍(录制一段内容,保存未jif)、分屏、全屏等功能。
先看一张效果图:画面是ffmpeg推的一个mp4的流。红框部分为控制条。
第一次实现这样的功能,一时间有点懵。梳理过需求,发现以下可能遇到的技术难点。
- 流媒体的播放(推拉流,以及相关状态的处理)
- 如何对播放的画面进行截图
- 全屏功能的实现
下面来逐一解决这些问题。
如何播放流
几种视频流比较以及在H5中播放的插件。
协议 | http-flv | rtmp | hls |
---|---|---|---|
传输方式 | http流 | tcp流 | http流 |
视频封装格式 | flv | flv | Ts文件 |
延迟 | 低 | 低 | 高 |
数据分段 | 连续流 | 连续流 | 切片文件 |
h5播放 | flv.js | video.js | hls.js |
什么是 HTTP FLV ?
HTTP FLV 是将RTMP封装在HTTP协议之上的,可以更好的穿透防火墙等。rtmp和http-flv的视频格式都是flv格式的,只是传输协议而不同。rtmp是tcp的传输协议,而http-flv是http长链接的传输协议。
跟后端同学讨论后决定使用 http-flv
协议作为流的传输方式。前端的话使用 flvjs
来处理流。
什么是 flvjs ?
flvjs是 HTML5 视频播放器,纯原生 JavaScript 开发,不需要 Flash 插件。由 bilibili 网站开源(Github)。
flv.js的优点:
- 具有 H.264 + AAC 编解码器播放功能
- 多部分分段视频播放
- HTTP FLV 低延迟实时流播放
- FLV 通过 WebSocket 实时流播放
- 兼容 Chrome, FireFox, Safari 10, IE11 和 Edge
- 十分低开销,并且通过你的浏览器进行硬件加速
播放器的实现
在 vue 使用 flv 创建一个可复用的播放器组件。
-
安装
npm install --save flv.js
-
新建 FlvLive.vue ,在模板中添加以下代码
<figure
ref="videoContainer"
data-fullscreen="false"
>
<video
ref="video"
autoplay
>
Your browser is too old which doesn't support HTML5 video.
</video>
</figure>
- 在created中加入以下代码
created(){
this.$nextTick(() => {
if (flvjs.isSupported()) {
const flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
url: this.src,
});
flvPlayer.attachMediaElement(this.$refs.video);
flvPlayer.load();
flvPlayer.play();
this.flvPlayer = flvPlayer;
}
});
}
flvjs.isSupported()
判断当前浏览器是否支持flv。
flvPlayer.attachMediaElement(this.$refs.video)
挂载video标签。
全屏功能的实现
这里使用webkitRequestFullScreen()
API实现全屏功能。
来自MDN教程的解释。
webkitRequestFullScreen()
方法用于发出异步请求使元素进入全屏模式。
需要注意的是:如果全屏的元素是video,自定义的控制条会被全屏后的video元素覆盖住,更改z-index也不能解决。所以要放大video的父级元素。
this.$refs.videoContainer.webkitRequestFullScreen();
判断当前页面是否处于全屏状态
isFullScreen() {
return Boolean(
document.fullScreen ||
document.webkitIsFullScreen ||
document.mozFullScreen ||
document.msFullscreenElement ||
document.fullscreenElement,
);
},
CSS部分
设置全屏时的背景,隐藏全屏时video标签中的控制条。
/* fullscreen */
html:-ms-fullscreen {
width: 100%;
}
:-webkit-full-screen {
background: #666;
}
figure[data-fullscreen='true'] {
max-width: 100%;
width: 100%;
margin: 0;
padding: 0;
/* hide controls on fullscreen with WebKit */
video::-webkit-media-controls {
display: none !important;
}
}
在点击全屏按钮时会改变figure[data-fullscreen='true'] {...}
这个属性。体现在如下代码中。
setFullscreenData(state) {
this.$refs.videoContainer.setAttribute(
'data-fullscreen',
Boolean(state),
);
},
抓拍功能的实现
主要实现方式是截取一段视频到canvas中然后使用RecordRTC对其进行录制,具体的实现方法在我的这篇文章中可以看到。 使用RecordRTC对video视频进行录制
可能会遇到的报错
Uncaught (in promise) DOMException:The play() request was interrupted by a new load request
报错信息表示:视频还没有准备好,就已经开始播放了。这种情况会出现在,视频地址错误的情况下。常常是地址为空,或者格式错误。
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
调用play()的时候,音频文件还没有加载完成导致的问题。建议给video标签加上autoplay。不然老是出现这个问题。到底是什么原因导致的还不知道。
同一页面中引入4个画面时,其他三个画面会报错。video标签的id一致导致的。使用ref以解决这个问题。
总结
通过实现一个自定义控制条的H5播放器,学习到了flvjs在vue中的使用。js的全屏API。以及一些document内置对象的使用。
这里有一些实现过程中写的Demo:gitee