vue项目使用easyplayer播放m3u8直播推流

官网

青犀视频

代码库 / 示例 / demo

EasyPlayer

示例效果:

项目背景如图 

后端给了m3u8的直播地址  协议是 hls / flv

市面上很多第三方热门播放库都可以完成该多屏播放方式 如Video.js

问题在于 分多屏时 会存在性能问题  并且关闭播放器后 即便删除Dom或调用停止等方法 F12网络还在不断的请求分片

故采用该库 Easyplayer

该库使用方便 性能较好 文档清晰 几乎0上手成本

1. 安装

npm install @easydarwin/easyplayer --save

2.引入(非常重要!)

官方文档:

copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf 到 静态文件 根目录

copy node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml 到 静态文件 根目录

copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 到 静态文件 根目录

也就是根据以上路径 找到node_modules包里面这仨文件 如图

然后把这仨文件复制粘贴到public目录下 如图

ok  引入最后一步  打开 public 目录下的 index.html

把刚刚的仨文件引入进去 (实际上只引入第一个js文件也可以运行)

<script src="./static/js/EasyPlayer-lib.min.js"></script>
<script src="./static/js/crossdomain.xml"></script>
<script src="./static/js/EasyPlayer.wasm"></script>

3.使用

 过于简单基础  故不写备注

逻辑简而言之

引入并注册组件

v-for循环playList地址  有几个地址循环几个播放器出来  分4屏 playList放四个url就行了

注意:

  1. 需保证  ref 和 data-index 的唯一性 这俩我代码里使用了for循环的下标
  2. 切换分屏播放或切换设备播放时 把playList清空后重新赋值播放地址
  3. 播放有误的话或者playList地址有变动  则不会再取流  也就是说关闭之后就不会再取流了  甚至不需要做停止或销毁DOM的操作 非常方便
  4. 官方demo多看 提供的有播放事件 如果取流过程中出现问题 捕获错误的回调中可以重新初始化播放器  人性化嗷 点个赞
<script>
    // 引入并注册组件  
    import EasyPlayer from '@easydarwin/easyplayer'
    export default {
        components: {
          EasyPlayer,
        }
        data(){
            // 播放链接地址
            playList: ['url1', 'url2', 'url3', 'url4'],
        }
    },
</script>

 <div v-for="(item, index) in playList" :key="index">
    <easy-player
        :ref="'player' + index"
        :data-index="index"
        :muted="false"
        :video-url="item"
    />
</div>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Python进阶】近200页md文档14大体系第4篇:Python进程使用详解(图文演示)

本文从14大模块展示了python高级用的应用。分别有Linux命令&#xff0c;多任务编程、网络编程、Http协议和静态Web编程、htmlcss、JavaScript、jQuery、MySql数据库的各种用法、python的闭包和装饰器、mini-web框架、正则表达式等相关文章的详细讲述。 Python全套笔记直接地址…

鸿蒙开发-ArkTS 语言

鸿蒙开发-ArkTS 语言 1. 初识 ArkTS 语言 ArkTS 是 HarmonyOS 优选主力开发语言。ArkTS 是基于 TS(TypeScript)扩展的一门语言&#xff0c;继承了 TS 的所以特性&#xff0c;是TS的超集。 主要是扩展了以下几个方面&#xff1a; 声明式UI描述和自定义组件&#xff1a; ArkTS允…

从裸机启动开始运行一个C++程序(十三)

前序文章请看&#xff1a; 从裸机启动开始运行一个C程序&#xff08;十二&#xff09; 从裸机启动开始运行一个C程序&#xff08;十一&#xff09; 从裸机启动开始运行一个C程序&#xff08;十&#xff09; 从裸机启动开始运行一个C程序&#xff08;九&#xff09; 从裸机启动开…

2. OpenHarmony源码下载

OpenHarmony源码下载(windows, ubuntu) 现在的 OpenHarmony 4.0 源码已经有了&#xff0c;在 https://gitee.com/openharmony 地址中&#xff0c;描述了源码获取的方式。下来先写下 windows 的获取方式&#xff0c;再写 ubuntu 的获取方式。 获取源码前&#xff0c;还需要的准…

咖啡馆管理系统点餐外卖小程序效果如何

咖啡一直是很多人喜欢的饮品&#xff0c;比如有些地区的人非常喜欢&#xff0c;熬夜加班醒脑等&#xff0c;咖啡领域市场规模逐年增加&#xff0c;相应的从业商家也在增加&#xff0c;近些年随着线上生态崛起&#xff0c;传统线下咖啡馆经营痛点显露出来。 通过【雨科】平台搭建…

使用sqlserver备份还原,复制迁移数据库

文章目录 前言一、备份数据库二、还原数据库三、其他 前言 当初学sqlserver复制数据库的时候&#xff0c;老师只教了右键数据库生成sql脚本&#xff0c;没说数据库非常大的时候咋搞啊&#xff0c;分离数据库复制一份后在附加上去太危险了 百度一下备份还原数据库针对小白的资料…

嵌入式单片机方向和Linux驱动开发方向哪个发展前景好?

嵌入式单片机方向和Linux驱动开发方向哪个发展前景好&#xff1f; 在某些平台上看到很多人鼓吹嵌入式Linux开发比单片机开发要好&#xff0c;让所有人都去做嵌入式Linux开发。说这种话的人大多数是嵌入式Linux的培训机构&#xff0c;或者是一开始就以嵌入式Linux入门的那一批人…

