首页- 站长资讯 技术文章  Angular中怎么自定义视频播放器

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

 0  2022-05-01 00:21:32

怎么自定义 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 获取。

相关说明:

1、VIP会员无限制任意下载,免积分。 立即前往开通>>

2、本站资源大多存储在云盘,如出现链接失效请评论反馈。

3、本站提供的源码、模板、软件工具等其他资源,均不包含技术服务,请大家谅解!资源仅供参考学习只用,请勿用于任何商业用途,请支持正版。

4、源码、模板等资源会随着技术、坏境的升级而存在部分问题,还请慎重选择。


本文网址:http://www.zzdaima.com/art/36.html
转载请声明来自: 站长代码- Angular中怎么自定义视频播放器

教程搜索
热门技术文章
  • pbootcms伪静态教程

    pbootcms伪静态教程

    Apache环境和IIS环境默认在根目录加了伪静态规则了,不需要操作,只要主机支持伪静态即可。 Nginx环境,请打开nginx.txt文件,把里面的代码复制到配置中,下面我们以宝塔为例, 伪静态规则的文件在 这样就完成了

  • 关于域名历史的查询和处理

    关于域名历史的查询和处理

    一、域名历史是什么意思?域名历史,是指域名首次注册的时间、域名持有者更新、域名网站所属行业变更、域名是否被降权或K站、域名历史PR值、域名历史的外链建设情况、域名年龄等等。二、域名历史对SEO有影响因素马慧SEO简单列出几点域名历史对网站优化的影响:①域名历史是否

  • 网站建设这些东西我们需要设置好

    网站建设这些东西我们需要设置好

    一、建站的需求及目的建站的目的时什么,需求又是什么,依据自己的需求及行业的对比,大概做出一个小的预算。通常情况下,若作为单一的企业网站,建站费用不高,若需要定制开发的话,定制开发所需要的费用肯定比一般的企业网站要高,网站定制开发流程:沟通确定需求-出设计效

  • 怎么样才能写出打动读者的文案

    怎么样才能写出打动读者的文案

    第一,标题要准确简洁一篇高质量的文章内容,首先必须要有一个简洁明确的题目标题,能够让读者一下就可以抓住你要表达的文章意思。而有些SEO优化人员,为了图省事,往往采用采集文章的方式更新内容,但又考虑到雷同性太高,于是就随便更换一个文章标题了事。这样做的后果就是

  • 寻找合适的关键词给网站创收

    寻找合适的关键词给网站创收

    选择垂直行业领域关键词大家在选择关键词的时候,记住一定不能太宽泛,因为我们是个人站长,不可能投入那么多的人力物力去经营一个有大量内容的网站,如果网站主体太广,我们是根本没有精力去管理的,那么排名自然也是无法上来的,这里如风SEO强烈建议大家一定要找准一个垂直

  • 可能被我们忽视的影响排名因素

    可能被我们忽视的影响排名因素

    一、质量高的原创内容在这个越来越注重内容的时代,各位站长要想在百度、360等搜索引擎获得不菲的流量,那必须注重网站内容的原创性。独特的实质性的并且是高质量的原创内容,极大的影响着网站的收录和排名。现下正火热的熊掌号就是百度针对原创内容的一次尝试,高质量的原创

热门推荐

SEO按天关键词计费排名查询系统...

热门推荐  80    2022-05-01 08:02:08

软件功能:1.会员管理:系统共分三级会员流程。总站管理员,代理,...

仿清风DJ舞曲网V4.1+CSCMS音乐...

热门推荐  70    2022-05-01 07:54:10

CSCMSV4.1仿清风dj舞曲网音乐网站源码,程序是CSCMSV4.1UTF8编码...

爱看小说网2W本源码全站打包源...

热门推荐  81    2022-05-01 07:50:03

本次给大家带来的是价值500元的狂雨小说二开版上传源码解压后/co...

APP软件应用下载导航网站源码/...

热门推荐  85    2022-05-01 07:38:50

APP软件应用下载导航网站源码/APP分享下载页引流导航网站源码带后...

健身类小程序前后端源码

热门推荐  134    2022-04-24 15:40:08

健身类小程序前后端源码环境要求:PHP>=7.0(推荐7.2+)Laravel5...

抖音云蹦迪源码 2022年很火的直...

热门推荐  265    2022-04-18 21:17:36

外面卖600的抖音云蹦迪直播间项目,靠直播打赏收益的风口项目分享...


关于我们 联系我们 免责声明 共享规则 SiteMap 站长代码所有作品均为会员提供或网上搜集,版权归原作者所有,如需商业用途或转载请与原作者联系

Copyright © 2022  站长代码版权所有 辽ICP备2021012267号-1 辽公网安备 21012202000096号 所提供的内容仅供观摩学习交流之用,请勿用作商业用途!如有侵权,请及时 联系我们删除

第三方账号一键登录