怎么自定义 video 操作？自定义视频播放器？下面本篇文章给大家介绍一下angular 中自定义 video 操作的方法，希望对大家有所帮助！
上一篇文章是 angular 项目实现权限控制。最近自己在网上看到别人使用 vue 进行自定义 video 的操作。加上不久前实现了 angular 自定义 video 的相关需求， 遂来记录一下，作为交流思考。【相关教程推荐：《angular教程》】
实现的功能如下：
播放 / 停止快退 / 快进 / 倍速声音开 / 声音关进入全屏 / 退出全屏进入画中画 / 退出画中画 【安卓平板不支持，不建议使用】经过时长 / 总时长播放进度条功能：支持点击，拖拽进度声音进度条功能：支持点击，拖拽进度如图：
下面我们来一一实现：
这里的重点不在布局，我们简单来定义一下：
<!-- app.component.html --><div class="video-page"> <div class="video-tools"> <button nz-button nztype="primary" (click)="play('btn')" style="margin-right: 12px;">播放 ✅</button> <button nz-button nztype="primary" (click)="pause('btn')">暂停 ✅</button> <ng-container> <button nz-button nz-dropdown [nzdropdownmenu]="menuforward" nzplacement="bottomcenter" style="margin: 0 12px;">快进 ✅</button> <nz-dropdown-menu #menuforward="nzdropdownmenu"> <ul nz-menu> <li nz-menu-item (click)="forwardsecond(10)">快进 10 s</li> <li nz-menu-item (click)="forwardsecond(20)">快进 20 s</li> </ul> </nz-dropdown-menu> </ng-container> <ng-container> <button nz-button nz-dropdown [nzdropdownmenu]="menuback" nzplacement="bottomcenter">快退 ✅</button> <nz-dropdown-menu #menuback="nzdropdownmenu"> <ul nz-menu> <li nz-menu-item (click)="retreatsecond(10)">快退 10 s</li> <li nz-menu-item (click)="retreatsecond(20)">快退 20 s</li> </ul> </nz-dropdown-menu> </ng-container> <ng-container> <button nz-button nz-dropdown [nzdropdownmenu]="speedup" nzplacement="bottomcenter" style="margin: 0 12px;">倍速 ✅</button> <nz-dropdown-menu #speedup="nzdropdownmenu"> <ul nz-menu> <li nz-menu-item (click)="speedupvideo(1)">正常</li> <li nz-menu-item (click)="speedupvideo(2)">2 倍</li> <li nz-menu-item (click)="speedupvideo(4)">4 倍</li> </ul> </nz-dropdown-menu> </ng-container> <button nz-button nztype="primary" (click)="openorclosevoice()">声音开 / 声音关 ✅</button> <button nz-button nztype="primary" style="margin: 0 12px;" (click)="tofullscreen()">全屏 ✅</button> <br /> <button nz-button nztype="primary" style="margin-top: 12px;" (click)="entryinpicture()">进入画中画 ⚠️ 安卓平板不支持</button> <button nz-button nztype="primary" style="margin: 12px 12px 0 12px;" (click)="exitinpicture()">退出画中画 ⚠️ 安卓平板不支持</button> <br /> <div style="display: flex; justify-content: flex-start; align-items: center; margin: 12px 0;"> 经过时长 / 总时长 ： ✅ {{ currenttime }} / {{ totaltime }} </div> <!-- 进度条 --> <div style="display: flex; justify-content: flex-start; align-items: center; margin: 12px 0;"> 进度条：✅ <div class="custom-video_control-bg" (mousedown)="handleprogressdown($event)" (mousemove)="handleprogressmove($event)" (mouseup)="handleprogressup($event)" > <div class="custom-video_control-bg-outside" id="custom-video_control-bg-outside" > <span class="custom-video_control-bg-inside" id="custom-video_control-bg-inside" ></span> <span class="custom-video_control-bg-inside-point" id="custom-video_control-bg-inside-point" ></span> </div> </div> </div> <div style="display: flex; justify-content: flex-start; align-items: center; margin: 12px 0;"> 声音条：✅ <div class="custom-video_control-voice"> <span class="custom-video_control-voice-play"> <i nz-icon nztype="sound" nztheme="outline"></i> </span> <div class="custom-video_control-voice-bg" id="custom-video_control-voice-bg" (mousedown)="handlevolprogressdown($event)" (mousemove)="handlevolprogressmove($event)" (mouseup)="handlevolprogressup($event)" > <div class="custom-video_control-voice-bg-outside" id="custom-video_control-voice-bg-outside" > <span class="custom-video_control-voice-bg-inside" id="custom-video_control-voice-bg-inside" ></span> <span class="custom-video_control-voice-bg-point" id="custom-video_control-voice-bg-point" ></span> </div> </div> </div> </div> </div> <div class="video-content"> <video id="video" class="video" style="width: 100%" poster="assets/poster.png"> <source type="video/mp4" src="assets/demo.mp4"> sorry, your browser doesn't support. </video> </div></div>
这里使用了 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) { // 容错处理 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); // 赋值给视频声音}
如图：
效果演示完成了上面的内容，我们以一个 gif 图来展示效果：
全屏，声音和画中画比较难截图，gif 上体现不来
详细的代码，请前往 video-ng 获取。
【完】
更多编程相关知识，请访问：编程入门！！
以上就是angular中怎么自定义视频播放器的详细内容。