如何解决加载超过 10 个 mp4 视频后,Chrome 浏览器会随机闪烁屏幕
我提供了一项服务,可在将鼠标悬停在文本上时播放 mp4 视频(通过更改 video 标签的 src 属性)。
在网站上快速随机地悬停后,浏览器会闪烁部分屏幕或全部屏幕,并且行为异常。 令人困惑的是,这个问题发生在 Chrome、Edge 和 Opera 浏览器上,但不会发生在 Firefox 上。
function PlayVideoAfterHover(blobVideo){
var b = $("#redo").clone();
if (b == undefined || $(b)[0] == undefined) {
$("body").prepend(' <video id="redo" width="100%" height="100%" disablePictureInPicture autoplay="true" muted playsinline preload="none" type="video/mp4"></video> ');
b = $("#redo").clone();
}
$(b).attr('id','tempVid');
try {
if ($("#redo").attr('src') != '')
{
var oldURL = $("#redo").attr('src');
try {
URL.revokeObjectURL(oldURL);
$("#redo").removeAttr('src');
} catch (e) {
}
}
$(b).attr('src',window.URL.createObjectURL(blobVideo));
} catch (e) {
console.log(e);
}
$("body").append(b);
$(b).hide();
$(b)[0].onended = function () {
URL.revokeObjectURL(this.src);
playNext();
}
$(b)[0].onloadeddata = function () {
StopIdle();
$("#redo")[0].loop = IsEnd;
$(b)[0].loop = IsEnd;
$("#redo").attr('id','old_redo');
$(b).attr('id','redo');
$(b).show();
$(b).css('z-index',(9999) + cAvIdx);
cAvIdx = cAvIdx + 1;
$(b).attr('muted','true');
PlayVideo($(b)[0]);
//console.log('next time');
if (['iPad','iPhone','iPod'].indexOf(navigator.platform) < 0) {
$("#old_redo").remove();
}
};
}
function PlayVideo(video) {
try {
if (!IsPlaying(video)) {
video.play();
} else {
setTimeout(function () {
PlayVideo(video);
},100);
}
} catch (e) {
console.log('error in play:' + e.message);
}
}
function IsPlaying(video) {
return video.currentTime > 0 && !video.paused && !video.ended
&& video.readyState > video.HAVE_CURRENT_DATA;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。