如何深入理解FLV.js源码的工作原理？

Flv.js 源码全面解析

Flv.js 是一个由 bilibili 网站开源的 HTML5 Flash 视频播放器，完全使用纯原生 JavaScript 开发，不依赖 Flash，它通过将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，然后通过 Media Source Extensions API 喂给原生 HTML5 Video 标签来实现播放，以下是对 flv.js 源码的详细解析：

一、Flv.js 概览

Flv.js 是一个实现了在 HTML5 视频中播放 FLV 格式视频的 JavaScript 库，它的工作原理是将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，然后通过 Media Source Extensions API 喂给原生HTML5 Video标签，Flv.js 只做了一件事，在获取到 FLV 格式的音视频数据后通过原生的JS去解码 FLV 数据，再通过 Media Source Extensions API 喂给原生HTML5 Video标签。

二、Flv.js 结构图

Flv.js 的代码结构主要包括以下几个包：

core：主要负责初步处理流数据，并使用 JavaScript API MediaSource 创建缓冲区接纳后续处理得，能够给 video 标签播放得视频数据。

demux：主要是负责解析 FLV 格式视频，解析完后会丢给 core 包。

io：涉及到怎么接收流，里面有 webSocket loader 和普通得 fetch loader，根据 url 分别使用不同得 loader。

player：是整个 flv.js 初始化得起点，也负责事件得分发。

remux：负责将流解析封装成 video 标签可播放得 mp4 buffer 数据。

utils：是工具函数。

整个调用流程作者使用的是 node 的事件监听 Api，通过 EventEmitter 中的 emit 和 on 实现事件得发布和监听。

三、源码分析

1. flv.js-flvjs 对象入口

Flv.js 的入口文件是flv.js，其中定义了flvjs 对象，该对象包含了一些静态方法和属性，用于创建播放器实例、检查浏览器支持情况等。

var flvjs = {
    isSupported: function () {
        return MediaSource.isTypeSupported('video/mp4');
    },
    createPlayer: function (mediaDataSource, config) {
        if (!this.isSupported()) {
            throw new Error('The browser does not support flv.js');
        }
        switch (mediaDataSource.type) {
            case 'flv':
                return new FlvPlayer(mediaDataSource, config);
            default:
                return new NativePlayer(mediaDataSource, config);
        }
    },
    getFeatureList: function () {
        return [
            'H.264',
            'AAC',
            'MP3',
            'FLV',
            'WebSocket',
            'HTTP-FLV',
            'MSE'
        ];
    }
};

#####2. features.js-Features 类-MSE 特征检测

features.js 文件中定义了Features 类，用于检测 MSE（Media Source Extensions）的支持情况。

class Features {
    constructor() {
        this.xhr = new XMLHttpRequest();
    }
    mseSupported() {
        return !!(window.MediaSource && MediaSource.isTypeSupported('video/mp4'));
    }
}

#####3. logging-control.js-LoggingControl 类-调试控制器

logging-control.js 文件中定义了LoggingControl 类，用于控制日志记录。

class LoggingControl {
    constructor() {
        this.logLevel = LoggingControl.LOG_LEVEL.NONE;
    }
    setLogLevel(level) {
        this.logLevel = level;
    }
    log(message) {
        if (this.logLevel >= LoggingControl.LOG_LEVEL.INFO) {
            console.info(message);
        }
    }
    warn(message) {
        if (this.logLevel >= LoggingControl.LOG_LEVEL.WARN) {
            console.warn(message);
        }
    }
    error(message) {
        if (this.logLevel >= LoggingControl.LOG_LEVEL.ERROR) {
            console.error(message);
        }
    }
}

#####4. exception.js

exception.js 文件中定义了一些自定义异常，用于在运行时抛出特定错误。

class FlvJsError extends Error {
    constructor(message) {
        super(message);
        this.name = 'FlvJsError';
    }
}

#####5. flv.js 搭建过程

要使用 flv.js 搭建一个 HTML5 网页直播播放器，需要按照以下步骤进行：

1、获取 video 标签：首先需要在 HTML 页面中添加一个 video 标签，用于播放视频。

2、初始化 flv.js：调用flvjs.createPlayer 方法，传入 mediaDataSource 和 config 参数，创建一个 Player 实例。

3、关联 video 标签：调用flvjs.attachMediaElement 方法，将 flv.js 与 video 标签关联起来。

4、开启加载直播流：调用flvjs.load 方法，开始加载直播流。

5、播放视频：调用flvjs.play 方法，开始播放视频。

#####6. flv.js Demo 演示

Bilibili 提供了一个 flv.js 的 demo，可以在 https://bilibili.github.io/flv.js/demo/ 查看，这个 demo 展示了如何使用 flv.js 播放 FLV 格式的视频。

#####7. 播放器主要参数

在使用 flv.js 时，可以通过配置参数来定制播放器的行为，可以设置视频的 URL、类型、自动播放等，具体的配置参数可以参考 flv.js 的官方文档。

#####8. flv.js B 站 HTML5 播放器内核

Flv.js 是 B 站 HTML5 播放器的内核，B 站使用 flv.js 来实现在 HTML5 视频中播放 FLV 格式的视频。

#####9. FLV 文件格式详解

FLV 是一种流媒体格式，广泛应用于直播和音视频录制领域，FLV 文件格式包括文件头、文件体和文件尾，文件头包含文件类型、版本号等信息；文件体包含音频、视频和脚本数据；文件尾则标记文件结束。

#####10. flv.js 兼容性

理论上只要是支持 Media Source Extensions 和 ECMAScript 5 的浏览器都是兼容 flv.js 的，各个浏览器对 MSE 的兼容情况可以从相关资料中查看，需要注意的是，iPhone 版的 Safari 是不支持 MSE 的，所以在 iPhone 上只有 HLS 是最理想的选择。

相关问题与解答栏目

问题1：如何在 HTML5 中使用 flv.js 播放 FLV 格式的视频？

答：要在 HTML5 中使用 flv.js 播放 FLV 格式的视频，需要按照以下步骤操作：首先在 HTML 页面中添加一个 video 标签；然后引入 flv.js 的脚本文件；接着调用 flvjs.createPlayer 方法创建一个 Player 实例；最后将 Player 实例与 video 标签关联起来，并调用 load 和 play 方法开始加载和播放视频。

问题2：flv.js 是如何实现将 FLV 格式转换为 MP4 格式进行播放的？

答：flv.js 通过解析 FLV 格式的视频数据，将其转换为 ISO BMFF（MP4 碎片）片段，然后通过 Media Source Extensions API 将这些 MP4 片段喂给原生 HTML5 Video 标签进行播放，在这个过程中，flv.js 使用了 demux 包来解析 FLV 格式视频，core 包来处理流数据，并通过 remux 包将流解析封装成 video 标签可播放的 mp4 buffer 数据。

以上内容就是解答有关“flvjs源码”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。