加载扩展
这里使用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;
}
}