结合video.js播放rtmp格式、flv格式、mp4等格式的视频

1.下载相应插件，只能通过npm或者yarn下载， cnpm下载后不可用

npm install video.js --save  
npm install videojs-flash --save //rtmp格式
//flv格式
npm install flv.js --save
npm install videojs-flvjs-es6 --save

2.封装视频播放组件

<template>
  <video
    ref="videoPlayer"
    class="video-js vjs-default-skin vjs-big-play-centered"
    style="width: 100%;height: 100%"
  ></video>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-flvjs-es6";
import "videojs-flash";

export default {
  props: {
    videoUrl: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      videoPlayer: null
    };
  },
  mounted() {
    this.handelVideoUrl();
  },
  methods: {
    handelVideoUrl() {
      let options = {
        muted: true,
        controls: true,//进度条
        autoplay: false,//自动播放
        loop: true,//是否循环
        languages: {
          "zh-CN": require("video.js/dist/lang/zh-CN.json")
        },
        language: "zh-CN",
        preload: "auto"
      };
      const url = this.videoUrl.replace(/\s+/g, "");
      if (url.indexOf("rtmp") > -1) {
        //rtmp格式视频
        options = {
          ...options,
          techOrder: ["html5",  "flash"],// 兼容顺序
          sources: [{ src: this.videoUrl, type: "rtmp/flv" }]
        };
      } else if (url.lastIndexOf(".") > -1) {
        if (url.substring(url.lastIndexOf(".") + 1) === "flv") {
          //flv格式视频
          options = {
            ...options,
            techOrder: ["html5", "flvjs"],// 兼容顺序
            flvjs: {
              mediaDataSource: {
                isLive: false,
                cors: true,
                withCredentials: false
              }
            },
            sources: [{ src: this.videoUrl, type: "video/x-flv" }]
          };
        } else {
          //其他格式视频
          options = {
            ...options,
            sources: [{ src: this.videoUrl, type: "video/mp4" }]
          };
        }
      }

      this.videoPlayer = videojs(this.$refs.videoPlayer, {
        ...options
      });
    }
  },
  destroyed() {
    if (this.videoPlayer) {
      this.videoPlayer.dispose();
    }
  }
};
</script>

3.模态框中引用组件

html代码：

<el-dialog
      title=""
      :visible.sync="dialogTableVisible"
      :modal="false"
      width="700px"
      class="dialog-view"
      @close="dialogTableVisible = false"
    >
      <hls-video
        v-if="dialogTableVisible"
        :videoUrl="currentFileUrl"
        class="videoBox"
        style="height: 370px"
      ></hls-video>
    </el-dialog>

js代码

import HlsVideo from "./HlsVideo";
export default {
	components: { HlsVideo },
	data() {
	    return {
	      currentFileUrl: "",  //当前视频地址
	      dialogTableVisible: false
	    };
	  },
}