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

字段类型描述
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.mzph.cn/news/892455.shtml

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

相关文章

Gitlab-Runner配置

Gitlab-Runner配置

原理 Gitlab-Runner是一个非常强大的CI/CD工具。它可以帮助我们自动化执行各种任务&#xff0c;如构建、测试和部署等。Gitlab-Runner和Gitlab通过API通信&#xff0c;接收作业并提交到执行队列&#xff0c;Gitlab-Runner从队列中获取作业&#xff0c;并允许在不同环境下进行作…
阅读更多...
LLM 智能视频字幕助手，支持生成、断句、优化、翻译、视频合成全流程

LLM 智能视频字幕助手，支持生成、断句、优化、翻译、视频合成全流程

卡卡字幕助手&#xff08;VideoCaptioner&#xff09;是一款功能强大的视频字幕配制软件。操作简单且无需高配置&#xff0c;利用大语言模型进行字幕智能断句、校正、优化、翻译&#xff0c;一键为视频配上效果惊艳的字幕。 &#x1f3af; 可使用强大的语音识别引擎&#xff0c…
阅读更多...
GitLab本地服务器配置ssh和克隆项目

GitLab本地服务器配置ssh和克隆项目

1. 本地安装好git git链接&#xff1a;https://git-scm.com/downloads/win 无脑点击下一步安装即可,打开Git Bash命令终端如下&#xff1a; 2. 配置本地用户名和邮箱 git config --global user.name "你的名字" git config --global user.email "你的邮箱&quo…
阅读更多...
Unity热更新 之 Addressables(2) 本地/远端打包 流程测试

Unity热更新 之 Addressables(2) 本地/远端打包 流程测试

基础篇&#xff1a;Unity热更新 之 Addressables(1) 资源基础加载-CSDN博客 基础方法来源于唐老狮,我也是初学热更这一块&#xff0c;所有不保证步骤完全正确&#xff0c;如有不足还请斧正 目录 0.前提 1.本地打包 1.1.资源放入包 1.2.简化路径名称给出标签(如有需要的话) …
阅读更多...
HDFS架构原理

HDFS架构原理

一、HDFS架构整体概述 HDFS是Hadoop Distribute File System 的简称&#xff0c;意为&#xff1a;Hadoop分布式文件系统。HDFS是Hadoop核心组件之一&#xff0c;作为大数据生态圈最底层的分布式存储服务而存在。HDFS解决的问题就是大数据如何存储,它是横跨在多台计算机上的文件…
阅读更多...
Qiskit快速编程探索（进阶篇）

Qiskit快速编程探索（进阶篇）

五、量子电路模拟：探索量子世界的虚拟实验室 5.1 Aer模拟器：强大的模拟引擎 在量子计算的探索旅程中，Aer模拟器作为Qiskit的核心组件之一，宛如一座功能强大的虚拟实验室，为开发者提供了在经典计算机上模拟量子电路运行的卓越能力。它打破了硬件条件的限制，使得研究者无…
阅读更多...
rust学习——环境搭建

rust学习——环境搭建

rust安装&#xff1a;https://kaisery.github.io/trpl-zh-cn/ch01-01-installation.html 1、vscode装插件&#xff1a; toml语法支持 依赖管理 rust语法支持 2、创建demo 3、查看目录 4、执行文件的几种方式&#xff1a; rust安装&#xff1a;https://www.rust-lang.org/z…
阅读更多...
继承（7）

继承（7）

大家好&#xff0c;今天我们继续来学习一下继承的知识&#xff0c;这方面需要大家勤动脑才能理解&#xff0c;那么我们来看。 1.9 protected关键字 在类和对象章节中&#xff0c;为了实现封装特性,java中引入访向限定符,主要限定:类或者类中成员能否在类外和其他包中被访问. …
阅读更多...
玩转大语言模型——langchain调用ollama视觉多模态语言模型

玩转大语言模型——langchain调用ollama视觉多模态语言模型

系列文章目录 玩转大语言模型——ollama导入huggingface下载的模型 langchain调用ollama视觉多模态语言模型 系列文章目录前言使用Ollama下载模型查找模型下载模型 测试模型ollama测试langchain测试加载图片加载模型 模型回复 前言 视觉多模态语言模型由预训练的多模态编码器…
阅读更多...
J-LangChain - 复杂智能链流式执行

J-LangChain - 复杂智能链流式执行

系列文章索引 J-LangChain 入门 介绍 j-langchain是一个Java版的LangChain开发框架&#xff0c;具有灵活编排和流式执行能力&#xff0c;旨在简化和加速各类大模型应用在Java平台的落地开发。它提供了一组实用的工具和类&#xff0c;使得开发人员能够更轻松地构建类似于LangC…
阅读更多...
【翻译】2025年华数杯国际赛数学建模题目+翻译pdf自取

