Angular中怎么自定义视频播放器

怎么自定义 Video 操作？自定义视频播放器？下面本篇文章给大家介绍一下Angular 中自定义 Video 操作的方法，希望对大家有所帮助！

上一篇文章是 Angular 项目实现权限控制。最近自己在网上看到别人使用 vue 进行自定义 video 的操作。加上不久前实现了 angular 自定义 video 的相关需求， 遂来记录一下，作为交流思考。

实现的功能如下：

播放 / 停止

快退 / 快进 / 倍速

声音开 / 声音关

进入全屏 / 退出全屏

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

经过时长 / 总时长

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

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

如图：

下面我们来一一实现：

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

1. <!-- app.component.html -->
2.  
3. <div class="video-page">
4.   <div class="video-tools">
5.     <button nz-button nzType="primary" (click)="play('btn')" style="margin-right: 12px;">播放 ✅</button>
6.     <button nz-button nzType="primary" (click)="pause('btn')">暂停 ✅</button>
7.     <ng-container>
8.       <button nz-button nz-dropdown [nzDropdownMenu]="menuForward" nzPlacement="bottomCenter" style="margin: 0 12px;">快进 ✅</button>
9.         <nz-dropdown-menu #menuForward="nzDropdownMenu">
10.           <ul nz-menu>
11.             <li nz-menu-item (click)="forwardSecond(10)">快进 10 s</li>
12.             <li nz-menu-item (click)="forwardSecond(20)">快进 20 s</li>
13.           </ul>
14.         </nz-dropdown-menu>
15.     </ng-container>
16.     <ng-container>
17.       <button nz-button nz-dropdown [nzDropdownMenu]="menuBack" nzPlacement="bottomCenter">快退 ✅</button>
18.         <nz-dropdown-menu #menuBack="nzDropdownMenu">
19.           <ul nz-menu>
20.             <li nz-menu-item (click)="retreatSecond(10)">快退 10 s</li>
21.             <li nz-menu-item (click)="retreatSecond(20)">快退 20 s</li>
22.           </ul>
23.         </nz-dropdown-menu>
24.     </ng-container>
25.     <ng-container>
26.       <button nz-button nz-dropdown [nzDropdownMenu]="speedUp" nzPlacement="bottomCenter" style="margin: 0 12px;">倍速 ✅</button>
27.         <nz-dropdown-menu #speedUp="nzDropdownMenu">
28.           <ul nz-menu>
29.             <li nz-menu-item (click)="speedUpVideo(1)">正常</li>
30.             <li nz-menu-item (click)="speedUpVideo(2)">2 倍</li>
31.             <li nz-menu-item (click)="speedUpVideo(4)">4 倍</li>
32.           </ul>
33.         </nz-dropdown-menu>
34.     </ng-container>
35.     <button nz-button nzType="primary" (click)="openOrCloseVoice()">声音开 / 声音关 ✅</button>
36.     <button nz-button nzType="primary" style="margin: 0 12px;" (click)="toFullScreen()">全屏 ✅</button>
37.     <br />
38.     <button nz-button nzType="primary" style="margin-top: 12px;" (click)="entryInPicture()">进入画中画 ⚠️ 安卓平板不支持</button>
39.     <button nz-button nzType="primary" style="margin: 12px 12px 0 12px;" (click)="exitInPicture()">退出画中画 ⚠️ 安卓平板不支持</button>
40.     <br />
41.     <div style="display: flex; justify-content: flex-start; align-items: center; margin: 12px 0;">
42.       经过时长 / 总时长 ： ✅ {{ currentTime }}  / {{ totalTime }}
43.     </div>
44.     <!-- 进度条 -->
45.     <div style="display: flex; justify-content: flex-start; align-items: center; margin: 12px 0;">
46.       进度条：✅
47.       <div
48.         class="custom-video_control-bg"
49.         (mousedown)="handleProgressDown($event)"
50.         (mousemove)="handleProgressMove($event)"
51.         (mouseup)="handleProgressUp($event)"
52.       >
53.         <div
54.           class="custom-video_control-bg-outside"
55.           id="custom-video_control-bg-outside"
56.         >
57.           <span
58.             class="custom-video_control-bg-inside"
59.             id="custom-video_control-bg-inside"
60.           ></span>
61.           <span
62.             class="custom-video_control-bg-inside-point"
63.             id="custom-video_control-bg-inside-point"
64.           ></span>
65.         </div>
66.       </div>
67.     </div>
68.     <div style="display: flex; justify-content: flex-start; align-items: center; margin: 12px 0;">
69.       声音条：✅
70.       <div class="custom-video_control-voice">
71.         <span class="custom-video_control-voice-play">
72.           <i nz-icon nzType="sound" nzTheme="outline"></i>
73.         </span>
74.         <div
75.           class="custom-video_control-voice-bg"
76.           id="custom-video_control-voice-bg"
77.           (mousedown)="handleVolProgressDown($event)"
78.           (mousemove)="handleVolProgressMove($event)"
79.           (mouseup)="handleVolProgressUp($event)"
80.         >
81.           <div
82.             class="custom-video_control-voice-bg-outside"
83.             id="custom-video_control-voice-bg-outside"
84.           >
85.             <span
86.               class="custom-video_control-voice-bg-inside"
87.               id="custom-video_control-voice-bg-inside"
88.             ></span>
89.             <span
90.               class="custom-video_control-voice-bg-point"
91.               id="custom-video_control-voice-bg-point"
92.             ></span>
93.           </div>
94.         </div>
95.       </div>
96.     </div>
97.   </div>
98.   <div class="video-content">
99.     <video id="video" class="video" style="width: 100%" poster="assets/poster.png">
100.       <source type="video/mp4" src="assets/demo.mp4">
101.       Sorry, your browser doesn't support.
102.     </video>
103.   </div>
104. </div>

