type
status
date
slug
summary
tags
category
icon
password
最近在做周年活动，有一段我司斥巨资拍摄的视频短片，需要在页面中呈现给用户。需求上，不仅要支持视频的常用功能，还要支持一些特殊需求(oh no！)
综合考虑之后，我选择自定义video进度条控件并实现了一系列功能。过程中踩坑很多，在此记录一下！
首先，我们需要实现上图所示的进度条，先来列举一下功能点：
- 播放暂停按钮
- 当前播放进度/总进度；个性化进度跟随图标
- 当前播放时长/总时长
- 横屏按钮
我们先来创建一下各元素基本结构、事件和状态，如下：
页面元素和事件已经创建好，还需要再定义一些数据状态和监听video事件
地基已经打好！现在，我们来挨个实现上述功能
播放暂停按钮
当前播放进度/总进度；个性化进度跟随图标；当前播放时长/总时长
大致实现思路是：在loadedmetadata中，调用setProgressInterval方法。利用定时器setInterval定时访问当前视频进度并更新当前进度状态
横屏按钮
由于我司客户端暂不支持横竖屏功能，所以该按钮功能是由前端强制将页面旋转90°实现的。这种做法不是很优雅，不适用于日常场景，故不在此赘述。
- 作者:Leeson
- 链接: /article/video-player
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。