前端使用video.js 播放视频流

1. 安装video.js

   npm install video.js

2. 引入video.js

import videojs from "video.js";
import "video.js/dist/video-js.min.css";

3. 应用

<template>
     <video  class="video-js"  ref="videoPlayer"  id="videoPlayer"  style="width: 100%; height: 100%" v-if="visible"></video>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.min.css";
export default {
  name: "VideoDialog",
  data() {
    return {
      options: {
        autoplay: true,
        controls: true,
        fluid: true,
        aspectRatio: "16:9",
        language: "zh-CN",
        techOrder: ["html5"],
        sourceOrder: true,
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        sources: [
          {
            withCredentials: false,
            type: "application/x-mpegURL",
            src: "https://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8",  
          },
        ],
      }
    };
  },
  mounted(){
      setTimeout(() => {
        this.$nextTick(() => {
          this.initVideo();
        },300);
      });
  },
  methods: {
   initVideo() {
      this.player = videojs(
        this.$refs.videoPlayer,
        this.options,
        function onPlayerReady() {}
      );
    }
  }
};
</script>

结束

如需兼容播放mp4之类的视频,动态改下this.options.sources[0].type = '';

 let fileName = this.options.sources[0].src.split('.').pop().toLowerCase();
  if (fileName && fileName ==='mp4'){
          this.options.sources[0].type = '';
   }else{
          this.options.sources[0].type = "application/x-mpegURL";
   }