前端在浏览器端播放直播流协议的方式

直播流协议2种：.flv后缀是http-flv协议，.m3u8后缀是hls协议

一、播放.m3u8

1、hls.js

HLS (HTTP Live Streaming)是Apple公司研发的流媒体传输技术，包括一个m3u8的索引文件、多个ts分片文件和key加密串文件。这项技术主要应用于点播和直播领域。

hls.js是一个JavaScript库，可实现HTTP Live Streaming客户端。 它依靠HTML5视频和MediaSource扩展进行播放。

它通过将MPEG-2传输流和AAC / MP3流转换为ISO BMFF（MP4）片段来工作。 如果在浏览器中可用，可以使用Web Worker异步执行此转换。 WWDC2016期间宣布，hls.js还支持HLS + fmp4

hls.js不需要任何播放器，它可以直接在标准HTML 元素上运行。

hls.js用ECMAScript6（* .js）和TypeScript（* .ts）（ES6的强类型超集）编写，并使用TypeScript编译器在ECMAScript5中进行编译。

特征

  • VOD 和现场播放列表
  • 实时播放列表上的 DVR 支持
  • 碎片化的 MP4 容器
  • MPEG-2 TS 容器
  • ITU-T 建议书 H.264 和 ISO/IEC 14496-10 基本流
  • ISO/IEC 13818-7 ADTS AAC 基本流
  • ISO/IEC 11172-3 / ISO/IEC 13818-3（MPEG-1/2 Audio Layer III）基本流
  • 打包元数据 (ID3v2.3.0) 基本流
  • AAC 容器（仅音频流）
  • MPEG 音频容器（MPEG-1/2 Audio Layer III 仅音频流）
  • HTTP Live Streaming 的定时元数据（ID3 格式，MPEG-2 TS 承载）
  • AES-128 解密
  • SAMPLE-AES 解密（仅当使用 MPEG-2 TS 容器时才支持）
  • 对 DRM（数字权限管理）的加密媒体扩展 (EME) 支持
  • Widevine CDM（仅在演示页面上使用shaka-packager test-stream 进行测试）
  • CEA-608/708 字幕
  • WebVTT 字幕
  • 用于 VoD 和现场播放列表的备用音轨再现（带有备用音频的主播放列表）
  • 自适应流媒体
  • 手动和自动质量切换
    • 3种质量切换模式可用（可通过API方式控制）
      • 即时切换（在当前视频位置即时质量切换）
      • 平滑切换（下一个加载片段的质量切换）
      • 带宽保守切换（下一个加载片段的质量切换更改，不刷新缓冲区）
    • 在自动质量模式下，紧急关闭以防带宽突然下降以最小化缓冲。
  • VoD & Live 上的准确搜索（不限于片段或关键帧边界）
  • 无需重新下载段即可在缓冲区和后台缓冲区中查找的能力
  • 内置分析
  • 可以监控所有内部事件（网络事件、视频事件）
  • 播放会话指标也公开
  • 容错能力
  • 库中嵌入的重试机制
  • 可以触发恢复操作修复致命的媒体或网络错误

2、使用hls.js

1. 安装hls.js

npm i hls.js

 2. 使用hls.js实现播放m3u8格式流，获取video节点

