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;
      }
 
}
打赏作者

发表评论

电子邮件地址不会被公开。