Flv.js文档使用随记

关键字：Flv.js | Flv js | Flv-js | HTML5 FLV Player |

0x001: 前言
如下涉及到 flv.js 全部内容均是V1.5.0版本内的，如方法、属性、常量、监听等等，不讨论视频编解码，只陈述官方文档内容。采用文字+图片形式，单文字描述怕很差理解，单图片模式又怕未来哪天会挂掉，如今不少年份久的博文就有这状况，也不是没遇到过。非前端工做者，部分术语可能描述不得当，望理解。纯手码字一下午，只是为了时间久后遗忘再回来看一下。

0x002: 架构图

 

0x003: API文档相关内容

flvjs.isSupported()

// 查看当前浏览器是否支持flv.js，返回类型为布尔值

flvjs.createPlayer(mediaDataSource: MediaDataSource, config?: Config)

/* 建立一个Player实例，它接收一个MediaDataSource(必选), 一个Config(可选)，如：
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://example.com/flv/video.flv'
        }); */

MediaDataSource的字段列表以下，

这里说下最后一个segments字段（其他字段都很简单），它接收一个数组，类型为MediaSegment，MediaSegment的字段列表以下，

若是segments字段存在，transmuxer将把此MediaDataSource视为多片断源。在多片断模式下，将忽略MediaDataSource结构中的duration filesize url字段。
什么个意思呢，用白话说就是若是指定了segments字段那么以前指定的duration filesize url字段就再也不生效了，将标志这是一个多片断合成一个的视频，进度条的总时长就等于各片断相加的和，因此每一个片断的duration filesize必定要指定准确。

Config字段不少，就不一一介绍了，以下

 

flvjs.getFeatureList()

 

// 返回一些功能特性列表，好比是否支持FLV直播流、H264 MP4 视频文件等等，以下

 

flvjs.FlvPlayer(mediaDataSource, optionalConfig)
flvjs.NativePlayer(mediaDataSource, optionalConfig)

 

// 这两个方法都继承自 Player抽象接口，一个是建立适用于FLV的Player实例，一个是适用于MP4的Player实例，以下

　

其实 flvjs.createPlayer(略) 内部就是根据 type 分别建立不一样的Player实例，本身去看看源码就知道了。以下

interface Player (abstract)

 

// 它里面的每一个方法或属性其实就是你本身建立出来Player实例的部分方法或属性，可直接调用。以下

flvjs.LoggingControl

// 一个全局接口，用于设置 flv.js 的日志级别。以下

举几个简单的例子：

flvjs.LoggingControl.getConfig()　　 // 获取当前日志项的配置状况，如

 

enableCallback: true
enableDebug: true
enableError: true
enableInfo: true
enableVerbose: true
enableWarn: true
forceGlobalTag: true
globalTag: "flv.js"

flvjs.LoggingControl.enableVerbose

/* 输出详细调试信息，默认为true，页面加载后会在控制台打印一些解码日志信息，如forceGlobalTag例子中的日志那样。
设置 false; 控制台再也不打印。*/

flvjs.LoggingControl.forceGlobalTag

// 默认false；

未设置以前的log打印是这样

[MSEController] > MediaSource onSourceOpen
[FLVDemuxer] > Parsed onMetaData
[FLVDemuxer] > Parsed AVCDecoderConfigurationRecord
[FLVDemuxer] > Parsed AudioSpecificConfig
[MSEController] > Received Initialization Segment, mimeType: video/mp4;codecs=avc1.640028
[MSEController] > Received Initialization Segment, mimeType: audio/mp4;codecs=mp4a.40.5
[FlvPlayer] > Maximum buffering duration exceeded, suspend transmuxing task

设置 true; 后是这样

[flv.js] > MediaSource onSourceOpen
[flv.js] > Parsed onMetaData
[flv.js] > Parsed AVCDecoderConfigurationRecord
[flv.js] > Parsed AudioSpecificConfig
[flv.js] > Received Initialization Segment, mimeType: video/mp4;codecs=avc1.640028
[flv.js] > Received Initialization Segment, mimeType: audio/mp4;codecs=mp4a.40.5
[flv.js] > Maximum buffering duration exceeded, suspend transmuxing task
[flv.js] > MediaSource onSourceEnded

 

flvjs.Events

// 能够与Player.on（）/ Player.off（）一块儿使用的一系列常量。须要使用前缀flvjs.Events。以下

flvjs.ErrorTypes
flvjs.ErrorDetails

// 是几个错误类型以及相应类型对应的错误详情，能够用来作些判断。也须要使用前缀flvjs.Events。以下

0x004: 直播播放 文档相关内容
　　
您须要在MediaDataSource中提供一个实时流URL（能够是HTTP 或 WebSocket），并指示isLive：true。以下

        var flvPlayer = flvjs.createPlayer({
            type: "flv",
            isLive: true,
            url: "http://127.0.0.1:8080/live/livestream.flv"
        });

0x005: 多段播放 文档相关内容

　　
多片断配置示例，需注意的是文档强调：您必须为每一个细分提供准确的持续时间。

0x006: 使用记录

• 能够在播放前指定MediaDataSource参数，hasAudio（是否有音频）及hasVideo（是否有视频），单独指定单独有，都指定则都有。
• SeekTo功能 或 player.currentTime属性 接收的值类型是Number，如78或108.999，单位秒

 

0x007: 问题记录
　　Q1：点击进度条的未缓冲区域时，不会跳转到对应时间处继续播放，而是无响应。好比6分钟MV，当前播放到3分0秒，当前缓冲到5分0秒，若是点击进度条到5分01秒或以后播放器就无响应了。
　　A1：目前用户层的解决办法只能先点击到离缓冲区最近的时长，如4分59秒，播放器才会自动缓冲接下来未缓冲的片断。小文件基本无感，大文件才会有体现。（点播，视频源类型flv，H264+AAC，大小111 MB ）

　　QN：...........

 

0x008: 完结