1. npm安装和引入

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

2.在main.js中引入引入videojs的css文件(不引入也没关系)

import 'video.js/dist/video-js.css'

3. 在需要播放视频的vue组件中引入js对象

import videojs from "video.js";
import "videojs-contrib-hls";

4. 在template中添加video标签

<video
    id="my-video"
    controls
    preload="auto"
    width="500px"
>
    <source src="http://xxxxxx.m3u8" type="application/x-mpegURL" />
</video>

5. 在mounted节点初始化播放器

mounted:{
    openVideo() {
      this.myvideo = videojs("my-video", {
        bigPlayButton: false,
        textTrackDisplay: false,
        posterImage: true,
        errorDisplay: false,
        controlBar: true,
        muted: false,//这个是控制静音的，不静音可能会报错
      });
      this.myvideo.play();
    },
}