Media Source Extension官方文档(第一部分)

摘要

本说明通过允许javascript来生成看到播放的流媒体扩展了HTMLMediaElement[HTML51]对象。允许javascript来生成流促进了很多用途,如可自适应的流和可进行时间变换的直播流。

1. 介绍

这一节是非规范性的(non-normative)。
这个特性允许JavaScript去动态地为<audio>和<video>创建媒体流。它定义了一个MediaSource对象来给HTMLMediaElement提供媒体数据的源。MediaSource对象拥有一个或多个SourceBuffer对象。浏览器应用通过添加数据片段(data segments)给SourceBuffer对象,然后根据系统性能和其他因素来适应不同质量的后续data。SourceBuffer对象里的数据是被组建成需要被编码和播放的音频、视频和文字信息的轨道缓冲(track buffer)格式的。被用于扩展的二进制流格式结构如下图所示:
clipboard.png

1.1 目标

  • 允许js去创建media stream,独立于普通的拉流播放的方式。
  • 定义了一种加快自适应流,广告插入,时戳转换,视频编辑的分割和缓存模式。
  • 最小化js中的媒体解析需要
  • 尽可能的呃管理浏览器的播放缓存
  • 提供二进制流格式操作需要
  • 不需要支持特定的媒体格式和编解码器(codec)

这个说明定义了

  • 浏览器和web app处理媒体数据的规范行为
  • 其他定义媒体格式的

1.2 一些名词定义

Active Track Buffers
一个提供开启中的音频track,选中的视频track,和正在显示或隐藏的字幕track的编码过的帧集合的track buffer。这些tracks都和activeSourceBuffers列表中的SourceBuffer对象有关。

Append Window
添加buffer时用于筛选coded frames的一个pts的range。append window表示一个连续的有单一开始和结束时间的时间区间。只有pts在这个时间区间内的编码帧才允许被添加到SourceBuffer中,其余的都会被筛选出去。append window的开始和结束时间是受appendWindowStart和appendWindowEnd两个属性分别控制。

Coded Frame
一个有presentation timestamp(pts), decode timestamp(dts)和coded frame duration的媒体数据单元。

Coded Frame Duration
一个coded frame的时长,对视频和文字而言,duration就是指一个视频帧或者文字需要被展示的时间长度,对于音频而言,duration就是指这一帧中包括的采样的和。比如:一个包含441个采样样本的采样率是@44100Hz的音频帧的时长就是10ms。

Coded Frame Group
一组响铃的,dts单调递增没有gap的coded frames集合。如果被coded frame processing algorithm算法检测到的不连续片段就会触发abort方法从一个新的coded frame group开始重新播放。

Decode Timestamp
The decode timestamp(就是通常说的dts)表示最晚的这一帧和任何独立帧需要被解码的时间(假设可以被立刻解码和渲染,应该等于这个presentation order里最先被渲染的帧的pts)。如果这一帧不能在渲染顺序中被解码出来或者没有dts,那么dts就等于pts。

Initialization Segment
一系列的包括了需要解码media segment序列的初始化信息的二进制数据。包括了codec初始化信息,多路segment的Track ID的映射和时间戳偏移等。

Media Segment
一序列的包括了封装信息和时间戳信息的媒体数据二进制数据。Media Segment总是和最新添加的initialization segment相关。

MediaSource object URL
MediaSource object URL是一个唯一的通过createObjectURL()方法生成的Blob URI。用于绑定一个MediaSource对西那个到一个HTMLMediaElement元素上。

Parent Media Source
一个SourceBuffer对象的Parent Media Source是创建它的MediaSource对象。

Presentation Start Time
Presentation Start Time

Presentation Interval
一个coded frame的Presentation Interval是一个从pts到pts+coded frame's duration时间间隔。比如有一帧的pts是10s,coded frame duration是100ms,那么the presentation interval就是[10-10.1)。注意:起始时间是闭区间,结束时间是开区间。

Presentation Order
coded frames 渲染的顺序。The presentation order通过把coded frames 根据pts单调递增的排列起来获得。

Presentation Timestamp
视频帧显示的具体时间,表示了这一帧应该什么时候被播放器渲染。

Random Access Point
一个media segment可以不依赖之前数据解码和连续播放的位置。对于视频来说就是I-frames的位置,对音频来说大多数帧都可以作为random access point。因为视频轨道的random access point分布更稀疏,所以这些位置通常被当作复路流(multiplexed stream,我理解就是音视频等混合起来的流)的random access point。

SourceBuffer byte stream format specification
byte stream format specification特性描述了SourceBuffer实例允许的二进制流格式。是根据传入addSourceBuffer()方法的type。

SourceBuffer configuration
一个MediaSource实例下面的一个或多个SourceBuffer对象里的tracks集合。一个MediaSource对象必须支持以下至少一个设置:

  • 一个拥有音频和/或视频的SourceBuffer
  • 两个SourceBuffer,其中一个单独处理音频轨道,一个单独处理视频轨道

Track Description
一个二进制流数据结构,提供了单个track需要的TrackID,codec设置和其他metadata。一个initialization segment的每个track description都需要一个唯一的Track ID,如果不唯一的话,浏览器必须执行一个append error algorithm算法。

Track ID
用于识别二进制流数据属于那个track的标识。每个track description中的Track ID标识了一个 media segment属于的track。

专注前端、专注WebAssembly在图形、视频领域的应用。

134 声望
25 粉丝
0 条评论
推荐阅读
2019年终小结-作为前端程序媛的第一个5年
这一年算是真正完成了一次自我的成长,阶段性地完成了3年前给自己定下的一个小目标:在stackoverflow上能回答别人回答不上来的问题。虽然现在已经很久没有去爆栈网上回答问题了,但是经过了,在WebAssembly和前端...

九瑶2阅读 2.5k

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.4k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 7k评论 12

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.6k评论 5

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan30阅读 4k评论 2

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城29阅读 6.4k评论 5

封面图
2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...

i5ting27阅读 2.4k评论 4

封面图

专注前端、专注WebAssembly在图形、视频领域的应用。

134 声望
25 粉丝
宣传栏