flv.js怎么用？全面解读flv.js代码-木庄网络博客

本文摘自PHP中文网，作者阿神，侵删。

首先声明，我不太懂JavaScript，我只是熟悉音视频处理部分，有错误在所难免，欢迎指正。

flv.js项目的代码有一定规模，如果要研究的话，我建议从demux入手，理解了demux就掌握了媒体数据处理的关键步骤，前面的媒体数据下载和后面的媒体数据播放就变得容易理解了。

先普及点背景知识，为什么HTML5视频播放要用 flv 格式？

因为Flash。我标题图片用的是“flash RIP”，flash快死了，但是它的影响力还在，flash技术是过去10多年的互联网视频基础技术，大量相关基础设施都是围绕Flash构建的，比如 CDN 普遍支持的 RTMP 和 flv over http协议。做互联网直播的公司为了能兼容Web上的Flash播放，不约而同地选择了flv的媒体格式。在从Flash到 HTML5过渡的时期，如果HTML5能支持flash的协议是再好不过了，可以平滑过渡，然而HTML5并不原生支持flash协议。flv.js这个项目解决了HTML5支持flash协议的问题，这就是flv.js应运而生短期爆红的历史背景。

flv.js 中的demux就是一套 FLV 媒体数据格式的解析器，如果要理解FLV格式，下面的文档是必须熟读的。
Adobe官方的flv格式说明
http://www.adobe.com/content/dam/Adobe/en/devnet/flv/pdfs/video_file_format_spec_v10.pdf

flv.js怎么用？ 下面进入正题，flv.js代码解读：demux部分

打开代码 https://github.com/Bilibili/flv.js/blob/master/src/demux/flv-demuxer.js

static probe(buffer) {
       let data = new Uint8Array(buffer);
       let mismatch = {match: false};
 
       if (data[0] !== 0x46 || data[1] !== 0x4C || data[2] !== 0x56 || data[3] !== 0x01) {
           return mismatch;
       }

0x46 0x4c 0x56 这几个数字其实就是 'F' 'L' 'V' 的ascii码，表示flv文件头，后面的0x01是flv格式的版本号，用这来检测数据是不是 flv 格式。

1 2	`let hasAudio = ((data[4] & 4) >>> 2) !== 0;` `let hasVideo = (data[4] & 1) !== 0;`

取出第五个字节，它的第六和第八 bit 分别表示是否存在音频和视频数据，其它位是保留位可以忽略。

这个probe是被 parseChunks 调用的，当读取了至少13个字节后，就判断下是否是一个flv数据，然后再继续后面的分析。为什么是13，因为flv的文件头就是13个字节，参考上面 PDF里的 “The FLV header”，这13个字节包括了后面的一个四字节的size，这个size表示前一个tag的大小，但是由于第一个tag是不存在前一个的，所以第一个size总是 0。

parseChunks 后面的代码就是在不断解析 tag，flv把一段媒体数据称为 TAG，每个tag有不同的type，实际上真正用到的只有三种type，8、9、18 分别对应，音频、视频和Script Data。

if (tagType !== 8 && tagType !== 9 && tagType !== 18) {
               Log.w(this.TAG, `Unsupported tag type ${tagType}, skipped`);
               // consume the whole tag (skip it)
               offset += 11 + dataSize + 4;
               continue;
           }