<video id="video" ref="videoRef" autoplay width="800" height="400" controls></video>
import Hls from 'hls.js'// 获取视频元素
var video = document.getElementById('video');if (video.canPlayType('application/vnd.apple.mpegurl')) {video.src = videoSrc;//// If no native HLS support, check if HLS.js is supported//
} else if (Hls.isSupported()) {let config = {xhrSetup: function (xhr, url) {xhr.withCredentials = true; // 会携带cookie// xhr.setRequestHeader('token',"my-token")},}// 创建一个新的HLS实例var hls = new Hls(config);// 绑定 canplay 事件，当能够播放时开始播放hls.on(Hls.Events.MANIFEST_PARSED, function() {video.play();});// 绑定错误事件hls.on(Hls.Events.ERROR, function(event, data) {var errorType = data.type;var errorDetails = data.details;var errorFatal = data.fatal;if (data.fatal) {switch(data.type) {case Hls.ErrorTypes.NETWORK_ERROR:// 网络错误处理break;case Hls.ErrorTypes.MEDIA_ERROR:// 媒体错误处理break;default:// 其他错误处理break;}}});// 在video元素上附加MSEhls.attachMedia(video);// 开始加载HLS流hls.loadSource('xxx.m3u8');
}

3. 销毁

应调用以释放使用的资源并销毁 hls 上下文

hls.destroy()

4. 致命错误恢复

hls.js 提供了通过以下 2 种方法“尝试”恢复致命网络和媒体错误的方法：

hls.startLoad()

应调用以恢复网络错误。

hls.recoverMediaError()

应调用以恢复媒体错误。

错误恢复示例代码
hls.on(Hls.Events.ERROR, function (event, data) {if (data.fatal) {switch (data.type) {case Hls.ErrorTypes.NETWORK_ERROR:// try to recover network errorconsole.log('fatal network error encountered, try to recover');hls.startLoad();break;case Hls.ErrorTypes.MEDIA_ERROR:console.log('fatal media error encountered, try to recover');hls.recoverMediaError();break;default:// cannot recoverhls.destroy();break;}}
});
hls.swapAudioCodec()

如果调用后仍然引发媒体错误hls.recoverMediaError()，调用此方法可能有助于解决音频编解码器不匹配的问题。工作流程应该是：

关于第一媒体错误：调用 hls.recoverMediaError()

如果在第一个媒体错误之后“快速”引发另一个媒体错误：首先调用hls.swapAudioCodec()，然后调用hls.recoverMediaError()。

5. 切换播放源

首先检查hls对象是否已经定义，如果已定义，则停止当前的播放器实例。然后创建新的播放器实例，绑定到video元素，并开始加载新的播放源。加载成功后，播放器会自动开始播放新的视频内容。如果在加载过程中发生错误，会有相应的错误处理逻辑。

if (typeof hls !== 'undefined') {// 停止当前的播放器实例hls.destroy();
}// 新的播放源URL
var newVideoUrl = 'new_source_url.m3u8';// 创建新的HLS播放器实例
var hls = new Hls();// 绑定到video元素
var video = document.getElementById('video');
hls.attachMedia(video);// 监听加载事件
hls.on(Hls.Events.MANIFEST_PARSED, function () {video.play();
});// 错误处理
hls.on(Hls.Events.ERROR, function (event, data) {if (data.fatal) {switch (data.type) {case Hls.ErrorTypes.NETWORK_ERROR:// 网络错误处理break;case Hls.ErrorTypes.MEDIA_ERROR:// 媒体错误处理break;default:// 其他错误处理break;}}
});// 加载新的播放源
hls.loadSource(newVideoUrl);

二、播放.flv

Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。

1、安装flv.js

npm i flv.js

2、使用flv.js实现播放flv格式流，获取video节点

import flvjs from 'flv.js'let videoElement = document.getElementById('my-player');if (flvjs.isSupported()) {flvPlayer = flvjs.createPlayer({type: 'flv',					//媒体类型url: 'XXXX'						//flv格式媒体URLisLive: true,					//数据源是否为直播流hasAudio: false,				//数据源是否包含有音频hasVideo: true,					//数据源是否包含有视频enableStashBuffer: false		//是否启用缓存区},{enableWorker: false, 			//不启用分离线程enableStashBuffer: false, 		//关闭IO隐藏缓冲区autoCleanupSourceBuffer: true 	//自动清除缓存});flvPlayer.attachMediaElement(videoElement);	//将播放实例注册到节点flvPlayer.load(); 					//加载数据流flvPlayer.play();					//播放数据流
}

3、关闭视频流

flvPlayer.pause();						//暂停播放数据流							
flvPlayer.unload();						//取消数据流加载
flvPlayer.detachMediaElement();			//将播放实例从节点中取出
flvPlayer.destroy();					//销毁播放实例

4、flv.js常用方法

1：flvjs.isSupported()：判断当前浏览器是否支持播放2：flvPlayer = flvjs.createPlayer(mediaDataSource: MediaDataSource, config?: Config)：创建一个播放实例3：flvPlayer.attachMediaElement(mediaElement: HTMLMediaElement)：将播放实例注册到video节点4：flvPlayer.load()：加载数据流5：flvPlayer.play()：播放数据流6：flvPlayer.pause()：暂停播放数据流7：flvPlayer.unload()：取消数据流加载8：flvPlayer.detachMediaElement()：将播放实例从节点中取出9：flvPlayer.destroy()：销毁播放实例

参考文档

hls.js - npm

flv.js - npm

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

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

相关文章

畅享精酿啤酒与意式面包的简单美味

畅享精酿啤酒与意式面包的简单美味

在忙碌的生活中&#xff0c;我们时常渴望寻找那份简单的美好。而Fendi Club啤酒与意式面包的搭配&#xff0c;正是这种美好体验的代表。它们以其简洁的味道和口感&#xff0c;成为了无数人心中的佳品。 Fendi Club啤酒&#xff0c;以其醇厚的口感和细腻的泡沫&#xff0c;成为了…
阅读更多...
PL/SQL学习笔记

PL/SQL学习笔记

介绍 PL/SQL 编程语言是SQL 和 Oracle 关系数据库的过程扩展语言 是Oracle 编程环境中的一个工具 基本语法 S.No Sections & Description 1 Declarations 此部分以关键字 DECLARE 开头。 它是一个可选部分&#xff0c;定义了程序中要使用的所有变量、游标、子程序和其他…
阅读更多...
Milvus的相似度指标

Milvus的相似度指标

官网&#xff1a;https://milvus.io/docs/metric.md版本: v2.3.x 在 Milvus 中&#xff0c;相似度度量用于衡量向量之间的相似度。选择良好的距离度量有助于显着提高分类和聚类性能。下表展示了这些广泛使用的相似性指标如何与各种输入数据形式和 Milvus 索引相匹配。 一、浮…
阅读更多...
如何用Python实现转行高薪梦？三个热门方向带你入门

如何用Python实现转行高薪梦？三个热门方向带你入门

Python是一门非常适合转行的编程语言&#xff0c;它有着丰富的应用场景和学习资源&#xff0c;而且语法简单易懂&#xff0c;学习效率高。如果你想要用Python实现转行梦想&#xff0c;那么你可能会问&#xff0c;Python有哪些热门的工作方向&#xff1f;小编这就为你介绍Python…
阅读更多...
js【详解】DOM

js【详解】DOM

文档对象模型&#xff08;Document Object Model&#xff0c;简称DOM&#xff09; DOM 是哪种数据结构 &#xff1f; DOM 的本质是浏览器通过HTML代码解析出来的一棵 树。 操作 DOM 常用的 API 有哪些 &#xff1f; 获取 DOM 节点 //方式 1&#xff1a;通过【id】获取&#xf…
阅读更多...
啤酒：精酿啤酒与三明治的快捷搭配

啤酒：精酿啤酒与三明治的快捷搭配

在快节奏的现代生活中&#xff0c;人们总是追求简单、快捷的美食。而Fendi Club啤酒与三明治的搭配&#xff0c;正是满足了这一需求。它们以其方便的制作方式和美味的口感&#xff0c;成为了无数人的心头好。 Fendi Club啤酒&#xff0c;以其醇厚的口感和细腻的泡沫&#xff0c…
阅读更多...
常用python模板

常用python模板

1.简单脚本模板 def main():#代码逻辑if __name__"__main__":main() 2.类定义模板 Class Myclass:def __init__(self,parameter):self.parameterparameterdef my_method(self):#方法逻辑 3.函数定义模板 def my_function(parameter):#代码逻辑return result 4.…
阅读更多...
【AI视频教程】只需5步，AI作出鸡你太美视频

【AI视频教程】只需5步，AI作出鸡你太美视频

1.视频效果 2.准备工作 制作视频效果&#xff0c;需要准备下面3个条件&#xff1a; 准备stable diffusion的环境剪辑一段【鸡你太美】原版视频stable diffusion安装sd-webui-IS-NET-pro插件 2.1部署stable diffusion环境 这里还是建议大家用云平台部署stable diffusion&am…
阅读更多...
Python数据库操作全攻略：从入门到精通，一文掌握连接与操作MySQL、SQLite、PostgreSQL等主流数据库

Python数据库操作全攻略：从入门到精通，一文掌握连接与操作MySQL、SQLite、PostgreSQL等主流数据库

在数据驱动的世界里，Python作为强大的编程语言，在处理和分析数据库方面具有显著优势。本文将深入浅出地讲解如何使用Python操作各类主流数据库，并通过实际代码示例帮助您快速上手。 一、Python操作MySQL数据库 借助mysql-connector-python库，我们可以轻松实现对MySQL数据…
阅读更多...
第二十天-数据分析

第二十天-数据分析

1.介绍 1.什么是数据分析 1.以下4个纬度结合起来的数据科学 2.数据分析的特殊性
阅读更多...
Java实现Tron（波场）区块链的开发实践（三）波场链水龙头、WEB3测试实战

Java实现Tron（波场）区块链的开发实践（三）波场链水龙头、WEB3测试实战

上一节我们具体讲到Java实现Tron波场链的逻辑代码实现。 这一节我们通过部署和开发好的代码&#xff0c;针对测试链进行自测开发&#xff0c;准备测试环境。 1. 创建离线地址 首先我们需要一个离线地址&#xff0c;我们不需要在线进行创建&#xff0c;直接可以通过第一节的离…
阅读更多...
重庆医科大学和重庆市生物信息学学会联合主办！第十六届生物信息学和生物医学技术国际会议（ICBBT 2024）即将召开！

重庆医科大学和重庆市生物信息学学会联合主办！第十六届生物信息学和生物医学技术国际会议（ICBBT 2024）即将召开！

2024年第十六届生物信息学和生物医学技术国际会议&#xff08;ICBBT 2024&#xff09;将于5月24-26日在中国重庆举行。本次会议由重庆医科大学和重庆市生物信息学学会联合主办。ICBBT会议系列一年一届&#xff0c;已有15年历史。本次会议的主要目标旨在促进生物信息学和生物医学…
阅读更多...
4、Generator、class类、继承、Set、Map、Promise

4、Generator、class类、继承、Set、Map、Promise

一、生成器函数Generator 1、声明generator函数 function* 函数名() { }调用生成器函数 需要next()返回一个generator对象&#xff0c;对象的原型上有一个next(),调用返回对象{value:yield后面的值,done} function* fn() {console.log("我是生成器函数") } let it…
阅读更多...
Linux-网络编程报错分析

Linux-网络编程报错分析

1【UDP】通信 【No route to host】&#xff1a;没有连接主机的路由 原因分析&#xff1a; 1.没有配置好默认网关地址&#xff0c;计算机上的路由表找不到到目标ip的路由。 解决方法&#xff1a;检查网络配置 2. 解决方法&#xff1a; 3. 解决方法&#xff1a;
阅读更多...
22 Dytechlab Cup 2022C. Ela and Crickets(思维、找规律、模拟)

22 Dytechlab Cup 2022C. Ela and Crickets(思维、找规律、模拟)

思路就是找规律 可以发现&#xff0c;当拐点在角落时的情况和不在角落的情况是不同 当拐点在角落时&#xff0c;只有目标点的横纵坐标其中的一个和它相同时&#xff0c;这时才可能到达。 否则&#xff0c;我们就简单的例子可以看一下&#xff0c;当一个 2 ∗ 2 2*2 2∗2的矩阵的…
阅读更多...
使用网盘不限速，云开发者都用这一招

使用网盘不限速，云开发者都用这一招

在现实世界里&#xff0c;很多现实里的场景和物品都逐渐“云”化。 最直观的一个解释&#xff0c;就是我们几乎人人都在使用网盘来存储数据、文档、音视频和各类安装包。 用网盘是挺方便的。但有个让人头疼的问题&#xff0c;就是很多免费网盘对上传下载速度限制得厉害。 比…
阅读更多...
Java解决日期之间隔几天

Java解决日期之间隔几天

Java解决日期之间隔几天 01 题目 请你编写一个程序来计算两个日期之间隔了多少天 日期以字符串形式给出&#xff0c;格式为 YYYY-MM-DD&#xff0c;如示例所示。 示例 1&#xff1a; 输入&#xff1a;date1 "2019-06-29", date2 "2019-06-30" 输出&…
阅读更多...
Linux(CentOS7.5)：通过docker安装mysql8.0

Linux(CentOS7.5)：通过docker安装mysql8.0

一、预创建存储券映射 mkdir -p /opt/docker_mysql/conf/conf.d; mkdir -p /opt/docker_mysql/data; mkdir -p /opt/docker_mysql/logs; mkdir -p /opt/docker_mysql/mysql-files;chmod -R 755 /opt/docker_mysql; 二、编辑配置文件 vim /opt/docker_mysql/conf/conf.d/my.cnf …
阅读更多...
猫咪挑食怎么治？排行榜靠前适口性好的主食冻干推荐

猫咪挑食怎么治？排行榜靠前适口性好的主食冻干推荐

在如今&#xff0c;养猫人士几乎都将自己的小猫咪视作珍宝&#xff0c;宠溺有加。但宠爱过度有时也会导致猫咪养成挑食的坏习惯。猫咪挑食怎么治呢&#xff1f;今天&#xff0c;我要分享一个既能让猫咪不受苦&#xff0c;又能纠正挑食问题的方法。 一、为什么猫会挑食呢&#x…
阅读更多...
加速你的应用：探索Redis的极致性能与多样化应用

加速你的应用：探索Redis的极致性能与多样化应用

Redis介绍和使用 Redis是一个开源的&#xff0c;用C语言编写的&#xff0c;支持网络、可基于内存也可以持久化的日志型、键值对存储数据库&#xff0c;并提供多种语言的API。 Redis的特点 速度快&#xff1a;Redis将所有数据存储在内存中&#xff0c;对数据的读写速度远远高…
阅读更多...
最新文章

Copyright @ 2022~2023