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

效果：

image.png

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

npm install video.js@5.6.0 -S

html部分

<video id="my-player"
               class="video-js vjs-default-skin vjs-big-play-centered"
                 preload="auto"
                 autoplay
                 style="width: 100%;height: 100%;"
                 controls
                 data-setup='{"html5" : { "nativeTextTracks" : false }}'>
            <source src="videoSrc" type="rtmp/flv">
</video>

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();
      }
    }
}