学习flv.js

news2026/2/13 18:10:09

前言

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配置

字段类型描述
typestring表示媒体类型，'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配置

字段类型描述
durationnumber必填字段，表示片段持续时间（以毫秒为单位）
filesize?number可选字段，表示段文件大小（以字节为单位）
urlstring必填字段，表示段文件URL

Config配置

字段类型默认描述
enableWorker?booleanfalse启用分离线程进行转路（目前不稳定）
enableStashBuffer?booleantrue启用 IO 存储缓冲区。如果您需要实时（最小延迟）直播流播放，请设置为 false，但如果网络抖动，可能会停滞。
stashInitialSize?number384KB指示 IO 存储缓冲区的初始大小。默认值为384KB。指示合适的大小可以改善视频加载/寻道时间。
isLive?booleanfalse与MediaDataSourceisLive中的相同，如果已在 MediaDataSource 结构中设置，则忽略。
lazyLoad?booleantrue如果有足够的数据可供播放，则中止 http 连接。
lazyLoadMaxDuration?number3 * 60指示要保留数据多少秒lazyLoad。
lazyLoadRecoverDuration?number30指示lazyLoad恢复时间边界（以秒为单位）。
deferLoadAfterSourceOpen?booleantrue在 MediaSource 事件触发后进行加载sourceopen。在 Chrome 上，在后台打开的标签页可能不会触发sourceopen事件，直到切换到该标签页。
autoCleanupSourceBufferbooleanfalse自动清理 SourceBuffer
autoCleanupMaxBackwardDurationnumber3 * 60当后向缓冲区持续时间超过此值（以秒为单位）时，自动清理 SourceBuffer
autoCleanupMinBackwardDurationnumber2 * 60指示进行自动清理时为后向缓冲区保留的持续时间（以秒为单位）。
fixAudioTimestampGapbooleantrue当检测到较大的音频时间戳间隙时，填充静音音频帧以避免 a/v 不同步。
accurateSeek?booleanfalse精确搜索任意帧，不限于视频 IDR 帧，但速度可能稍慢。可在Chrome > 50、FireFox和上使用Safari。
seekType?string'range''range'使用范围请求来查找，或者'param'在url中添加params来指明请求范围。
seekParamStart?string'bstart'表示搜索开始参数名称seekType = 'param'
seekParamEnd?string'bend'表示搜索结束参数名称seekType = 'param'
rangeLoadZeroStart?booleanfalse如果使用范围搜索则发送Range: bytes=0-首次加载
customSeekHandler?objectundefined表示自定义搜索处理程序
reuseRedirectedURL?booleanfalse重复使用 301/302 重定向 URL 进行后续请求，如搜索、重新连接等。
referrerPolicy?stringno-referrer-when-downgrade指示使用 FetchStreamLoader 时的Referrer Policy
headers?objectundefined表示将添加到请求中的附加标头
function isSupported(): boolean;
// 如果基本播放可以在浏览器上运行，则返回true。
function getFeatureList(): FeatureList;
// 返回一个FeatureList对象，该对象具有以下详细信息：
字段类型描述
mseFlvPlaybackboolean与 相同flvjs.isSupported()，表示您的浏览器是否支持基本播放。
mseLiveFlvPlaybackboolean指示 HTTP FLV 直播流是否可以在您的浏览器上运行。
networkStreamIOboolean指示网络加载器是否正在流式传输。
networkLoaderNamestring表示网络加载器类型名称。
nativeMP4H264Playbackboolean指示您的浏览器是否原生支持 H.264 MP4 视频文件。
nativeWebmVP8Playbackboolean指示您的浏览器是否原生支持 WebM VP8 视频文件。
nativeWebmVP9Playbackboolean指示您的浏览器是否原生支持 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_UNSUPPORTEDflv.js 不支持输入的 MediaDataSource 格式
MEDIA_CODEC_UNSUPPORTED媒体流包含不受支持的视频/音频编解码器

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2275567.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

高光谱相机的特点

高光谱相机的特点

光谱特性 高光谱分辨率&#xff1a;能将光谱范围分割成极窄的波段&#xff0c;光谱分辨率通常达到纳米级甚至亚纳米级&#xff0c;可精确捕捉到不同物质在细微光谱差异上的特征&#xff0c;比如可以区分不同种类的植被因叶绿素含量等差异而在光谱上的细微变化。 多波段探测&a…
阅读更多...
1.两数之和--力扣

