播放状态与播放序列的关系(999篇一线博客第107篇)

说到今天这个课题之前,想先同步一个点,就是现在b站上会把一个大视频分为很多段。

这样就导致,

1 学习的获得感很强,能很清楚的确定一个视频的知识点

2 但相对的,也很难快速的整理一个系统性的知识

我今天分享的,和这个不直接相关,而是一个简单视频或者音频里,为了保证连续播放,手动分割的音频段,如何保证播放的序列性以及播放状态的同步。

首先,能确定的事,整体的状态,是基于第一个片段的开始,以及最后最后一个片段的播放结束。

但播放的实际开始,其实取决于audio或者video标签的播放事件,更加准确。

因此,我的设计要点分为两个大的方面。

一 播放状态的整体设计放在播放器。

其 收到第一个音频片段,认为是开始加载 ,状态1;

音频控件收到对应的播放事件,状态2 ;

收到播放序列管理器的调用,执行播放结束,状态3 ;

二 播放序列管理器

其是一个音频分割之后,管理序列的工具。

具体来说,其包括几个生命周期。

2.1 收到一个新的音频,重置,并分割得到新序列,进行初始化(状态1)

2.2 将序列中的第一个放到播放控件中(状态2)

2.3 订阅播放器的播放完成事件,将第二个地址同步给播放控件;直到最后一个;

2.4 当最后一个播放完成,发现没有新的片段需要播放时,调用播放器的状态改变,切换播放器的状态为状态3,自己也进入(状态3)

2.5 任何时候,如果收到新的音频,都将重置,并分割得到新序列(重新进入状态1)

之所以播放器和播放序列分开管理是因为两者对外部的影响不同。

比如对于业务,其只关心整个音频是否加载完。

而对于序列管理器,其只关心自己的序列是否正确,是否将正确的片段传给了播放器,以及是否订阅了节点事件来保证序列顺序和节点的正确性。

拓展:如果哪天,我们需要支持暂停,或者支持指定节点的播放,那么道理也是一样的。需要明确的把播放,和播放列表明确的分开,并通过合适的订阅或者事件机制关联起来。

前端笔记999篇持续更新中,欢迎订阅。 链接

相关推荐
梦曦i1 小时前
@meng-xi/create-uni-app vs unibest:轻量脚手架与重型框架的定位之争
前端·uni-app
平头哥技术团队1 小时前
Day 10 | 工欲善其事:VS Code 配置与项目归档
android·开发语言·前端·javascript·html·交互
乌恩大侠1 小时前
GH200 新增 NVMe SSD 分区、格式化与挂载完整流程
运维·服务器·前端
yume_sibai2 小时前
Element Plus 数据展示组件完全指南(15个核心组件)
前端·javascript·vue.js
qiuhaipeng12 小时前
Claude code 升级后上下文长度变短问题
java·前端·数据库
zzz_23682 小时前
个人 AI 记忆如何跨工具复用:用 Markdown、索引和 Skill 搭一个可治理的记忆库
前端·人工智能·react.js·前端框架·agent·agent测评
剑之所向4 小时前
.NET 官方`System.Threading.Channels`
前端·javascript·数据库
计算机魔术师4 小时前
GPT-6 Astra幻觉砍到2%,却被一种老招数轻松绕过
前端
cjy0001115 小时前
2026AI 产品如何从一次性 Demo 变成可重复使用的业务工具?
前端·人工智能·fde
IT_陈寒5 小时前
React的状态更新坑得我差点加班到天亮
前端·人工智能·后端