「直播」是脱离于文字、图片的另外一种社交的方式。各大平台都在深耕这一领域。
之前的直播形式,
要么在 flash 中播放,要么在APP、应用软件中播放,要么就是利用 HLS 在手机端播放
而 Web 在这块一直有痛点。
虽然浏览器自带的播放器标签 Video/Audio 已经拥有【解封装】和【解码】的功能,
我们只需提供一个 MP4 或 WEBM 格式的视频地址给标签,就能播放。
但是,标签支持的媒体封装格式十分有限(W3C标准中只支持MP4)。
由于没有「操作数据流」的接口,只能简单的设置 video.src = xxx 去播放一段录像。
所以,在 Web 上,「音视频」是要加载完毕后才能播放出来的。只能满足一次播放整个曲目的需要,无法实现拆分/合并数个缓冲文件。
用户根本无法拥有流畅的实时观看体验。
整个媒体播放功能(音频、视频)都是相当简陋的。
缺少了诸如「分段加载」、「视频码率切换」、「更换音频语言」、「更换字幕语言」等现代播放器应该有的功能。
以前的前端,只能控制一下音视频播放的表层工作,比如,播放、暂停、快进、音量。
<audio id="audio" src="audio.mp3"></audio>
<button id='play-audio' >播放</button>
<button>暂停</button>
<button>提高音量</button>
<button>降低音量</button>
const audioElement = document.getElementById('audio');
const playBtnElement = document.getElementById('audio');
// 播放
playBtnElement.onclick = function(){
audioElement.play()
}
// 暂停
audioElement.pause()
// 提高、降低音量
audioElement.volume+=0.1
audioElement.volume-=0.1
感觉和写 HTML 没区别,并不能对「数据流」做一些操作。
比如,跳帧,音视频同步,拿到 I/B/P 帧生成视频图像之类的。
所以,过去的绝大部分的web视频播放器都是基于 Flash 开发的。 这也是为什么 Flash 这个老古董在各大视频网站上能活到2018年左右的原因。
如果你经常 在线看剧、看电影,特别是用 mac 的,应该发现如今看视频 mac 发热不那么严重了,
那是因为现在视频网站都放弃 Flash,开始使用 HTML5 的播放器。
MSE简介
现在,W3C 提出了 MSE 的标准。
极大的扩展了前端的媒体播放功能
MSE 全称为 MediaSourceExtensions
看名字就能知道,MSE 就是一系列API接口的拓展集合。
核心内容就是 MdiaSource 和 SourceBuffer
HLS.js,FLV.js 本身也是基于 MSE 开发的。
MSE 的出现,不仅能让 Web 上能够直播,能够「边看边加载」大视频
而且还可以根据协议自己控制相关的延迟率。
前端开发者从此也可以进行音视频的相关开发了。
因为,MSE 的主要工作就是创建 media stream,并且喂给 video/audio 进行播放。
从此,前端可以和 C++/JAVA 的人有共同的话题: