flv.js 直播_前端视频播放插件

flv.js 直播_前端视频播放插件关于使用flvjs文章目录关于使用flvjs1.创建2.事件处理3.踩到的坑1.创建HTML<videoid=”largeVideo”style=”width:100%;height:600px”class=”centeredVideo”controlsautoplaymutedwidth=”1015″

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

关于使用flvjs

1.创建

HTML

        <video id="largeVideo" style="width: 100%; height: 600px" class="centeredVideo" controls autoplay muted width="1015" height="576" >
          Your browser is too old which doesn't support HTML5 video.
        </video>

Jetbrains全家桶1年46,售后保障稳定

javascript

 let flvPlayerRef1 = document.getElementById("largeVideo");//获取创建dom
 let flvPlayerObjM1 = flvjs.createPlayer(
          { 
   
            type: "flv",
            isLive: true, //是否直播
            url: url, //地址
            hasAudio: true,
            hasVideo: true,
          },
          { 
   
            cors: true, // 是否跨域
            stashInitialSize: 384, // 缓存大小(kb) 默认384kb
            enableStashBuffer: true, // 是否启用缓存
            autoCleanupMaxBackwardDuration: 3 * 60,//自动清除缓存时间
            enableWorker: false, // 是否多线程工作
            autoCleanupSourceBuffer: true, // 是否自动清理缓存
            fixAudioTimestampGap: true,//音视频同步
          }
 flvPlayerObjM1.load(); //加载
 flvPlayerObjM1.play(); //播放

2.事件处理

flvjs.Events.STATISTICS_INFO 信息出错销毁直播

flvPlayerRef1.on(flvjs.Events.STATISTICS_INFO, function (res) { 
   
         	flvPlayerObjM1.pause();
            flvPlayerObjM1.unload();
            flvPlayerObjM1.detachMediaElement();
            flvPlayerObjM1.destroy();
            flvPlayerObjM1 = null;
});

flvjs.Events.ERROR 断流报错销毁

flvPlayerRef1.on(
          flvjs.Events.ERROR,
          (errorType, errorDetail, errorInfo) => { 
   
            console.log("errorType:", errorType);
            console.log("errorDetail:", errorDetail);
            console.log("errorInfo:", errorInfo);
            flvPlayerObjM1.pause();
            flvPlayerObjM1.unload();
            flvPlayerObjM1.detachMediaElement();
            flvPlayerObjM1.destroy();
            flvPlayerObjM1 = null;
          }
        );

flvjs.Events.VIDEO_FROZEN视频卡顿监听

flvPlayerRef1.on(
          flvjs.Events.VIDEO_FROZEN,
          (errorType, errorDetail, errorInfo) => { 
   
            console.log("errorType:", errorType);
            console.log("errorDetail:", errorDetail);
            console.log("errorInfo:", errorInfo);
            flvPlayerObjM1.pause();
            flvPlayerObjM1.unload();
            flvPlayerObjM1.detachMediaElement();
            flvPlayerObjM1.destroy();
            flvPlayerObjM1 = null;
          }
        );

将创建写入方法,在事件监听中调用可以实现断流重连,卡顿重连等问题

3.踩到的坑

当使用创建时,记住每次都需要销毁当前创建的直播流,是整个都需要销毁,不然很容易造成内存溢出,直接导致浏览器卡死,在断流重连和卡顿修复的时候尤其注意是否完全销毁这个直播组件!!!


新加
flv传入的url最好遵循同源策略,不要跨协议去请求。如果是用rtmp可以不考虑此处
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/234853.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • rtp载荷类型_架体荷载

    rtp载荷类型_架体荷载 1简介在Internet上用分组传送话音的质量不够好的一个重要原因是比较高的丢包率。尤其在广域网中,这个问题相当突出。不幸的是,实时多媒体业务对于延时的要求相当严格,因此不大可能通过重传来解决丢包的问题。正是出于这个原因,大家提出用前向纠错(FEC)来解决Internet上的丢包问题[1][2]。尤其是对于传统纠错码如校验码、RS码、汉明码等的使用引起了很多人的注意。为了能够更好地应用这些纠错码

  • 十三、外观模式—— 简化接口 #和设计模式一起旅行#

    我不想成为上帝或英雄,只想成为一棵树,为岁月而生长,不伤害任何人。 ——米沃什故事背景在英国体验了康桥的魅力,我挥一挥衣袖,不带走一片云彩,但是 英国的天空没有留下我的痕迹,但我曾去过。哈哈!从英国到法国,在浪漫的巴黎,我和设计模式MM感受到这个城市别样的风景,很是吸引人,我们决定在这里待一段时间在走。于是去政府部门办理一些手续,本来以为会花费很多时间的,因为之前办…

  • 今天忙着画一个用例图,发现一个好用的工具图片_用例图画法

    今天忙着画一个用例图,发现一个好用的工具图片_用例图画法临时画用例图,Rose给卸载了,去网上查了查还真有在线制作的工具,推荐给大家ProcessOn(https://www.processon.com/)下面是我用它画的一幅用例图。

  • Java设计模式之行为型:解释器模式

    Java设计模式之行为型:解释器模式

  • DrawerLayout详解「建议收藏」

    DrawerLayout详解「建议收藏」drawerLayout是SupportLibrary包中实现了侧滑菜单效果的控件,可以说drawerLayout是因为第三方控件如MenuDrawer等的出现之后,google借鉴而出现的产物。drawerLayout分为侧边菜单和主内容区两部分,侧边菜单可以根据手势展开与隐藏(drawerLayout自身特性),主内容区的内容可以随着菜单的点击而变化(这需要使用者自己实现)。

  • MySQL——MySQL 图形化管理工具的介绍

    MySQL——MySQL 图形化管理工具的介绍文章目录MySQL——MySQL图形化管理工具的介绍1、MySQLWorkbench2、Navicat3、SQLyog4、DBeaver5、DataGripMySQL——MySQL图形化管理工具的介绍MySQL图形化管理工具极大地方便了数据库的操作与管理,常用的图形化管理工具有:MysQLWorkbench、phpMyAdmin、NavicatPreminum、MySQLDumper、SQLyog、dbeaver、MysQLODBcConnector、DataGrip。1、MySQL

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号