flv.js 插件完成 flv 格式的视频播放

记录---

api中文文档： flv.js 中文API文档 - 简书

参考文章：全网最详细！vue中使用flv.js 播放直播监控视频流_vue使用flv.js_抄一下你代码的博客-CSDN博客

问题：flv.js获取视频，接口调通，画面不展示，关掉音频后，页面展示，音频格式不匹配，更改视频的音频格式后，页面出现

① 组件设置  //必须要声明一个播放器的容器  playerRef就是播放器的容器const playerRef = React.useRef<any>(null);const videoRef = React.useRef(null);<div className={styles.site_content_video_right_out}><videoclassName="video"ref={videoRef}preload="auto"width="100%"height="100%"mutedautoPlaycontrolstype="rtmp/flv">{/* <source src="" /> */}</video></div>

 具体方法----------// 获得摄像头信息const getInfo = async (item) => {// console.log('item', item)// getToken(item.equipmentId)let nowAddress: any = ''// 获得视频地址const res = await getVideoAddress({ code, equipmentId: item.equipmentId })if (res?.success) {const { data } = resnowAddress = datasetAddress(data)} else {nowAddress = nullsetAddress(null)}  // setTimeout(() => { //使用定时器是因为，在mounted声明周期里调用，可能会出现DOM没加载出来的原因const videoElement = videoRef.current; // 获取到html中的video标签if (flvJs.isSupported()) {//先判断 player是否存在，如果存在，销毁掉它，不然会占用TCP名额if (playerRef.current) {playerRef.current.pause(); //暂停播放数据流playerRef.current.unload(); //取消数据流加载playerRef.current.detachMediaElement(); //将播放实例从节点中取出playerRef.current.destroy(); //销毁播放实例playerRef.current = null;}if (nowAddress) {const player = playerRef.current = flvJs.createPlayer( //创建直播流，加载到DOM中去{type: "flv",url: nowAddress, //你的url地址// url: 'http://218.108.40.230:20301/live/c2lwOmlwODdjMDRAaHpqeS56amp5LmNuank6OTkwMl9tYWluXzIwMjMtMy0yNiAxMDowMDoxMF8yMDIzLTMtMjYgMTY6MDA6MDA=.live.flv?token=7302843b-d9e5-4906-a766-73994f2d7957', //你的url地址isLive: true, //数据源是否为直播流hasAudio: true, //数据源是否包含有音频hasVideo: true, //数据源是否包含有视频enableStashBuffer: true, //是否启用缓存区},{enableWorker: false, //不启用分离线程enableStashBuffer: false, //关闭IO隐藏缓冲区autoCleanupSourceBuffer: true, //自动清除缓存lazyLoad: false,});player.attachMediaElement(videoElement); //放到dom中去player.load();//准备完成//!!!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放player.play();//播放}}// }, 1000)}

③卸载时销毁播放器// 卸载功能组件时释放Video.js播放器// 第一个函数参数里面返回一个函数，相当于类组件的componentWillUnmountReact.useEffect(() => {return () => {if (playerRef.current) {playerRef.current.pause();playerRef.current.unload();playerRef.current.detachMediaElement();playerRef.current.destroy();playerRef.current = null;}};}, [playerRef]);

flv.js 插件完成 flv 格式的视频播放相关推荐

使用flv.js + websokect播放rtsp格式视频流
1.问题背景在最近的项目中,涉及到海康接入的视频播放的问题,海康这边获取到的视频流是rtsp格式,web端目前没有直接可以播放的组件,于是最开始是后端处理了视频流,返回hls格式的m3u8地址,这样 ...
3ds Max、Maya安装Babylon.js插件导出gltf格式的3D模型文件方法
3ds Max.Maya安装Babylon.js插件导出gltf格式的3D模型文件方法 **1.去Github project Releases下载Babylon.js插件. 找到和自己安装的3ds ...
【入门】无插件web直播解决方案，ffmpeg+nginx-http-flv-module+flv.js
概述这几天一直在搭建一个web端的直播平台,需求是无插件,低延迟,开源免费. 但是网上的教程,大多比较零散,没有整合成一套解决方案. 所以搜索了很多资料,也问了不少群里的大佬.本篇博客是一个资源整合 ...
以flv.js框架为基础，替换flv格式视频
flv.js总结这两个月来,开展这个flv.js项目学到的新东西还挺多的,从理解flv.js框架,到理解flv视频格式,到理解公司自己的视频格式,当每一步都理解后,整个过程是比较顺利的,下面是我对这 ...
使用flv.js实现flv格式的监控视频流播放
最近在对接海信的监控摄像头,对方返回的监控视频流格式是flv格式,我使用的是flv.js来实现监控播放一:flv.js github地址:https://github.com/Bilibili/fl ...
Flv.js全面解析
Flv.js全面解析常见直播协议 Flv.js概览 Flv.js结构图架构图功能 API文档相关 MediaDataSource的字段列表如下, Config flvjs.getFeatureL ...
flv.js解析与使用
简介 Flv.js 是 HTML5 Flash 视频(FLV)播放器,纯原生 JavaScript 开发,没有用到 Flash.由 bilibili 网站开源.它的工作原理是将 FLV 文件流转码复用 ...
Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流
场景 Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流: Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流_win nginx-rtmp ...
vlc搭建rtsp直播Demo ffmpeg + nginx + flv.js实现rtsp网页播放Demo
文章目录学习链接本地视频文件作为数据源推流步骤拉流步骤本地摄像头作为数据源拉流步骤 vlc + ffmpeg + nginx + flv.js 实现网页视频直播概括 vlc打开摄像头,提 ...

flv.js 插件完成 flv 格式的视频播放

flv.js 插件完成 flv 格式的视频播放相关推荐

最新文章

热门文章

flv.js 插件 完成 flv 格式的视频播放

flv.js 插件 完成 flv 格式的视频播放相关推荐

最新文章

热门文章

flv.js 插件完成 flv 格式的视频播放

flv.js 插件完成 flv 格式的视频播放相关推荐