flv格式的监控视频播放功能的实现

最近项目中涉及到一个视频板块，要实时播放监控视频，类似于直播流的flv格式，摸索完现在功能算是实现了，记录一下，也方便以后给有需要的小伙伴参考。

我是使用video标签来实现的，所以需求下载flv.js依赖包。

第一步： npm i  flv.js -S  

第二步：如下图 在需要使用的页面 引入flvjs 

 第三步：使用video标签  

记得给video标签添加宽高，如果想给视频加入控制条 ，就加上controls属性，而且在视频加载时 会有加载效果出现 

第四步：我这个是级联选择器作为触发开关，切换选择项 ，调用视频，动态渲染多个视频 

data定义初始值

 

 

 

 在实现功能的过程中 有一个问题，如果是像我这种动态渲染视频数量的话 ，在谷歌浏览器中会有视频数量的限制，只能一次播放6个视频，要放开限制的话 需要后端去做处理了