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;
      }
}