一、基本引用(采用vue-video-player)[记得把网页的flash改成允许]

1.安装依赖:(1)npm install vue-video-player --save(2)npm install --save videojs-flash(切记要除了安装vue-video-playe,还需要手动安装videojs-flash,这里要注意,安装的时候要用npm,不要用cnpm)

2.在自己写监控页面引入:

import "video.js/dist/video-js.css";

import { videoPlayer } from "vue-video-player";

import "videojs-flash";

3.在template标签下需要用到播放器的位置写入播放器标签

4.在data中写入参数:(使用数据源地址:"rtmp://58.200.131.2:1935/livetv/hunantv")

 

5.

6.数据渲染调用queryVideo方法;

二、在vue+element-ui使用情况下,离开页面时,弹出错误,是因为关闭窗口没有注销video,所有引发引发下面错误:

1.

2.我的解决方法是,在离开这个页面组件,刷新页面

   

三、切换数据源

video有点击暂停与播放的事件,可以对该两个事件进行数据源切换

 

 

Logo

前往低代码交流专区

更多推荐