如何快速开发一个自定义的视频播放器(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。

相关推荐
@大迁世界1 分钟前
Promise.all 与 Promise.allSettled:一次取数的小差别,救了我的接口
开发语言·前端·javascript·ecmascript
知识分享小能手3 分钟前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
DoraBigHead16 分钟前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js
LuckySusu16 分钟前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
卓伊凡21 分钟前
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓
前端
笨笨鸟慢慢飞23 分钟前
Vue3后退不刷新,前进刷新
前端
LuckySusu26 分钟前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu26 分钟前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu27 分钟前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js
fruge29 分钟前
从 0 到 1 理解前端工程化:图表化解析核心逻辑
前端