Vue使用hls.js拉流播放m3u8文件录播视频

加载扩展

这里使用yarn来代替npm进行包的管理，因为npm安装的话有一些问题（其实就是当时npm死活安不上，才用的yarn）。不过后来查到，yarn会缓存下载过的包，并且会生成lock文件来锁定版本，而且支持并发下载，还是有一定的优势的。(没错，这段就是拷贝的flv.js的介绍）

yarn add hls.js

安装后查看项目中node_modules下是否多了hls.js这个文件夹。

import 包

import hlsjs from 'hls.js'

这里我起了一个别名

播放视频

HTML部分

<el-dialog :visible="showVideoDialog"   width="50%"  :show-close="false">
        <div id="app-container">
            <video ref="videoElement" v-model="test" id="videoElement" controls autoplay muted width="600" height="450"></video>
        </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancelVideo()">关闭</el-button>
      </div>
    </el-dialog>

script部分

播放

//play for flv
show(){
          let video =this.$refs.videoElement;//定义挂载点
          if(hlsjs.isSupported()){
                this.hlsjs = new hlsjs();
                this.hlsjs.loadSource('abc.m3u8');
                this.hlsjs.attachMedia(video);
                this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
                    console.log('加载成功');
                    this.video.play();
                });
              this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => {
                // console.log(event, data);
                // 监听出错事件
                console.log('加载失败');
              });
            }else{
              this.$message.error('不支持的格式');
              return;
            }
}

取消播放

cancelVideo() {
      if (this.hlsjs) {
        this.$refs.videoElement.pause();
        this.hlsjs.destroy();
        this.hlsjs = null;
      }
 
}