Vue使用flv.js拉流播放flv文件直播视频

加载扩展

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

yarn add flv.js

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

import 包

import flvjs from 'flv.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(flvjs.isSupported()){
              this.player = flvjs.createPlayer({
                type: result.type=='flv',
                url: 'abc.flv'
              });
            }else{
              this.$message.error('不支持的格式');
              return;
            }
            this.player.attachMediaElement(video)
            this.player.load()
            this.player.play()
}

取消播放

cancelVideo() {
      this.showVideoDialog=false;
      //销毁对象

      if(this.player){
        this.player.pause();
        this.player.destroy();
        this.player = null;
      }
}

当时的坑主要是安装包,换了阿里的镜像源还是不可用。而且后面直接影响到npm命令了,npm命令执行报错。yarn watch都用不了了,使用官方镜像后正常。

不过也确实享受到了yarn的优越性,比npm直接安装方便多了,enjoy it!

本站内容来源于网络,转载请注明出处和链接!
本文链接地址: https://pumpkinit.com/1953.html
南瓜  [https://pumpkinit.com]  感谢

发表评论

电子邮件地址不会被公开。 必填项已用*标注