Shulou(Shulou.com)05/31 Report--

本篇内容主要讲解"Angular中如何自定义视频播放器"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"Angular中如何自定义视频播放器"吧!

实现的功能如下：

播放 / 停止

快退 / 快进 / 倍速

声音开 / 声音关

进入全屏 / 退出全屏

进入画中画 / 退出画中画 【安卓平板不支持，不建议使用】

经过时长 / 总时长

播放进度条功能：支持点击，拖拽进度

声音进度条功能：支持点击，拖拽进度

如图：

下面我们来一一实现：

这里的重点不在布局，我们简单来定义一下：

播放 ✅ 暂停 ✅ 快进 ✅ 快进 10 s 快进 20 s 快退 ✅ 快退 10 s 快退 20 s 倍速 ✅ 正常 2 倍 4 倍 声音开 / 声音关 ✅ 全屏 ✅ 进入画中画 ⚠️ 安卓平板不支持 退出画中画 ⚠️ 安卓平板不支持 经过时长 / 总时长 ： ✅ {{ currentTime }} / {{ totalTime }} 进度条：✅ 声音条：✅ Sorry, your browser doesn't support.

这里使用了 angular ant design，之前写了一篇相关文章，还不熟悉的读者可前往 Angular 结合 NG-ZORRO 快速开发

播放 / 停止

这里直接调用 video 对象的方法 play() 和 pause():

// app.component.ts// 播放按钮事件play(flag: string | undefined) { if(flag) this.videoState.playState = true this.videoState.play = true this.video.play()}// 暂停按钮事件pause(flag: string | undefined): void { if(flag) this.videoState.playState = false this.video.pause() this.videoState.play = false}

这里自定义的 play 和 pause 方法加上了一个标志，对下下面要讲的进度条的控制有帮助，上面的代码可以更加简洁，读者可以简写下。

快退 / 快进 / 倍速

这里的快退，快进和倍速设置了不同的选项，通过参数进行传递：

// app.component.ts// 快进指定的时间forwardSecond(second: number): void { this.video.currentTime += second; // 定位到当前的播放时间 currentTime}// 后退指定的时间retreatSecond(second: number): void { this.video.currentTime -= second}// 倍速speedUpVideo(multiple: number): void { this.video.playbackRate = multiple; // 设定当前的倍速 playbackRate}

声音开 / 声音关

声音的开关使用 video 的 muted 属性即可：

// app.component.ts// 开或关声音openOrCloseVoice(): void { this.video.muted = !this.video.muted;}进入全屏 / 退出全屏

全屏的操作也是很简单，使用 webkitRequestFullScreen

// app.component.ts// 全屏操作toFullScreen(): void { this.video.webkitRequestFullScreen()}

全屏后，按 esc 可退出全屏

进入画中画 / 退出画中画

画中画相当于弹窗缩小视频~

// app.component.ts// 进入画中画entryInPicture(): void { this.video.requestPictureInPicture() this.video.style.display = "none"}// 退出画中画exitInPicture(): void { if(this.document.pictureInPictureElement) { this.document.exitPictureInPicture() this.video.style.display = "block" }}

设置 video 的样式，是为了看起来不突兀...

经过时长 / 总时长

记录视频的总时长和视频当前的播放时长。我们已经来组件的时候就获取视频的元信息，得到总时长;在视频播放的过程中，更新当前时长。

// app.component.ts// 初始化 video 的相关的事件initVideoData(): void { // 获取视频的总时长 this.video.addEventListener('loadedmetadata', () => { this.totalTime = this.formatTime(this.video.duration) }) // 监听时间发生更改 this.video.addEventListener('timeupdate', () => { this.currentTime = this.formatTime(this.video.currentTime) // 当前播放的时间 })}

formatTime 是格式化函数

播放进度条功能

监听鼠标的点击，移动，松开的事件，对视频的播放时间和总事件进行相除，计算百分比。

// app.component.ts// 进度条鼠标按下handleProgressDown(event: any): void { this.videoState.downState = true this.pause(undefined); this.videoState.distance = event.clientX + document.documentElement.scrollLeft - this.videoState.leftInit;}// 进度条 滚动条移动handleProgressMove(event: any): void { if(!this.videoState.downState) return let distanceX = (event.clientX + document.documentElement.scrollLeft) - this.videoState.leftInit if(distanceX > this.processWidth) { // 容错处理 distanceX = this.processWidth; } if(distanceX

< 0) { // 容错处理 distanceX = 0 } this.videoState.distance = distanceX this.video.currentTime = this.videoState.distance / this.processWidth * this.video.duration}// 进度条 鼠标抬起handleProgressUp(event: any): void { this.videoState.downState = false // 视频播放 this.video.currentTime = this.videoState.distance / this.processWidth * this.video.duration this.currentTime = this.formatTime(this.video.currentTime) if(this.videoState.playState) { this.play(undefined) }} 这里需要计算进度条的位置，来获取点击进度条的百分比，之后更新视频的当前播放时间。当然，我们还得有容错处理，比如进度条为负数时候，当前播放时间为0。 声音进度条 我们实现了播放进度条的操作，对声音进度条的实现就很容易上手了。声音进度条也是监听鼠标的点击，移动，松开。不过，这次我们处理的是已知声音 div 的高度。 // app.component.ts// 声音条 鼠标按下handleVolProgressDown(event: any) { this.voiceState.topInit = this.getOffset(this.voiceProOut, undefined).top this.volProcessHeight = this.voiceProOut.clientHeight this.voiceState.downState = true //按下鼠标标志 this.voiceState.distance = this.volProcessHeight - (event.clientY + document.documentElement.scrollTop - this.voiceState.topInit) }// 声音 滚动条移动handleVolProgressMove(event: any) { if(!this.voiceState.downState) return let disY = this.voiceState.topInit + this.volProcessHeight - (event.clientY + document.documentElement.scrollTop) if(disY >

this.volProcessHeight - 2) { //fault tolerant processing disY = this.volProcessHeight - 2 } if(disY

< 0) { // 容错处理 disY = 0 } this.voiceState.distance = disY this.video.volume = this.voiceState.distance / this.volProcessHeight this.videoOption.volume = Math.round(this.video.volume * 100)}// 声音 鼠标抬起handleVolProgressUp(event: any) { this.voiceState.downState = false //按下鼠标标志 let voiceRate = this.voiceState.distance / this.volProcessHeight if(voiceRate >

1) { voiceRate = 1 } if(voiceRate < 0) { voiceRate = 0 } this.video.volume = voiceRate this.videoOption.volume = Math.round(this.video.volume * 100); //assign to video sound}

As shown in the figure:

At this point, I believe everyone has a deeper understanding of "how to customize video players in Angular," so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.