vue中使用video.js播放m3u8格式的视频

下载video.js

yarn add video.js
yarn add videojs-contrib-hls // 播放hls流需要的插件（关键）

在main.js中引入video.js

// 引入videojs
import Video from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
Vue.prototype.$video = Video

html代码

      <video id="videoPlayer" style="width:100%;height:100%" class="video-js"></video>

设置自动播放

data中定义数据

   options: {
        autoplay: true, // 设置自动播放
        muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
        preload: 'auto', // 预加载
        controls: true // 显示播放的控件
      },
      player: null

methods中设置播放视频路径

    getVideo(nowPlayVideoUrl) {
      this.player = Videojs('videoPlayer', this.options)
      // 关键代码， 动态设置src，才可实现换台操作
      this.player.src([
        {
          src: nowPlayVideoUrl,
          type: 'application/x-mpegURL' // 告诉videojs,这是一个hls流
        }
      ])
    }

写入视频路径即可

    this.getVideo(“视频路径”)

坑：

1.直接在video改变src属性视频是不会切换的

 // 关键代码， 动态设置src，才可实现换台操作
      this.player.src([
        {
          src: nowPlayVideoUrl,
          type: 'application/x-mpegURL' // 告诉videojs,这是一个hls流
        }
      ])

2.如果你第一次渲染没问题，但从这个页面跳到别的页面，再跳回来，bug出现了

 beforeDestroy() {
    //  组件销毁时，清除播放器
    if (this.player) {
      this.player.dispose() // 该方法会重置videojs的内部状态并移除dom
    }
  },

标签：src,vue,m3u8,hls,js,player,video,videojs
来源： https://blog.csdn.net/weixin_45670926/article/details/114072389