调用flv.js显示视频报错

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

代码

/* 隐藏播放、暂停等各类播放器功能按钮 */
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)

调用flv.js显示视频报错_第1张图片

原因

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

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

解决方法

给video标签添加muted属性:

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

你可能感兴趣的:(javascript,chrome)