vue实现监控视频直播的示例代码

要想使用videojs我们势必是需要安装videojs的, 而且在生产环境中我们也需要依赖它, 所以如下

npm:  npm install video.js -S
npm install videojs-flash videojs-contrib-hls -S

我们打开Vue工程中的主入口main.js进行引入

// 引入videojs
import Video from 'video.js';
import 'video.js/dist/video-js.css';
Vue.prototype.$video = Video; 
import hls from 'videojs-contrib-hls';
Vue.use(hls); // 要播放hls流

创建监控视频九宫格

创建视频容器

虽然是遍历视频容器组件，但是监控视频只播放第一个，所以这里创建视频容器时，需要保证容器id不一致。

到此这篇关于vue实现监控视频直播的示例代码的文章就介绍到这了,更多相关vue 监控视频直播内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！