【翻译】2025年华数杯国际赛数学建模题目+翻译pdf自取

保存至本地网盘 链接&#xff1a;https://pan.quark.cn/s/f82a1fa7ed87 提取码&#xff1a;6UUw 2025年“华数杯”国际大学生数学建模竞赛比赛时间于2025年1月11日&#xff08;周六&#xff09;06:00开始&#xff0c;至1月15日&#xff08;周三&#xff09;09:00结束&#xff…
阅读更多...
C# GID+绘制不透明和半透明的线条

C# GID+绘制不透明和半透明的线条

绘制线条时&#xff0c;必须将 Pen 对象传递给 DrawLine 类的 Graphics 方法。 Pen 构造函数的参数之一是 Color 对象。 若要绘制不透明的线条&#xff0c;请将颜色的 alpha 分量设置为 255。 若要绘制半透明的线条&#xff0c;请将 alpha 分量设置为从 1 到 254 的任何值。 在…
阅读更多...
通过可穿戴外骨骼，以更灵活的方式操作你的机器人。

通过可穿戴外骨骼，以更灵活的方式操作你的机器人。

今天&#xff0c;我们将介绍一款专为控制 Mercury X1 和 Mercury B1 机械臂而设计的创新外骨骼。这种外骨骼以人类手臂的结构为蓝本&#xff0c;可实现直观和精确的控制。 开发这种外骨骼的动机源于人们对深度学习和机器学习等领域日益增长的兴趣。这些技术使机器人能够自主学习…
阅读更多...
浅尝Appium自动化框架

浅尝Appium自动化框架

浅尝Appium自动化框架 Appium自动化框架介绍Appium原理Appium使用安装平台驱动实战 坑 Appium自动化框架介绍 Appium 是一个开源的自动化测试框架&#xff0c;最初设计用于移动应用的测试&#xff0c;但现在它也扩展了对桌面端应用的支持。Appium 使得自动化测试变得更加简单&…
阅读更多...
maven多模块项目编译一直报Failure to find com.xxx.xxx:xxx-xxx-xxx:pom:1.0-SNAPSHOT in问题

maven多模块项目编译一直报Failure to find com.xxx.xxx:xxx-xxx-xxx:pom:1.0-SNAPSHOT in问题

工作中项目上因为多版本迭代&#xff0c;需要对不同迭代版本升级版本号&#xff0c;且因为项目工程本身是多模块结构&#xff0c;且依然多个其他模块工程。 在将工程中子模块的pom.xml中版本号使用变量引用父模块中定义的版本号时&#xff0c;一直报Failure to find com.xxx.x…
阅读更多...
来自通义万相的创意加速器：AI 绘画创作

来自通义万相的创意加速器：AI 绘画创作

来自通义万相的创意加速器&#xff1a;AI 绘画创作 通义万相动手搭建“通义万相”部署方案资源准备对象存储OSS&#xff08;手动部署&#xff09;DashScope 模型服务灵积云服务器ECS&#xff08;手动部署&#xff09;一键部署ROS Web文生图艺术与设计创作广告与营销物料生成教育…
阅读更多...
【Uniapp-Vue3】组合式API中的组件的生命周期函数（钩子函数）

【Uniapp-Vue3】组合式API中的组件的生命周期函数（钩子函数）

在Uniapp中生命周期函数用得较多的是onMounted和onUnmounted。 一、onMounted函数 如果我们想要获得DOM元素&#xff0c;就需要给DOM标签上添加ref属性&#xff0c;并定义一个相同属性名的变量。 但是我们输出这个DOM元素为NULL 如果我们使用onMounted就能获得到DOM元素&…
阅读更多...
uniapp使用chooseLocation安卓篇

uniapp使用chooseLocation安卓篇

本文章全部以高德地图为例 代码 <view class"bottom"><button click"choose">定位</button> </view> choose() {uni.chooseLocation({success: function(res) {console.log(位置名称&#xff1a; res.name);console.log(详细地…
阅读更多...
了解模2除法：原理与应用

了解模2除法：原理与应用

模2除法&#xff0c;也被称为二进制除法或XOR除法&#xff0c;是一种在二进制数制下进行的特殊除法运算。与常规的十进制或其他进制的除法不同&#xff0c;模2除法使用异或&#xff08;XOR&#xff09;运算代替减法&#xff0c;并且不涉及进位或借位。这种除法运算在数字通信、…
阅读更多...
基于 SSH 的任务调度系统

基于 SSH 的任务调度系统

文末附有完整项目代码 在当今科技飞速发展的时代&#xff0c;任务调度系统的重要性日益凸显。本文将详细介绍一个基于 SSH&#xff08;SpringStruts2Hibernate&#xff09;的任务调度系统的设计与实现。 一、系统概述 本系统旨在改变传统人工任务调度方式&#xff0c;通过计算…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023