video.js视频播放报错样式自定义
/将错误信息不显示。// 自定义显示方式。content: '取流失败';//自定义视频播放器报错样式。
·
video.js视频播放报错默认样式为:

正常情况下当player实例创建完成后,可以再videoJS提供的错误处理方法中使用以下方法自定义错误处理逻辑:
【解决方式】
let player = videojs(video, {}, function(){
this.on('error', function(){
player.errorDisplay.close(); //将错误信息不显示
// 自定义显示方式
})
}
);
但是调试发现,当播放器报错时,并未执行error处理函数,当碰到该问题时可以使用第二种方法,即CSS样式覆盖,我们审查元素可以看到,当播放器错误时,videoJS会在DOM树上动态添加一个类名如下的默认显示内容:

我们可以通过样式覆盖来实现最终效果:

SCSS代码如下:
//自定义视频播放器报错样式
.vjs-error .vjs-error-display {
width: 100%;
height: 100%;
background-color: rgba(29, 29, 61, 0.6);
background-image: url("../../../assets/img/icon_no_video.png");
background-repeat: no-repeat;
background-position: center center;
&:before {
display: none;
}
&:after {
color: #8483c5;
content: '取流失败';
font-family: PingFangSC, PingFangSC-Regular;
font-size: 20px;
left: 0;
margin-top: -0.5em;
position: absolute;
text-shadow: 0.05em 0.05em 0.1em #000;
text-align: center;
top: 75%;
vertical-align: middle;
width: 100%;
}
.vjs-modal-dialog-content {
display: none;
}
}
希望能对您有所帮助,谢谢!
更多推荐




所有评论(0)