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

相关推荐
技术钱5 小时前
vue3 封装图片上传预览组件支持docx、excel、pdf、图片、txt格式
vue.js·pdf·excel
kyle~5 小时前
C++--- override 关键字 强制编译器验证当前函数是否重写基类的虚函数
java·前端·c++
Light605 小时前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
爱生活的苏苏6 小时前
elementUI 表单验证-联动型校验
前端·javascript·elementui
一只小风华~7 小时前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
*且听风吟8 小时前
html 实现鼠标滑动点亮横轴
前端·javascript·html
计算机学姐8 小时前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
武昌库里写JAVA9 小时前
C语言 #pragma once - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计
iCoding919 小时前
前端分页 vs 后端分页:技术选型
前端·后端·系统架构
mingtianyihou339 小时前
使用 Service Worker 限制请求并发数
前端