播放 / 停止

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

1. // app.component.ts
2.  
3. // 播放按钮事件
4. play(flag: string | undefined) {
5.   if(flag) this.videoState.playState = true
6.   this.videoState.play = true
7.   this.video.play()
8. }
9. // 暂停按钮事件
10. pause(flag: string | undefined): void {
11.   if(flag) this.videoState.playState = false
12.   this.video.pause()
13.   this.videoState.play = false
14. }

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

快退 / 快进 / 倍速

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

1. // app.component.ts
2.  
3. // 快进指定的时间
4. forwardSecond(second: number): void {
5.   this.video.currentTime += second; // 定位到当前的播放时间 currentTime
6. }
7.  
8. // 后退指定的时间
9. retreatSecond(second: number): void {
10.   this.video.currentTime -= second
11. }
12.  
13. // 倍速
14. speedUpVideo(multiple: number): void {
15.   this.video.playbackRate = multiple; // 设定当前的倍速 playbackRate
16. }

声音开 / 声音关

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

1. // app.component.ts
2.  
3. // 开或关声音
4. openOrCloseVoice(): void {
5.   this.video.muted = !this.video.muted;
6. }

进入全屏 / 退出全屏

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

1. // app.component.ts
2.  
3. // 全屏操作
4. toFullScreen(): void {
5.   this.video.webkitRequestFullScreen()
6. }

全屏后，按 esc 可退出全屏

进入画中画 / 退出画中画

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

1. // app.component.ts
2.  
3. // 进入画中画
4. entryInPicture(): void {
5.   this.video.requestPictureInPicture()
6.   this.video.style.display = "none"
7. }
8.  
9. // 退出画中画
10. exitInPicture(): void {
11.   if(this.document.pictureInPictureElement) {
12.     this.document.exitPictureInPicture()
13.     this.video.style.display = "block"
14.   }
15. }

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

经过时长 / 总时长

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

