rideo选中 vue_vue+video.js实现RTMP直播流与地址选择切换

实现点击左侧摄像头列表，切换到对应摄像头画面

效果：

image.png

首先是需要的video.js版本，之前试了6.X版本，一直报错试了各种办法都无法解决，最后切换到低版本5.X可以了。在项目根目录下使用cmd或者在IDE使用控制台，输入以下命令安装依赖包，前提是已安装NPM包管理工具，该工具会随node.js一同安装。

npm install video.js@5.6.0 -S

html部分

class="video-js vjs-default-skin vjs-big-play-centered"

preload="auto"

autoplay

style="width: 100%;height: 100%;"

controls

data-setup='{"html5" : { "nativeTextTracks" : false }}'>

poster-视频开始前的封面图片

preload-预加载

autoplay-自动播放

controls-控制按钮

data-setup-播放器初始化相关，我用了js中实例化播放器所以删掉了这个属性，播放器使用无影响，具体参考：https://www.awaimai.com/2053.html

js部分

import videojs from 'video.js'

import 'video.js/dist/video-js.css'

import SWF_URL from 'videojs-swf/dist/video-js.swf'

videojs.options.flash.swf = SWF_URL // 设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件

export default {

name: 'videojs',

data() {

return {

videoPlayer: undefined,

videoSrc: ''

}

},

methods: {

// 选择摄像头时的触发事件，可以根据摄像头信息获取对应的直播流地址后对videoSrc进行赋值

selectVideo() {

this.videoSrc = 'rtmp://10.74.20.123/live/record1';

const videoPlayer = videojs('my-player');// 关联video标签的id

videoPlayer.src({

src: this.videoSrc,

type: 'rtmp/flv'

});

videoPlayer.play();

}

}

}