web多媒体(三)| 青训营笔记

198 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第十天

1.MSE是什么?

MSEMedia Source Extensions)提供了将单个媒体文件的 src 值替换成引用 MediaSource 对象(一个包含即将播放的媒体文件的准备状态等信息的容器),以及引用多个 SourceBuffer 对象(代表多个组成整个串流的不同媒体块)的元素。

2.媒体源扩展接口

MediaSource

代表了将由 `HTMLMediaElement` 对象播放的媒体资源。

SourceBuffer

代表了一个经由 `MediaSource` 对象被传入 `HTMLMediaElement`的媒体块。

SourceBufferList

列出多个 `SourceBuffer` 对象的简单的容器列表。

VideoPlaybackQuality

包含了有关正被 `<video>`元素播放的视频的质量信息,例如被丢弃或损坏的帧的数量。由 `HTMLVideoElement.getVideoPlaybackQuality()` (en-US)方法返回。

3.其他接口扩展

URL.createObjectURL()

创建一个指向一个 `MediaSource` 对象的 URL。要求此 URL 可以被指定为一个用来播放媒体流的 HTML 媒体元素的 `src` 的值。

HTMLMediaElement.seekable

当一个 `MediaSource` 对象被 HTML 媒体元素播放时,此属性将返回一个包含用户能够在什么时间范围内进行调整的对象 `TimeRanges`

HTMLVideoElement.getVideoPlaybackQuality()(en-US)

针对正在播放的视频,返回一个 `VideoPlaybackQuality`对象。

AudioTrack.sourceBuffer (en-US),VideoTrack.sourceBuffer (en-US),TextTrack.sourceBuffer

返回创建了相关轨道的 `SourceBuffer`

4.MSE的使用

image.png

5.MSE播放流程

image.png

6.流媒体协议

基于HTTP的自适应码率流媒体传输协议HLS (HTTP Live Streaming)是Apple的动态码率自适应技术。主要用于PC和Apple终端的音视频服务。包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文件。

协议名称传输协议封装格式HTML5
HLSHTTPM2U8/TS支持
HTTP-FLVHTTPFLV支持
DashHTTPFMP4支持
RTMPTCPFLV不支持

image.png

7.应用场景

  • 直播
  • 点播
  • 云游戏
  • 实时通信
  • 图片
  • 视频编辑