1. // app.component.ts
2.  
3. // 初始化 video 的相关的事件
4. initVideoData(): void {
5.   // 获取视频的总时长
6.   this.video.addEventListener('loadedmetadata', () => {
7.     this.totalTime = this.formatTime(this.video.duration)
8.   })
9.   // 监听时间发生更改
10.   this.video.addEventListener('timeupdate', () => {
11.     this.currentTime = this.formatTime(this.video.currentTime) // 当前播放的时间
12.   })
13. }

formatTime 是格式化函数

播放进度条功能

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

1. // app.component.ts
2.  
3. // 进度条鼠标按下
4. handleProgressDown(event: any): void {
5.   this.videoState.downState = true
6.   this.pause(undefined);
7.   this.videoState.distance = event.clientX + document.documentElement.scrollLeft - this.videoState.leftInit;
8. }
9. // 进度条 滚动条移动
10. handleProgressMove(event: any): void {
11.   if(!this.videoState.downState) return
12.   let distanceX = (event.clientX + document.documentElement.scrollLeft) - this.videoState.leftInit
13.   if(distanceX > this.processWidth) { // 容错处理
14.     distanceX = this.processWidth;
15.   }
16.   if(distanceX < 0) { // 容错处理
17.     distanceX = 0
18.   }
19.   this.videoState.distance = distanceX
20.   this.video.currentTime = this.videoState.distance / this.processWidth * this.video.duration
21. }
22. // 进度条 鼠标抬起
23. handleProgressUp(event: any): void {
24.   this.videoState.downState = false
25.   // 视频播放
26.   this.video.currentTime = this.videoState.distance / this.processWidth * this.video.duration
27.   this.currentTime = this.formatTime(this.video.currentTime)
28.   if(this.videoState.playState) {
29.     this.play(undefined)
30.   }
31. }

这里需要计算进度条的位置，来获取点击进度条的百分比，之后更新视频的当前播放时间。当然，我们还得有容错处理，比如进度条为负数时候，当前播放时间为0。

声音进度条

我们实现了播放进度条的操作，对声音进度条的实现就很容易上手了。声音进度条也是监听鼠标的点击，移动，松开。不过，这次我们处理的是已知声音 div 的高度。

1. // app.component.ts
2.  
3. // 声音条 鼠标按下
4. handleVolProgressDown(event: any) {
5.   this.voiceState.topInit = this.getOffset(this.voiceProOut, undefined).top
6.   this.volProcessHeight = this.voiceProOut.clientHeight
7.   this.voiceState.downState = true //按下鼠标标志
8.   this.voiceState.distance = this.volProcessHeight - (event.clientY + document.documentElement.scrollTop - this.voiceState.topInit) 
9. }
10. // 声音 滚动条移动
11. handleVolProgressMove(event: any) {
12.   if(!this.voiceState.downState) return
13.     let disY = this.voiceState.topInit + this.volProcessHeight - (event.clientY + document.documentElement.scrollTop)
14.     if(disY > this.volProcessHeight - 2) { // 容错处理
15.       disY = this.volProcessHeight - 2
16.     }
17.     if(disY < 0) { // 容错处理
18.       disY = 0
19.     }
20.     this.voiceState.distance = disY
21.     this.video.volume = this.voiceState.distance / this.volProcessHeight
22.     this.videoOption.volume = Math.round(this.video.volume * 100)
23. }
24. // 声音 鼠标抬起
25. handleVolProgressUp(event: any) {
26.   this.voiceState.downState = false //按下鼠标标志
27.   let voiceRate =  this.voiceState.distance / this.volProcessHeight
28.   if(voiceRate > 1) {
29.     voiceRate = 1
30.   }
31.   if(voiceRate < 0) {
32.     voiceRate = 0
33.   }
34.   this.video.volume = voiceRate
35.   this.videoOption.volume = Math.round(this.video.volume * 100); // 赋值给视频声音
36. }

如图：

效果演示

完成了上面的内容，我们以一个 gif 图来展示效果：

全屏，声音和画中画比较难截图，Gif 上体现不来

详细的代码，请前往 video-ng 获取。