前言毋庸置疑，现在是短视频的时代，也是直播的时代。视频内容逐渐取代图文成为网民获取新鲜事物和表达自我的媒介。随着5G的到来，2020年是直播爆发式增长的一年短视频，电商平台也纷纷涌入直播营销的热点，成为各自平台转化的关键。不管是用户还是开发者，我们都在这个风口。本文将带您探索浏览器视频播放的奥秘。视频的构成一个完整的、可播放的视频文件由视频和音频两部分组成。视频和音频有自己的封装格式（容器）和编码格式。编码格式常见的视频编码格式有：MPEG4、H.264、H.265等常见的音频编码格式有：MP3、AAC、WAV等封装格式常见的视频封装格式有：MP4、FLV、mov、AVI、RMVB等先了解几个名词。帧是图像动画中图像帧的最小单位。帧是静止图像。视频中的动画由多个连续的帧组成。帧率帧率是指以帧为单位的图像出现在显示器上的频率，也叫帧率，单位是赫兹（Hz）。简单理解为每秒播放的图片数量。码率码率是比特率的俗称，指每秒传输的比特数。FFmpegFFmpeg是一组可用于记录和转换数字视频和音频的计算机程序。FFmpeg是在linux下开发的，所以具有天生的跨平台性。支持更全面的音视频编码格式，可以对视频的各个分量进行编码。H264通常称为H.264/AVC；它是国际标准化委员会和国际电信联盟联合提出的继MPEG4之后的新一代数字视频压缩格式。H.264压缩后的数据具有码率低、图像质量高、容错性强、网络适应性强等优点。MP4MP4是一种标准的数字多媒体容器格式；用于音频和视频的压缩编码，也可以存储字幕和静止图像，并可以流的方式在网络上传输。fMP4(FragmentedMP4)fMP4是一种基于MPEG-4Part12的流媒体格式，与MP4非常相似。简单的说，fMP4和MP4的区别就是可以很好的适配流媒体播放。浏览器播放视频video标签在浏览器中播放视频，可以使用HTML5原生video标签。但是，它的播放格式是有限的。目前，视频只支持三种格式：WebM、Ogg和MP4。WebM：WebM文件使用VP8视频编解码器和Vorbis音频编解码器Ogg：Ogg文件使用Theora视频编解码器和Vorbis音频编解码器MP4：MPEG4文件使用H264视频编解码器和AAC音频编解码器以上三种类型可以直接播放视频：页面初始化完成后，video标签会将整个mp4文件下载到浏览器，完成后即可播放。但是当mp4文件较大时，缓存时间比较长，播放体验不好。当然你也可以使用video.js来播放，这里就不赘述了。播放HLS流HLS（HTTPLiveStreaming）是苹果公司提出的一种基于HTTP的流媒体传输协议。视频封装格式为TS，编码格式为H.264/ACC。除了定义TS视频文件本身，还定义了用来控制播放的m3u8文本文件。大部分手机浏览器都支持，也就是说你可以直接在手机浏览器中使用vedio标签直接加载一个m3u8文件来播放视频或者直播。但是PC端只支持苹果的safari浏览器，其他浏览器想要播放需要导入第三方库，如：hls.js:播放HLS流的逻辑非常简单。首先根据提供的m3u8地址源通过HTTP请求获取一级索引文件的内容，如：#EXTM3U#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=64000500kbps.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=7740001000kbps.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=887000500kbps.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=76920001000kbps.m3u8bandwidth指定视频流的码率，每个#EXT-X-STEAM-INF的下一行是二级索引文件的路径，可以是相对路径也可以是一个绝对路径。请求的副文件内容如下：#EXTM3U#EXT-X-PLAYLIST-TYPE:VOD#EXT-X-TARGETDURATION:10#EXTINF:10,1000kbps-00001.ts#EXTINF:10,1000kbps-00002。ts#EXTINF:10,1000kbps-00003.ts#EXTINF:10,1000kbps-00004.ts#EXTINF:10,......#EXTINF-X-ENDLIST可以从二级文件中读取到ts文件的路径,也可以是相对路径或绝对路径。#EXTINF表示每个tsslice的时长。#EXT-X-ENDLIST是视频结束标志，如果有这个标志，也说明该流不是直播流。HLS播放的优点：可以使用HTTP协议请求数据流，可以切换不同码率，实现无缝播放。缺点：延迟高，实时性差。一般延迟在10s以上。不适合直播。ts文件有小而多的切片。对存储和缓存有一定的要求。播放FLV流FLV（FlashVideo）是一种网络视频格式。FLV只能基于flash播放。但是由于flash存在诸多安全问题，已经被很多厂商抛弃。现在如果我们想在H5中使用，可以使用Blibli的开源库来播放flv格式的视频流：Flv.js。flv.js的原理是解析视频flv流并实时转换为fmp4格式，然后通过MediaSourceExtension馈送到浏览器的video标签。基于MediaSourceExtensions播放视频流我们经常在很多直播网站上看视频。你注意到他们使用什么流了吗？我们去B站找个直播或者视频打开控制台查看播放浏览器，你会发现video标签的src其实就是blob开头的一个url。在谈到FLV播放时，我们提到了MediaSourceExtension。本节将介绍这个基于MSE的直播解决方案。什么是媒体源扩展？媒体源扩展（MediaSourceExtensions，缩写为MSE）是W3C的一个规范。MSE允许Javascript为音频标签和视频标签动态构建媒体源。借助MSE的能力，我们可以通过bloburl接收到的实时流，将二进制数据（比如fmp4格式流）注入到video标签中，或者使用canvas实现直播。简单实现首先判断浏览器是否支持MediaSource：constsupportMediaSource=window.MediaSource&&typeofwindow.MediaSource.isTypeSupported==='function'&&window.MediaSource.isTypeSupported('video/mp4;codecs="avc1.42c01f,mp4a.40.2"');MediaSource支持：接下来，创建一个新的MediaSource实例，并使用生成的bloburl将其添加到视频标签中。并监听sourceOpen事件判断初始化完成。constmediaSource=newMediaSource();constvideo=document.querySelector('#video-box');video.src=URL.createObjectURL(mediaSource);mediaSource.addEventListener('sourceopen',function(){//TODO})接下来我们通过websocket获取原始视频流，处理后通过SourceBuffer馈送到mediaSource。constsourceBuffer=mediaSource.addSourceBuffer('video/mp4;codecs="avc1.42E01E,mp4a.40.2"');websocket.com");ws.onopen=function(evt){console.log("Connectionopen...");ws.send("fetchData");};ws.onmessage=function(evt){//是在填充数据前进行转码等操作在最后进行处理，利用WebWorker技术实现快速转码和组播支持，给了我们想象的空间H.265视频播放H.265是ITU-TVCEG继H.264之后制定的新的视频编码标准。H.265标准围绕现有的视频编码标准H.264，保留了一些原有的技术，同时对一些相关技术进行了改进，新技术采用了先进的技术，改善了码流、编码质量、时延和时延之间的关系。实现设置算法复杂，但由于浏览器不支持H265码流，无法直接播放。这时候可以使用MSE在sourceBuffer.appendBuffer(evt.data)之前使用libde265.js等转码库将evt.data转码后发送给sourceBuffer。或者使用业内成熟的播放器来播放，比如道系列的@ali/videox播放器。综上所述，越来越多的厂商更倾向于H.265编码格式，但是我们不得不在浏览器对这种格式的支持不友好的前提下进行转码。在浏览器端使用MSE方式进行转码，可以利用GPU提高效率，减少延迟。但它仍然不能兼容所有的PC或手机浏览器，这条路还需要我们继续探索。5G给互联网带来的好处不仅仅是视频和直播的爆发，相信web端图像和视频技术也会突破现有的技术瓶颈，WebAssembly和硬件编码等图像渲染技术将会变得越来越丰富。参考https://baike.baidu.com/item/ffmpeghttps://github.com/Bilibili/flv.js/https://developer.mozilla.org/zh-CN/docs/Web/API/MediaSource原文链接:https://segmentfault.com/a/1190000038766516
