如何快速开发一个自定义的视频播放器（1）——需求分析

背景

当APP做内容视频裂变分享的时候，浏览器自带的播放器在不同的端展示的样式和功能差别还是比较大的，比如ios和安卓端，特别是微信端，默认视频播放器体验不是很好，而且不能体验产品的主体风格，因此往往业务方有这样的需求，这个视频播放器能不能按照他们想要的样子展示。当然可以，开干。

业务需求

1. 首先要满足基本的用户需求，视频播放器可以正常播放，可以展示视频的基本信息currentTime和duration，可以暂停和播放，可以全屏播放。

2. controls面板要可以自动隐藏，不影响观感

3. 一套符合app主题的ui

4. 各端展示一致

5. 如何能自动播放就自动播放，不能自动播放时，暂停状态展示明显的播放按钮

需求分析

1. 自定义的controls需要隐藏默认的播放器，然后让用户无法操作原始视频，因此需要一个操作界面的蒙层盖在原视频上，我们通过操作界面上的各个按钮去调用video的api，来操控视频。

2. 根据设计进行ui设计，设计图如下

3.根据设计图我们抽象出要做的模板信息：

1. 可以看到我们需要实现一个control-mask
2. control-mask上有一个start-play-btn用于不能自动播放视频时的播放按钮
3. 实现一个control-pannel,主要提供一个播放暂停按钮，一个全屏播放按钮，视频的播放进度，视频的meta信息，主要是时长duration

逻辑分析

1. 目前各大主流浏览器为了防止广告和其他不安全行为，媒体资源的播放基本都需要手动触发，因此，自动播放视频基本在web端不可实现，因此我们一开始可以不展示control-pannel。视频需要监听meta信息加载，当meta信息加载完成后展示start-play-btn，所以我们需要将视频的preload属性设为auto 或者 metadata，以方便提前获取视频时长以供展示

2. 播放逻辑，点击start-play-btn 和play-btn可以播放视频，点击pause-btn可以暂停视频

3. control-pannel展示逻辑，control-pannel需要在播放开始时展示很短的时间，然后自动隐藏

4. 全屏逻辑，点击fullscreen-btn按钮可以使视频进入全屏播放

5. 播放进度逻辑，播放器的主要难点在这里，需要实现点击seek和拖动seek操作

1. 点击seek:点击progress-bar任意地方都可以使视频seek到相应帧
2. 拖动seek:按下current-indicator，视频暂停。可以将indicator拖动到progress-bar上的任意位置，松开后视频seek到相应帧。

6. 结束，视频播放结束展示control-pannel，且不会隐藏。

总结

实际上，当我们理清楚需要实现的需求与逻辑后，代码编辑非常简单，下一篇即会讲述如何使用vue2实现一个简单的video player demo。