加载超过 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 (将#修改为@）