这是我参与「第四届青训营 」笔记创作活动的第十天
1.MSE是什么?
MSE(Media 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的使用
5.MSE播放流程
6.流媒体协议
基于HTTP的自适应码率流媒体传输协议HLS (HTTP Live Streaming)是Apple的动态码率自适应技术。主要用于PC和Apple终端的音视频服务。包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文件。
| 协议名称 | 传输协议 | 封装格式 | HTML5 |
|---|---|---|---|
| HLS | HTTP | M2U8/TS | 支持 |
| HTTP-FLV | HTTP | FLV | 支持 |
| Dash | HTTP | FMP4 | 支持 |
| RTMP | TCP | FLV | 不支持 |
7.应用场景
- 直播
- 点播
- 云游戏
- 实时通信
- 图片
- 视频编辑