logo

上次写了一个视频监控转换的demo,后来交给了后端去处理,返回一个视频的链接,交由前端播放。
地址如下:视频监控

链接格式

后端返回的视频监控链接有三种格式。
m3u8:虽然可以直接用原生的video播放,但是对于监控来说,延迟太高了,足足8秒的延迟。
rtmp:播放这玩意还要有flash的支持,但是人家flash都要退出历史舞台了。
flv:这个相对于上面两个来说,延迟低,还不用flash。

选择实现方式

三种格式都有做,先m3u8,然后rtmp,最后flv。
m3u8就不说了。

rtmp

想着前人种树后人乘凉的思想,选择了插件,video.js,但是发现新版本的抛弃了flash,于是使用了旧版本,但是还是需要安装flash的插件。

后来搭建好了,去测试的时候,发现,好家伙,我的浏览器并没有flash。

其实中间,还是用了vue-video-player,这个是基于video.js再一次封装的一个vue插件。发现确实比video.js好用点,但是没办法,我还是选择使用flv格式的吧。

rtmp的代码在我的代码仓库里面,里面有video.js和vue-video-player的使用代码 仓库地址

flv

在不使用flash的情况下,还是选择了flv,使用了flv.js的插件实现视频监控的播放。

使用起来,其实超级简单。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// template
<video
id="videoElement"
ref="first"
class="centeredVideo"
controls
autoplay
width="1024"
height="576"
>您的浏览器不支持video</video>
// js
if (flvjs.isSupported()) {
let flvPlayer = flvjs.createPlayer({
isLive: true,
type: "flv",
url: this.playSouce.address,
});
flvPlayer.attachMediaElement(this.playSouce.name);
flvPlayer.load(); //加载
flvPlayer.play();
}

这样就实现了一个flv播放器的创建。

当然,需求的demo可能还要多一点,点击视频暂停,发送该视频的id给服务器,让服务器知道这个监控暂停了。
于是在视频中加了点击事件,并且获取这个视频对象,获取对象中的id,然后发送请求。前提是这个对象中有id,于是在获取数据播放的时候,就在这个对象中添加了id的这个值。

1
2
3
4
this.playSouce.name.onclick = () => {
console.log(flvPlayer);
this.handleStopItem(flvPlayer._mediaElement.playID);
};

通过上面的形式,就可以获取到了id,并且发送请求。

那暂停全部的视频,则需要将所有创建的视频都给push到一个数组中,在全部暂停的时候遍历,然后为每一个添加pause的事件。

1
2
3
4
this.videoPlayer.push(flvPlayer);
this.videoPlayer.forEach((play) => {
play.pause();
});

通过这样的方式实现暂停全部监控,并同时告诉服务端,暂停监控,也不再推流。