Angular中如何自定义视频播放器

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

创新互联专注于企业网络营销推广、网站重做改版、文水网站定制设计、自适应品牌网站建设、H5高端网站建设、商城网站定制开发、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为文水等各大城市提供网站开发制作服务。

Angular中如何自定义视频播放器

实现的功能如下：

播放 / 停止
快退 / 快进 / 倍速
声音开 / 声音关
进入全屏 / 退出全屏
进入画中画 / 退出画中画【安卓平板不支持，不建议使用】
经过时长 / 总时长
播放进度条功能：支持点击，拖拽进度
声音进度条功能：支持点击，拖拽进度

如图：

Angular中如何自定义视频播放器

下面我们来一一实现：

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




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

进度条：✅

声音条：✅

// 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 }

// 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 }

// 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" } }

// 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) // 当前播放的时间 }) }

// 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) } }

// 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中如何自定义视频播放器

播放 / 停止

快退 / 快进 / 倍速

声音开 / 声音关

进入全屏 / 退出全屏

进入画中画 / 退出画中画

经过时长 / 总时长

播放进度条功能

声音进度条

其他资讯