调用flv.js显示视频报错

flv.js开源地址：https://www.bootcdn.cn/flv.js/

代码

<video class="video" id="videoElement"></video>

/* 隐藏播放、暂停等各类播放器功能按钮 */
video::-webkit-media-controls-fullscreen-button {display: none;
}
video::-webkit-media-controls-play-button {display: none;
}
video::-webkit-media-controls-timeline {display: none;
}
video::-webkit-media-controls-current-time-display{display: none;
}
video::-webkit-media-controls-time-remaining-display {display: none;
}
video::-webkit-media-controls-mute-button {display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {display: none;
}
video::-webkit-media-controls-volume-slider {display: none;
}
video::-webkit-media-controls-enclosure{ display: none;
}/* 视频全铺 */
.video{object-fit: fill;
}

if (flvjs.isSupported()) {var videoElement = document.getElementById('videoElement');var flvPlayer = flvjs.createPlayer({type: 'flv',url: url // 你的视频地址});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play();
}

报错

监控视频可以正常显示，但控制台会不断的报错：

flv.min.js:6 [TransmuxingController] > DemuxException: type = CodecUnsupported, info = Flv: Unsupported audio codec idx: 7

flv.min.js:1 Uncaught (in promise) Error: Uncaught, unspecified "error" event. (MediaError)

原因

谷歌浏览器禁止了video、audio标签的autoplay属性

谷歌的初衷不是禁止视频，而是禁止音频，但是视频中包含了音频信息，所以一并被禁止了

解决方法

给video标签添加muted属性：

<video class="video" id="videoElement" muted></video>

参考来源：https://blog.csdn.net/weixin_37340613/article/details/89215923

调用flv.js显示视频报错相关推荐

EasyCVR调用录像回看接口报错“查询文件失败”排查过程及解决方式
EasyCVR视频平台是TSINGSEE青犀视频开发的极具协议包容性的综合性视频融合云服务平台,支持RTSP.RTMP.GB28181.Ehome.HIKSDK等协议,目前更多协议仍在拓展当中.Eas ...
stata15无法识别调用plus外部命令，报错：command XXX is unrecognized如何解决？
stata15无法识别调用plus外部命令,报错:command XXX is unrecognized 如何解决? 解决办法: 查看stata文件夹下是否有profile.do文件: 如果有,可能是 ...
vue引入第三方js的方案报错
vue引入第三方js的方案报错< 问题描述 vue项目中引用一个外部js包 npm中没有响应的js下载所以只能通过外部引用使用方法如下: 1.首先是第三方js包存放的位置一定要放在 st ...
ajax文件上传报400,js ajaxfileupload.js上传报错的解决方法
相信大家在工作中经常用到文件上传的操作,因为我是搞前端的,所以这里主要是介绍ajax在前端中的操作.代码我省略的比较多,直接拿js那里的 $.ajaxFileUpload({ url:'www.cod ...
MyEclipse导入jquery-1.8.0.min.js等文件报错的解决方案
2019独角兽企业重金招聘Python工程师标准>>> MyEclipse导入jquery-1.8.0.min.js等文件报错的解决方案 MyEclipse导入jquery-1.8. ...
eclipse中对单独JS文件取消报错的处理
eclipse中对单独JS文件取消报错的处理 eclipse中js文件报错的情况,或许大家早已习以为常了,那么有什么好的方法可以将其忽略掉呢?如果你也在寻找此问题,那么本文或许可以帮助到你 - 忽略某 ...
解决nuxt.js新建项目报错的问题
解决nuxt.js新建项目报错的问题参考文章: (1)解决nuxt.js新建项目报错的问题 (2)https://www.cnblogs.com/blueroses/p/8651827.html 备 ...
解决64位进程调用32位库文件报错问题
解决64位进程调用32位库文件报错问题解决64位进程调用32位库文件报错问题大家集成的apk如果使用了第三方32位lib库文件的话请按如下方法修改Android.mk文件:库文件的拷贝方式为: L ...
you-get下载优酷视频报错：用户账户异常、请重新登录
you-get下载优酷视频报错:用户账户异常.请重新登录登录失败的含义: 虽然我下载的是不需要登录就可以观看的视频,但是还是提示登录失败,这里登录失败的含义是优酷账号登录失败.(而不是you-get ...

调用flv.js显示视频报错

代码

报错

原因

解决方法

调用flv.js显示视频报错相关推荐

最新文章

热门文章