在vue中使用hls.js播放hls视频流

1、下载hls

npm install hls -S

2、封装plyaer.vue组件








4、在其他页面中引用:


/*
@sourceUrl:播放地址
@changePlayStatus:事件方法,根据视频播放状态,做进一步的判断
*/
 import ckPlayer from '@/views/components/ckplayer.vue'

  


   changePlayStatus(status) { //获取子组件的播放状态
      if(status) {
          this.disabledShot = false
      } else {
          this.disabledShot = true
          this.sourceUrl = ''
          this.checkedPontsName = ''
      }
    },

参考链接
https://www.cnblogs.com/troublehuan/p/12096691.html

你可能感兴趣的:(在vue中使用hls.js播放hls视频流)