chrome不用flash,播放流视频

本文介绍了如何在Vue项目中使用flv.js库来播放FLV格式的视频,包括引入库、设置播放器参数、错误处理及视频控制。重点展示了如何通过`import flvjs from 'flv.js/dist/flv.min.js'`和创建flvPlayer实例来实现实时播放和暂停功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  1. npm install --save flv.js
  2. 引用import flvjs from “flv.js/dist/flv.min.js”;`
data(){
	return{
		wrjzhData:{
			attachmentName: "https://api.tjdataspace.com/flv.flv",
			fileName: "航拍视频",videoType:"flv",
			id: 3
		}
	}
}
mounted(){
	this.playZhPause(this.wrjzhData)
}
methods:{
	playZhPause(row){
		if (flvjs.isSupported()) {
			  this.flvPlayer = flvjs.createPlayer(
			    {
			      type: row.videoType,
			      isLive: true,
			      hasAudio: false,
			      url: row.attachmentName,
			    }
			    // {
			    // 	cors: true, // 是否跨域
			    // 	enableWorker: true, // 是否多线程工作
			    // 	enableStashBuffer: false, // 是否启用缓存
			    // 	stashInitialSize: 128, // 缓存大小(kb)  默认384kb
			    // 	autoCleanupSourceBuffer: true // 是否自动清理缓存
			    // }
			  );
			  this.$nextTick(() => {
			    this.playZhVideo();
			  });
			}
		},
		playZhVideo(){
			let videoElement = this.$refs.zhFlvVideo;
			this.flvPlayer.attachMediaElement(videoElement);
			this.flvPlayer.load();
			this.flvPlayer.play();
			// 报错重连
			this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
			  if (this.flvPlayer) {
			    this.destoryVideo();
			    this.createVideo();
			  }
			});
		},
		destoryZhVideo() {
			this.iswrj = false;
		  if (this.flvPlayer) {
		    this.flvPlayer.pause();
		    this.flvPlayer.unload();
		    this.flvPlayer.detachMediaElement();
		    this.flvPlayer.destroy();
		    this.flvPlayer = null;
		  }
		}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值