VUE使用vue-video-player播放m3u8

先下载vue-video-player插件和hls

"hls.js": "^1.2.3",
"video.js": "^7.20.3",
"videojs-contrib-hls": "^5.15.0",
"videojs-flash": "^2.2.1",

这是我下载的版本

1.设置一个播放器

<video-player
      class="video-player vjs-custom-skin v-player"
      ref="videoPlayer"
      :playsinline="true"
      :options="playerOptions"
      @timeupdate="onPlayerTimeupdate($event)"
    ></video-player>

2.导入需要使用到的组件

import "vue-video-player/src/custom-theme.css";
import { videoPlayer } from "vue-video-player";
import "video.js/dist/video-js.css";
import "videojs-contrib-hls";

3.在data中定义配置播放器

data() {
    return {
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放