学习flv.js

前言

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	媒体流包含不受支持的视频/音频编解码器