1、下载 larkplayer 插件
npm install larkplayer
2、在html 中写入video标签,根据自己的需求设置属性
<video [id]="'video_1_' + videoList[0].id" src="http://47.111.76.8:10180/gethls1_1_1_0_0.m3u8?uuid=d02cc372" controls>
请升级浏览器以支持 html5 video
</video>
video属性如下:
controls 控制进度条
src=" 视频地址 " 播放的视频地址
autoplay=true 视频自动加载或自动播放
设置播放器的大小需要根据视频的比例来设置
width 一开始可以先设置宽
height 设置好宽后,在浏览器自适应显示高度,在进行设置高度
3、 在js里初始化
2.1 根据自己的功能设置全局变量
currentVideo: any = {
tabIndex: 1,
tabTwoLevelIndex: 0,
operates: {
playMode: 1, // 播放类型: 1、单页面播放,4、四页面播放
definition: 1, // 清晰度:1、流畅,2、清晰
playState: false, // 播放状态:false:暂停,true:播放
muted: false, // 静音状态:false:否,true:是
isFullscreen: false, // 是否全屏:否,true:是
},
};
2.2 js 中初始化事件
ngAfterViewInit(): void { //
// 调用播放器初始化
this.videoPlayerInit(this.videoList[0], 'video_1_');
this.currentVideo = this.videoList[0];
}
ngAfterViewChecked() {
if (this.playMode !== this.afterPlayMode) {
this.afterPlayMode = this.playMode;
if (this.playMode === 1) {
this.videoPlayerInit(this.videoList[0], 'video_1_');
this.currentVideo = this.videoList[0];
} else if (this.playMode === 4) {
for (const item of this.videoList) {
this.videoPlayerInit(item, 'video_');
}
}
}
}
// 视频播放器初始化
videoPlayerInit(item, prefix) {
item.player = larkplayer(prefix + item.id, {
muted: true
}, () => {
item.player.play();
});
}
// 切换 播放类型:1、单页面播放,4、四页面播放
changePlayMode() {
this.playMode = this.playMode === 1 ? 4 : 1;
}
// 打开清晰度菜单
openDefinitionMenu($event) {
$event.stopPropagation();
this.isoPenDefinitionMenu = true;
}
// 设置清晰度
setDefinition($event, d) {
$event.stopPropagation();
this.isoPenDefinitionMenu = false;
this.currentVideo.operates.definition = d;
}
// 播放/停止
setPlayState($event) {
// 控制开关状态的变量
this.currentVideo.operates.playState = !this.currentVideo.operates.playState;
if (this.currentVideo.operates.playState) {
this.currentVideo.player.play(); // 播放
} else {
this.currentVideo.player.pause(); // 停止
}
}
// 静音/ 开启声音
setMutedState($event) {
this.currentVideo.operates.muted = !this.currentVideo.operates.muted;
this.currentVideo.player.muted(this.currentVideo.operates.muted);
}
// 全屏
setFullScreen($event) {
this.currentVideo.player.exitFullscreen();
this.currentVideo.operates.isFullscreen = !this.currentVideo.operates.isFullscreen;
this.currentVideo.player.requestFullscreen();
this.isFull = !this.isFull;
}
player.exitFullscreen() 全屏
player.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式