vue整合videojs插件，播放RTMP，hls直播视频

1. Vue项目中安装videojs的相关依赖

npm install --save video.js
npm install --save videojs-contrib-hls
npm install --save videojs-flash
npm install --save mux.js

2.在需要播放的页面中引入js对象和css样式

import 'video.js/dist/video-js.css';
import videojs from "video.js";
import 'videojs-flash';
import 'videojs-contrib-hls';
import video_zhCN from 'video.js/dist/lang/zh-CN.json'

3.vue中使用videojs

<template>
<div>
  <div class="video-box">
    <!--style="width:100%; object-fit: fill"标签上添加此属性视频填充div区域-->
    <video style="width:100%; object-fit: fill;border-radius: 5px"
           ref="liveVideo"
           id="liveVideo"
           class="video-js vjs-default-skin vjs-big-play-centered"
           controls
           preload="auto"
           width="410px"
           height="238px">
    </video>
  </div>
</div>
</template>
<script>
import 'video.js/dist/video-js.css';
import videojs from "video.js";
import 'videojs-flash';
import 'videojs-contrib-hls';
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
export default {
  data() {
    return {
      player: null,
      options: {
        controls: true, // 是否显示底部控制栏
        preload: "auto", // 加载<video>标签后是否加载视频
        autoplay: true,
        playbackRates: [0.5, 1, 1.5, 2],// 倍速播放
        width: "394",
        height: "238",
        fluid: false,
        flash: {//支持rtpm播放
          hls: {
            withCredentials: false
          },
          swf: '../static/video-js.swf'//rtmp falsh播放时需要
        },
        languages: {
          "zh-cn": video_zhCN//播放器中文语言
        },
        sources: [{
          //hls协议type为application/x-mpegURL
          // type: "application/x-mpegURL",
          // src:"http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8"
          //rtmp协议的type为rtmp/flv
          type: "rtmp/flv",
          src: "rtmp://58.200.131.2:1935/livetv/cctv1"
        }],
        controlBar: {
          // 自定义按钮的位置
          children: [
            {
              name: "playToggle"
            },
            {
              name: "progressControl"
            },
            {
              name: "currentTimeDisplay"
            },
            {
              name: "timeDivider"//时间进度条
            },
            {
              name: "durationDisplay"
            },
            {
              name: "volumePanel", // 音量调整方式横线条变为竖线条
              inline: false
            },
            {
              name: "pictureInPictureToggle" //画中画播放模式
            },
            {
              name: "fullscreenToggle"
            }
          ]
        }
      }
    };
  },
  mounted() {
    this.autoPlayVideo();
  },
  beforeDestroy() {
    //离开当前路由销毁播放器组件
    if (this.player) {
      this.player.dispose();//销毁播放器
      this.player = null;
      //重新加载video播放器标签，防止第二次进入页面时加载失败
      $(".video-box").html('<video  ref="liveVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls  preload="auto" width="410px" + height="238px"></video>');
    }
  },
  methods: {
    autoPlayVideo() {
      //页面初始化加载完毕自动播放视频
      this.player = videojs(this.$refs.liveVideo, this.options, function onPlayerReady() {
      });
    },
    //切换播放视频时调用改方法
    changeVideo() {
      this.player.src([
        {
          type: "application/x-mpegURL",
          src: "rtmp://58.200.131.2:1935/livetv/chcatv"
        }
      ]);
      this.player.play();
    },
  }
};
</script>
<style scoped lang="less">
.video-box /deep/ .vjs-slider-vertical .vjs-volume-level:before {
  left: -0.5em
}
</style>