溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“Angular中如何自定義視頻播放器”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“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); // 賦值給視頻聲音
}如圖：
到此，相信大家對“Angular中如何自定義視頻播放器”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