1.两数之和--力扣

给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案&#xff0c;并且你不能使用两次相同的元素。 你可以按任意顺序返回答案。 示例 1…
阅读更多...
yolov5+colab跑起来

yolov5+colab跑起来

教程1.先上传网盘再run 教程2.直接上传解压run 本人过程
阅读更多...
el-tree拖拽光标错位问题

el-tree拖拽光标错位问题

背景&#xff1a;el-tree实现的分类树增加拖拽功能后&#xff0c;当分类树由于数量较多产生滚动条&#xff0c;如果分类树已滚动&#xff0c;进行拖拽时会造成光标错位的问题: 原因&#xff1a;el-tree拖拽光标定位的高度并未加上滚动的高度解决&#xff1a;将滚动的样式属性放…
阅读更多...
Copula算法原理和R语言股市收益率相依性可视化分析

Copula算法原理和R语言股市收益率相依性可视化分析

阅读全文&#xff1a;http://tecdat.cn/?p6193 copula是将多变量分布函数与其边缘分布函数耦合的函数&#xff0c;通常称为边缘。在本视频中&#xff0c;我们通过可视化的方式直观地介绍了Copula函数&#xff0c;并通过R软件应用于金融时间序列数据来理解它&#xff08;点击文…
阅读更多...
OpenCV计算机视觉 07 图像的模块匹配

OpenCV计算机视觉 07 图像的模块匹配

在做目标检测、图像识别时&#xff0c;我们经常用到模板匹配&#xff0c;以确定模板在输入图像中的可能位置 API函数 cv2.matchTemplate(image, templ, method, resultNone, maskNone) 参数含义&#xff1a; image&#xff1a;待搜索图像 templ&#xff1a;模板图像 method&…
阅读更多...
相加交互效应函数发布—适用于逻辑回归、cox回归、glmm模型、gee模型

相加交互效应函数发布—适用于逻辑回归、cox回归、glmm模型、gee模型

在统计分析中交互作用是指某因素的作用随其他因素水平变化而变化&#xff0c;两因素共同作用不等于两因素单独作用之和(相加交互作用)或之积(相乘交互作用)。相互作用的评估是尺度相关的&#xff1a;乘法或加法。乘法尺度上的相互作用意味着两次暴露的综合效应大于&#xff08;…
阅读更多...
深入解析 Flink 与 Spark 的性能差异

深入解析 Flink 与 Spark 的性能差异

&#x1f496; 欢迎来到我的博客&#xff01; 非常高兴能在这里与您相遇。在这里&#xff0c;您不仅能获得有趣的技术分享&#xff0c;还能感受到轻松愉快的氛围。无论您是编程新手&#xff0c;还是资深开发者&#xff0c;都能在这里找到属于您的知识宝藏&#xff0c;学习和成长…
阅读更多...
工厂人员定位管理系统方案（二）人员精确定位系统架构设计，适用于工厂智能管理

工厂人员定位管理系统方案（二）人员精确定位系统架构设计，适用于工厂智能管理

哈喽~这里是维小帮&#xff0c;提供多个场所的定位管理方案&#xff0c;如需获取工厂人员定位管理系统解决方案可前往文章最下方获取&#xff0c;如有项目合作及技术交流欢迎私信我们哦~撒花 在上一篇文章中&#xff0c;我们初步探讨了工厂人员定位管理系统的需求背景以及定位方…
阅读更多...
Wi-Fi Direct （P2P）原理及功能介绍

Wi-Fi Direct （P2P）原理及功能介绍

目录 Wi-Fi Direct &#xff08;P2P&#xff09;介绍Wi-Fi Direct P2P 概述P2P-GO&#xff08;P2P Group Owner&#xff09;工作流程 wifi-Direct使用windows11 wifi-directOpenwrtwifi的concurrent mode Linux环境下的配置工具必联wifi芯片P2P支持REF Wi-Fi Direct &#xff…
阅读更多...
Linux第二课：LinuxC高级 学习记录day01

Linux第二课：LinuxC高级 学习记录day01

