加載擴(kuò)展

這里使用yarn來代替npm進(jìn)行包的管理，因?yàn)閚pm安裝的話有一些問題（其實(shí)就是當(dāng)時(shí)npm死活安不上，才用的yarn）。不過后來查到，yarn會(huì)緩存下載過的包，并且會(huì)生成lock文件來鎖定版本，而且支持并發(fā)下載，還是有一定的優(yōu)勢(shì)的。

yarn add flv.js

安裝后查看項(xiàng)目中node_modules下是否多了flv.js這個(gè)文件夾。

import 包

import flvjs from 'flv.js'

這里我起了一個(gè)別名

播放視頻

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()">關(guān)閉</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;
      //銷毀對(duì)象

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