当前位置: 首页 > news >正文

EasyDSS “进度条预览”黑科技,如何重塑视频点播的交互体验?

点播视频预览是怎么做到的?

image

看进度条上的小窗口,你有没有想过,这是如何在进度条上显示视频预览的? 这个功能非常有用,尤其是在播放长视频时。

如何才能实现?

实现这一点有三种方法。

  • 预先为视频生成CSS sprites,并通过API获取;
  • 预先为视频生成WebVTT文件,并通过API获取;
  • 在播放器端实时取快照显示出来,这个过程需要客户端投入大量计算资源,在web浏览器中实时显示效果比前两者差,且略过。

CSS sprites

我们想象一个场景,进度条上每秒对应一个图片,那么就要将上百张甚至上千张图片打包,提供给客户端播放器,那要发出多少请求和消耗多少流量,不如将它们合并成一个文件发送,更节省内存和带宽。使用图片尺寸和位置信息来区分一张图片的各tile。

sprites,精灵图,也称为雪碧图,即一张图片由n个tile组合而成。

如下图所示,是一个88的矩阵,每个tile宽高是常见的16080,可以通过工具生成雪碧

image

然后通过以下css来控制显示哪个,这会将btn1的元素背景图片的起点向左滑160px,将btn2的元素背景图片的起点向左滑动320px,即分别显示第一行第二列(1,2)和第一行第三列(1,3)的图片。

image

WebVTT

Web视频文本轨道(WebVTT)是提供特定文本"提示"的文本轨道。WebVTT API 主要用于显示与视频内容叠加的字幕,但它还有其他用途:提供章节信息以便于导航,以及提供需要与音频或视频内容时间对齐的通用元数据。WebVTT的MIME格式text/vtt。一个WebVTT文件(.vtt)包含一行或者多行的时间提示性内容(cue),如下所示:

image

其组成结构

  • "WEBVTT"固定关键词
  • 空白行,相当于两个连续的换行符
  • 任意数量的cue

每个cue第一行以时间开始,表示字幕/缩略图显示的时间,如00:00:00.000 --> 00:00:02.000表示在视频前2秒都显示指定缩略图。

每个cue的第二行是缩略图的访问地址,
如/voolyab/sprites/sprite_01.webp#xywh=xywh=0,0,160,90 表示/voolyab/sprites/sprite_01.webp图片,xywh=xywh=0,0,160,90 是图片坐标信息

  • x轴偏移0px
  • y轴偏移0px
  • 宽160
  • 高90

即图片中的第一行第一列,在第二个cue中xywh=160,0,160,90,即x轴偏160,偏移量第一个图片的宽度,跳过它即第一行第二列,以此类推。

生成雪碧图时,需要提供行列数和宽高。根据xywh四个参数,即可快速生webvtt。

EasyDSS是怎么实现点播进度条预览的?

EasyDSS采用 WEBVTT 的方案,提供进度条预览图。

image

EasyDSS是一款基于高效流媒体技术构建的一站式视频直播、点播与视频会议融合平台。它采用成熟的跨平台技术框架,提供从视频采集、编码、推流、传输、分发到播放的全链路解决方案。平台旨在帮助企业快速搭建稳定、安全、低延迟的专业视频应用,赋能业务数字化转型。

http://www.hskmm.com/?act=detail&tid=14868

相关文章:

  • 2025 年在线 Excel 协作工具:纯前端架构引领协作范式革新
  • AI重塑招聘:从筛简历到做决策,HR如何借技术提效35%?
  • 大屏适配不同分辨率
  • 直播点播之外,EasyDSS如何开辟“实时协作”第三极?它的会议功能,远比你想象的强大
  • 抖音视频关键词批量下载工具分享|分享痛点|
  • HarmonyOS动态照片,简易环境助力高效开发
  • 二叉树专题
  • IT项目管理主要做什么?-ManageEngine卓豪
  • 9.22学习笔记
  • Django 视图层
  • Kettle: pentaho-server-9.4登录问题
  • Win11/Win10/Office 永久激活
  • 列表
  • springboot~获取原注解的方法findMergedAnnotation使用场景
  • Catalan数(卡特兰数)
  • IvorySQL文档共建计划第一期!提 PR,提 Issue,赢取 Beats 耳机、机械键盘、书籍等多重好礼!
  • ubuntu22.04 安装xrdp
  • 题解:P14058 【MX-X21-T3】[IAMOI R5] 两个人的演唱会
  • 深入解析Wallarm安全边缘:API边缘的即时防护技术
  • 字符串
  • 总线的概念以及分类
  • A Great Beginning
  • 邮件系统的未来趋势:技术革新与智能化的未来
  • docker volume使用
  • 52805 JLINK 端口保护机制硬件保护具体流程分析;
  • 构建你的 MCP 能力层:.NET 9 + SK 的系统方案
  • pl/sql使用
  • PLC中的运动控制 - (二)基本控制指令MC_Power,MC_Stop,MC_Halt
  • FOC之电机模型
  • 使用shell脚本一键部署docker及docker-compose环境