type
status
date
slug
summary
tags
category
icon
password
最近在做周年活动,有一段我司斥巨资拍摄的视频短片,需要在页面中呈现给用户。需求上,不仅要支持视频的常用功能,还要支持一些特殊需求(oh no!)
综合考虑之后,我选择自定义video进度条控件并实现了一系列功能。过程中踩坑很多,在此记录一下!
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fee968665-38dc-4608-9c49-cee2aadd64d9%2Fc4c8bdab-316e-43bc-a931-c18c9154cba9%2FUntitled.png?table=block&id=5258d1ac-a6f4-4e77-a945-d306f5b58190&t=5258d1ac-a6f4-4e77-a945-d306f5b58190&width=648&cache=v2)
首先,我们需要实现上图所示的进度条,先来列举一下功能点:
- 播放暂停按钮
- 当前播放进度/总进度;个性化进度跟随图标
- 当前播放时长/总时长
- 横屏按钮
我们先来创建一下各元素基本结构、事件和状态,如下:
页面元素和事件已经创建好,还需要再定义一些数据状态和监听video事件
地基已经打好!现在,我们来挨个实现上述功能
播放暂停按钮
当前播放进度/总进度;个性化进度跟随图标;当前播放时长/总时长
大致实现思路是:在loadedmetadata中,调用setProgressInterval方法。利用定时器setInterval定时访问当前视频进度并更新当前进度状态
横屏按钮
由于我司客户端暂不支持横竖屏功能,所以该按钮功能是由前端强制将页面旋转90°实现的。这种做法不是很优雅,不适用于日常场景,故不在此赘述。
到此,一个最简单最基本的视频播放器就完成了!接下来,我们为它逐步添加其它功能
- 作者:Leeson
- 链接: /article/video-player
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。