前言
flv.js一款使用纯 JavaScript 编写的 HTML5 Flash 视频 (FLV) 播放器，无需 Flash！！！flv.js 的工作原理是将 FLV 文件流转换为 ISO BMFF（碎片 MP4）片段，然后通过Media Source Extensions<video>API 将 mp4 片段输入 HTML5元素。
特点
- 具有 H.264 + AAC / MP3 编解码器播放功能的 FLV 容器
- 多部分分段视频播放
- HTTP FLV低延迟直播流播放
- 通过 WebSocket 播放 FLV 直播流
- 兼容 Chrome、FireFox、Safari 10、IE11 和 Edge
- 极低的开销，并由您的浏览器硬件加速！
安装
npm install --save flv.js
上手
<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>if (flvjs.isSupported()) {var videoElement = document.getElementById('videoElement');var flvPlayer = flvjs.createPlayer({type: 'flv',url: 'http://example.com/flv/video.flv'});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play();}
</script>
创建播放器
function createPlayer(mediaDataSource: MediaDataSource, config?: Config): Player;
根据mediaDataSource中指示的类型字段创建播放器实例，配置可选.
MediaDataSource配置
| 字段 | 类型 | 描述 |
|---|
type | string | 表示媒体类型，'flv'或'mp4' |
isLive? | boolean | 指示数据源是否为直播流 |
cors? | boolean | 指示是否启用 CORS 以进行 http 获取 |
withCredentials? | boolean | 指示是否使用 cookie 进行 http 获取 |
hasAudio? | boolean | 指示该流是否有音轨 |
hasVideo? | boolean | 表示该流是否有视频轨道 |
duration? | number | 表示媒体总时长（以毫秒为单位） |
filesize? | number | 表示媒体文件的总文件大小（以字节为单位） |
url? | string | 表示媒体 URL，可以以'https(s)'或开头'ws(s)'(WebSocket) |
segments? | Array<MediaSegment> | 多部分播放的可选字段，请参阅MediaSegment |
*如果分段字段存在，transmuxer将把此MediaDataSource视为多部分源。
在多部分模式下，MediaDataSource结构中的持续时间文件大小url字段将被忽略。
MediaSegment配置
| 字段 | 类型 | 描述 |
|---|
duration | number | 必填字段，表示片段持续时间（以毫秒为单位） |
filesize? | number | 可选字段，表示段文件大小（以字节为单位） |
url | string | 必填字段，表示段文件URL |
Config配置
| 字段 | 类型 | 默认 | 描述 |
|---|
enableWorker? | boolean | false | 启用分离线程进行转路（目前不稳定） |
enableStashBuffer? | boolean | true | 启用 IO 存储缓冲区。如果您需要实时（最小延迟）直播流播放，请设置为 false，但如果网络抖动，可能会停滞。 |
stashInitialSize? | number | 384KB | 指示 IO 存储缓冲区的初始大小。默认值为384KB。指示合适的大小可以改善视频加载/寻道时间。 |
isLive? | boolean | false | 与MediaDataSourceisLive中的相同，如果已在 MediaDataSource 结构中设置，则忽略。 |
lazyLoad? | boolean | true | 如果有足够的数据可供播放，则中止 http 连接。 |
lazyLoadMaxDuration? | number | 3 * 60 | 指示要保留数据多少秒lazyLoad。 |
lazyLoadRecoverDuration? | number | 30 | 指示lazyLoad恢复时间边界（以秒为单位）。 |
deferLoadAfterSourceOpen? | boolean | true | 在 MediaSource 事件触发后进行加载sourceopen。在 Chrome 上，在后台打开的标签页可能不会触发sourceopen事件，直到切换到该标签页。 |
autoCleanupSourceBuffer | boolean | false | 自动清理 SourceBuffer |
autoCleanupMaxBackwardDuration | number | 3 * 60 | 当后向缓冲区持续时间超过此值（以秒为单位）时，自动清理 SourceBuffer |
autoCleanupMinBackwardDuration | number | 2 * 60 | 指示进行自动清理时为后向缓冲区保留的持续时间（以秒为单位）。 |
fixAudioTimestampGap | boolean | true | 当检测到较大的音频时间戳间隙时，填充静音音频帧以避免 a/v 不同步。 |
accurateSeek? | boolean | false | 精确搜索任意帧，不限于视频 IDR 帧，但速度可能稍慢。可在Chrome > 50、FireFox和上使用Safari。 |
seekType? | string | 'range' | 'range'使用范围请求来查找，或者'param'在url中添加params来指明请求范围。 |
seekParamStart? | string | 'bstart' | 表示搜索开始参数名称seekType = 'param' |
seekParamEnd? | string | 'bend' | 表示搜索结束参数名称seekType = 'param' |
rangeLoadZeroStart? | boolean | false | 如果使用范围搜索则发送Range: bytes=0-首次加载 |
customSeekHandler? | object | undefined | 表示自定义搜索处理程序 |
reuseRedirectedURL? | boolean | false | 重复使用 301/302 重定向 URL 进行后续请求，如搜索、重新连接等。 |
referrerPolicy? | string | no-referrer-when-downgrade | 指示使用 FetchStreamLoader 时的Referrer Policy |
headers? | object | undefined | 表示将添加到请求中的附加标头 |
function isSupported(): boolean;
// 如果基本播放可以在浏览器上运行，则返回true。
function getFeatureList(): FeatureList;
// 返回一个FeatureList对象，该对象具有以下详细信息：
| 字段 | 类型 | 描述 |
|---|
mseFlvPlayback | boolean | 与 相同flvjs.isSupported()，表示您的浏览器是否支持基本播放。 |
mseLiveFlvPlayback | boolean | 指示 HTTP FLV 直播流是否可以在您的浏览器上运行。 |
networkStreamIO | boolean | 指示网络加载器是否正在流式传输。 |
networkLoaderName | string | 表示网络加载器类型名称。 |
nativeMP4H264Playback | boolean | 指示您的浏览器是否原生支持 H.264 MP4 视频文件。 |
nativeWebmVP8Playback | boolean | 指示您的浏览器是否原生支持 WebM VP8 视频文件。 |
nativeWebmVP9Playback | boolean | 指示您的浏览器是否原生支持 WebM VP9 视频文件。 |
interface FlvPlayer extends Player {}
// 实现该Player接口的FLV播放器，可由操作人员直接创建new。
interface NativePlayer extends Player {}
// 不带 MediaSource src 的浏览器原生播放器 (HTMLVideoElement) 的播放器包装器，可实现接口Player。适用于单部分MP4文件播放。
// player
interface Player {constructor(mediaDataSource: MediaDataSource, config?: Config): Player;destroy(): void;on(event: string, listener: Function): void;off(event: string, listener: Function): void;attachMediaElement(mediaElement: HTMLMediaElement): void;detachMediaElement(): void;load(): void;unload(): void;play(): Promise<void>;pause(): void;type: string;buffered: TimeRanges;duration: number;volume: number;muted: boolean;currentTime: number;mediaInfo: Object;statisticsInfo: Object;
}
flv事件
| 事件 | 描述 |
|---|
| ERROR | 播放过程中因任何原因发生错误 |
| LOADING_COMPLETE | 输入的 MediaDataSource 已完全缓冲至结束 |
| RECOVERED_EARLY_EOF | 缓冲期间发生意外的网络 EOF，但已自动恢复 |
| MEDIA_INFO | 提供媒体的技术信息，如视频/音频编解码器、比特率等。 |
| METADATA_ARRIVED | 使用“onMetaData”标记提供 FLV 文件（流）可以包含的元数据。 |
| SCRIPTDATA_ARRIVED | 提供 FLV 文件（流）可包含的脚本数据（OnCuePoint / OnTextData）。 |
| STATISTICS_INFO | 提供播放统计信息，例如丢帧、当前速度等。 |
flvjs.错误类型
播放期间可能出现的错误。它们需要前缀flvjs.ErrorTypes。
| 错误 | 描述 |
|---|
| NETWORK_ERROR | 与网络相关的错误 |
| MEDIA_ERROR | 与媒体相关的错误（格式错误、解码问题等） |
| OTHER_ERROR | 任何其他未指定的错误 |
flvjs.错误详细信息
为网络和媒体错误提供更详细的解释。它们需要前缀flvjs.ErrorDetails。
| 错误 | 描述 |
|---|
| NETWORK_EXCEPTION | 与网络的任何其他问题相关；包含message |
| NETWORK_STATUS_CODE_INVALID | 与无效的 HTTP 状态代码相关，例如 403、404 等。 |
| NETWORK_TIMEOUT | 与超时请求问题相关 |
| NETWORK_UNRECOVERABLE_EARLY_EOF | 与无法恢复的意外网络 EOF 相关 |
| MEDIA_MSE_ERROR | 与 MediaSource 的错误（如解码问题）相关 |
| MEDIA_FORMAT_ERROR | 与媒体流中的任何无效参数相关 |
| MEDIA_FORMAT_UNSUPPORTED | flv.js 不支持输入的 MediaDataSource 格式 |
| MEDIA_CODEC_UNSUPPORTED | 媒体流包含不受支持的视频/音频编解码器 |