0、大纲 0.1、Linux 软件安装&#xff0c;用户管理&#xff0c;进程管理&#xff0c;shell 命令&#xff0c;硬链接和软连接&#xff0c;解压和压缩&#xff0c;功能性语句&#xff0c;结构性语句&#xff0c;分文件&#xff0c;make工具&#xff0c;shell脚本 0.2、C高级 …
阅读更多...
L4-Prompt-Delta

L4-Prompt-Delta

Paper List PromptPapers:https://github.com/thunlp/PromptPapersDeltaPapers: https://github.com/thunlp/DeltaPapers Programming Toolkit OpemPrompt: https://github.com/thunlp/OpenPromptOpenDelta: https://github.com/thunlp/OpenDelta 一、传统微调方法&#xff1…
阅读更多...
关于husky8.0 与 4.0的配置

关于husky8.0 与 4.0的配置

husky的场景使用很多&#xff0c;一般大多场景是在配置git commit 命令拦截hook, 校验 commit-msg 格式规范。以下环境默认&#xff1a;git > 2.27.0, node >14 1、安装huskey8.0.1 npm install --save-dev husky8.0.1 2、初始化配置文件 在package.json scripts 属性…
阅读更多...
ML汇总

ML汇总

Introduction and Overview 机器学习算法模型压缩Feature scaling 特征缩放损失函数正则化优化方式激活函数机器学习算法 逻辑回归: 用于二分类问题。它基于一个或多个预测变量建模二元结果的概率。 线性回归: 用于预测基于一个或多个预测变量的连续结果。它通过拟合线性方程来…
阅读更多...
Day04-后端Web基础(Maven基础)

Day04-后端Web基础(Maven基础)

目录 Maven课程内容1. Maven初识1.1 什么是Maven?1.2 Maven的作用1.2.1 依赖管理1.2.2 项目构建1.2.3 统一项目结构 2. Maven概述2.1 Maven介绍2.2 Maven模型2.3 Maven仓库2.4 Maven安装2.4.1 下载2.4.2 安装步骤 3. IDEA集成Maven3.1 配置Maven环境3.1.2 全局设置 3.2 Maven项…
阅读更多...
spring boot解决swagger中的v2/api-docs泄露漏洞

spring boot解决swagger中的v2/api-docs泄露漏洞

在配置文件中添加以下配置 #解决/v2/api-docs泄露漏洞 springfox:documentation:swagger-ui:enabled: falseauto-startup: false 处理前&#xff1a; 处理后&#xff1a;
阅读更多...
【Linux】深入理解文件系统(超详细)

【Linux】深入理解文件系统(超详细)

目录 一.磁盘 1-1 磁盘、服务器、机柜、机房 &#x1f4cc;补充&#xff1a; &#x1f4cc;通常网络中用高低电平&#xff0c;磁盘中用磁化方向来表示。以下是具体说明&#xff1a; &#x1f4cc;如果有一块磁盘要进行销毁该怎么办&#xff1f; 1-2 磁盘存储结构 ​编辑…
阅读更多...
CSS如何让一个盒子或内容在指定区域中上下左右居中

CSS如何让一个盒子或内容在指定区域中上下左右居中

要使用CSS让盒子或内容在其父元素中上下左右居中&#xff0c;可以使用多种方法。例如&#xff1a;flexbox布局、使用grid布局、box布局、使用position定位和transform结合、以及表格属性等等&#xff0c;相关属性来实现内容的上下左右的居中。 接下来我们使用以上的方法&#x…
阅读更多...
用户注册模块用户校验（头条项目-05）

用户注册模块用户校验（头条项目-05）

1 用户注册后端逻辑 1.1 接收参数 username request.POST.get(username) password request.POST.get(password) phone request.POST.get(phone) 1.2 校验参数 前端校验过的后端也要校验&#xff0c;后端的校验和前端的校验是⼀致的 # 判断参数是否⻬全 # 判断⽤户名是否…
阅读更多...
Qt学习笔记第81到90讲

Qt学习笔记第81到90讲

第81讲 串口调试助手实现自动发送 为这个名叫“定时发送”的QCheckBox编写槽函数。 想要做出定时发送的效果&#xff0c;必须引入QT框架下的毫秒级定时器QTimer&#xff0c;查阅手册了解详情。 在widget.h内添加新的私有成员变量&#xff1a; QTimer *timer; 在widget类的构造…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023