vue使用xgplayer教程(flv直播流、flv格式视频)

在这里插入图片描述

安装

# 最新稳定版
$ npm install xgplayer
$ npm install xgplayer-flv

使用

<!-- 直播DOM--->
<div id="flv_live"></div>
<!-- 视频DOM--->
<div id="flv_video"></div>

import Player from "xgplayer";
import FlvPlayer from "xgplayer-flv";
export default{
	data(){
		return{
		player:null,
		}
	},
	mounted(){
		this.startPlayLive();
	},
	methods:{
		startPlayLive(){
			this.player=new Player({
				id:"flv_live",
				url:"http:localhost:8080/live/livestream.flv",
				isLive:true,
				autoplay:true,
				autoplayMuted:true,//进入页面自动播放直播流要打开此属性，默认为静音状态。
				playbackRate: [],//不打开倍速
				height: window.innerHeight,
				width: window.innerWidth,
				plugins:["FlvPlayer"],
				cors:true,
				fixVideoSize:"auto",
				volume:1,
			});
			this.player.once("canplay",()=>{
				this.play.pause();
				this.play.destory();
				this.play=null;
				this.startPlayLive();
			});
			this.player.once("ended",()=>{
				this.play.pause();
				this.play.destory();
				this.play=null;
				this.startPlayLive();
			});
			this.player.once("error",()=>{
				this.play.pause();
				this.play.destory();
				this.play=null;
				this.startPlayLive();
			})
		}
	}
	startPlay(){
		this.player=new Player({
				id:"flv_live",
				url:"http:localhost:8080/live/livestream.flv",
				autoplay: true,
		//		playbackRate: [0.5, 0.75, 1, 1.5, 2], 默认倍速打开
				height: window.innerHeight,
				width: window.innerWidth,
				plugins:["FlvPlayer"],
				cors:true,
				fixVideoSize:"auto",
				volume:1,
			});
	} 
}

测试视频流

FLV：

超清 https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv
高清 https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-480p.flv
标清 https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv