无 Flash 时代，让直播拥抱 H5

直播是脱离于文字、图片来说，另外一种社交的方式。各大平台也在深耕这一领域，淘宝直播，花椒，映客，Now 直播，企鹅电竞。本人就职于腾讯 Now 直播前端开发，感觉直播能够尝试的领域真的太多太多，但是，Web 在这块一直是一个痛点。由于没有现成操作流的接口，只能简简单单的通过添加 video.src 尴尬的播放几段回放...... 这样造成的后果就是，在 Web 上，我们根本体会不到实时流畅的观看体验。

而且，根据 8 月份腾讯财报内容，直播贡献的收入增长的飞快。现在，我们也想让 Web 体会一把能够实时观看直播的方式，这应该怎么做呢？W3C 提出了 MSE 的标准，表义上来说就是，让前端能够操作视频流。HLS.js，FLV.js 本身也是基于 MSE 开发的。MSE 的出现，不仅能让 Web 接上直播，而且还可以根据协议自己控制相关的延迟率。

那直播，又和我们今天的主题 MSE/video 有啥关系呢？

在没有 MSE 的时候，直播形式要么在 flash 中播放，要么在客户端播放，要么利用 HLS 来手机端播放。不仅 HTML5 原生播放器的场景几乎可以说是没有，而且 H5 播放的延时性还非常高。最多我们也只能控制一下 视频播放 的表层工作，比如，暂停，播放，快进。例如：

<audio id="demo" src="audio.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo').play()">播放声音</button>
  <button onclick="document.getElementById('demo').pause()">暂停声音</button>
  <button onclick="document.getElementById('demo').volume+=0.1">提高音量</button>
  <button onclick="document.getElementById('demo').volume-=0.1">降低音量</button>
</div>

这样，感觉和写 HTML 没啥区别，我们也并不能对流做一下神奇的操作，比如，跳帧，音视频同步，拿到 I/B/P 帧生成视频图像之类的。这其实只是给了我们另外一个界面的 UI API 而已，并不能让 所有能用代码写的程序，都可以用 JavaScript 来写 这一非常宏伟的目标。

后面，各台平台支持了 MSE，前端开发者从此也可以进行音视频的相关开发。因为，MSE 的主要工作是可以创建 media stream，并且喂给 video/audio 进行播放。从此，前端可以和写 C++ Java 的人有了共同的话题--二进制流的操作。 本篇文章的主要目录如下：

• MSE 简介
• MediaSource
  • video 切换
  • audio 切换
  • addSourceBuffer
  • removeSourceBuffer
  • sourceBuffers
  • activeSourceBuffers
  • 基本 API
  • isTypeSupported
  • SourceBuffer 的处理
  • 状态切换
  • track 的切换
  • MS duration 修正机制
• SourceBuffer
  • Initialization segments
  • Media Segment
  • 播放模式
  • 如何界定 track
  • SB buffer 的管理
  • 控制播放片段
  • SB 内存释放
• HTMLMediaElement 播放设定
  • audioTracks/videoTracks
  • video 播放事件的迷
  • video 为啥不能自动播放？
  • 用 JS 来 seek video
  • 试一试控制条
  • media 与 MSE 的联系
• 业务实践
  • MSE 管理环节

如果有兴趣的同学，可以前往 gitchat ，参与我的 chat 分享。