最近工作上需要播放m3u8、hls、flv格式视频，记录一下

下载 video.js和flv.js

npm install video.js flv.js
//或者
yarn add video.js flv.js
//在main.js引入样式！！！
import 'video.js/dist/video-js.css'

一、m3u8和hls格式视频流👇

获取到视频链接才调getVideo方法，不然会报错！！！

<template>
  <div>
    <video
      id="my-video"
      class="video-js vjs-default-skin"
    >
      <source :src="url" type="application/x-mpegURL" />
    </video>
  </div>
</template>

<script>
import videoJs from "video.js";
export default {
  data() {
    return {
      url: "",
      videoExample: null,// videoJs实例
    };
  },
  created() {},
  methods: {
    getVideo() {
      this.$nextTick(() => {
        this.videoExample = videoJs("my-video", {
          controls: true, //是否显示控制器
          preload: "auto", //自动预加载
          wdith:"500px",//宽度
          height:"500px",//高度
        });
        // 当存在路径时才播放
        if (this.url) {
          this.videoExample.play();
        }
      });
    },
  },
  beforeDestroy() {
  	// 销毁实例
    if (this.videoExample) {
      this.videoExample.dispose(); 
      this.videoExample=null
    }
  },
};
</script>

<style lang="scss" scoped>
</style>

二、flv格式视频流👇

获取到视频链接才调getVideo方法，不然会报错 ！！！

<template>
  <div>
    <video
      id="my-video"
      controls
      preload="auto"
      class="video-js vjs-default-skin"
    >
    </video>
  </div>
</template>
<script>
import flvJs from "flv.js";
export default {
 data(){
   return{
     url:"",
     videoExample:null,
   }
},
 methods: {
    getVideo() {
     this.$nextTick(() => {
        if (flvJs.isSupported()) {
          const videoElement = document.getElementById("my-video");
          this.videoExample= flvJs.createPlayer({
            type: "flv", //类型
            isLive: true, //是否实时流
            url: this.url, //路径
            // segments: [], //多段播放
          });
          this.videoExample.attachMediaElement(videoElement);
          this.videoExample.load();
          this.videoExample.play();
        }
      });
    },
    // 销毁实例
    videoDestroy() {
      if (this.videoPlayer) {
        this.videoExample.pause();
        this.videoExample.unload();
        this.videoExample.detachMediaElement();
        this.videoExample.destroy();
        this.videoExample= null;
      }
    },
  },
  beforeDestroy() {
    this.videoDestroy();
  },
}
</script>

后记：希望冬天的风能吹散一年里所有的遗憾