如何快速开发一个自定义的视频播放器(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到相应帧。
  1. 结束,视频播放结束展示control-pannel,且不会隐藏。

总结

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

相关推荐
baiduopenmap10 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish18 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull21 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i30 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_32 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun38 分钟前
空间数据存储格式GeoJSON
前端
GIS瞧葩菜42 分钟前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html