TIDB基础

TIDB整个逻辑架构跟MYSQL类似&#xff0c;如下&#xff1a; TIDB集群&#xff1a;相当于MYSQL的数据库服务器&#xff0c;区别是MYSQL数据库服务器为单进程的&#xff0c;TIDB集群为分布式多进程的。 数据库&#xff1a;同MYSQL数据库&#xff0c;数据库属于集群&#xff0c;…

Sam Altman回归OpenAI,新董事会成员曝光!

11月22日下午&#xff0c;OpenAI在社交平台宣布&#xff0c;在原则上已达成协议&#xff0c;让 Sam Altman重返 OpenAI担任首席执行官&#xff0c;并重组董事会。稍后会公布更详细的内容。 初始董事会成员包括前Salesforce联合首席执行官Bret Taylor&#xff08;担任主席&…

C语言--给定一个数组,把第一项的值减去第二项的值,第二项的值减去第三项的值,第三项的值减去第四项的值,依次类推。放到一个新的数组中,并打印新的数组

一.题目描述&#xff1a; 给定一个数组&#xff0c;把第一项的值减去第二项的值&#xff0c;第二项的值减去第三项的值&#xff0c;第三项的值减去第四项的值&#xff0c;依次类推。放到一个新的数组中&#xff0c;并打印新的数组。 比如&#xff1a;输入一个数组是5&#xff…

从事软件测试8年,对业务测试人员的一些思考

自从事测试工作八年多以来&#xff0c;经历过三个部门多条业务线&#xff0c;也经历过测试转型再回到测试&#xff0c;在此过程中对测试工作和角色的认知也逐步有些思考&#xff0c;想把这些思考分享给大家&#xff0c;希望为业务测试同学提供一些有价值的思路。 同时&#xff…

Mysql查看Binlog文件

前期准备 检查是否开启binlog mysql> SHOW VARIABLES LIKE log_bin; // 或者 mysql> SHOW VARIABLES LIKE log%;ON代表开启&#xff0c;OFF代表关闭。如为OFF需 开启 后才能查看&#xff0c;但只能查看开启之后时间点的。 查看binlog文件有哪些 一般yum安装的mysql…

玩具礼品经营配送小程序商城作用是什么

玩具礼品所覆盖的需求人群年龄阶层非常广&#xff0c;尤其是孩子们乃至年轻人比较喜欢的&#xff0c;也因此无论线下还是线上都不缺各种店铺&#xff0c;传统商家主要以自然流量和线上开广告、一堆图文等方式分享获得生意。 然而如今随着互联网电商冲击&#xff0c;线下店铺流…

Python + Docker 还是 Rust + WebAssembly?

在不断发展的技术世界中&#xff0c;由大语言模型驱动的应用程序&#xff0c;通常被称为“LLM 应用”&#xff0c;已成为各种行业技术创新背后的驱动力。随着这些应用程序的普及&#xff0c;用户需求的大量涌入对底层基础设施的性能、安全性和可靠性提出了新的挑战。 Python 和…

AI助力钢铁产业数字化,python基于YOLOv5开发构建钢铁产业产品智能自动化检测识别系统

AI为工业产业智能化数字化赋能早已不是什么新鲜事&#xff0c;越来越多的行业和领域开始更大范围去拥抱AI&#xff0c;享受科技带来的变革力量&#xff0c;在我们之前的文章中也有很多相关领域项目的实践经历&#xff0c;本文的核心目标就是想要基于钢铁领域产品数据来开发构建…

【Unity细节】Default clip could not be found in attached animations list.(动画机报错)

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 &#x1f636;‍&#x1f32b;️收录于专栏&#xff1a;unity细节和bug &#x1f636;‍&#x1f32b;️优质专栏 ⭐【…

LeeCode前端算法基础100题(3)- N皇后

一、问题详情&#xff1a; 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数 n &#xff0c;返回所有不同的 n 皇后…

大宗商品贸易集团数据治理实践,夯实数字基座 | 数字化标杆

某大型央企是首批全国供应链创新与应用示范企业&#xff0c;在“十四五”规划期内以聚焦供应链管理核心主业作为主要战略发展方向。供应链运营管理以大宗商品贸易为主&#xff0c;其交易往往具有交易量巨大、交易环节复杂、风险交易难识别、风险客商难管控等痛点。 随着集团数…

数字乡村:科技赋能农村产业升级

数字乡村&#xff1a;科技赋能农村产业升级 数字乡村是指通过信息技术和数字化手段&#xff0c;推动农业现代化、农村经济发展和农民增收的一种新模式。近年来&#xff0c;随着互联网技术的飞速发展&#xff0c;数字乡村开始在全国范围内迅速兴起&#xff0c;为乡村经济注入了新…

超详细的pytest玩转HTML报告:修改、汉化和优化

前言 Pytest框架可以使用两种测试报告&#xff0c;其中一种就是使用pytest-html插件生成的测试报告&#xff0c;但是报告中有一些信息没有什么用途或者显示的不太好看&#xff0c;还有一些我们想要在报告中展示的信息却没有&#xff0c;最近又有人问我pytest-html生成的报告&a…