当网页上没有任何活动时，直播视频会黑屏

Question

我正在开发一个网站，其中有很多实时流媒体视频。浏览器处于非活动状态一定时间（分钟）后， 几个实时流媒体视频会变黑，必须刷新页面或向上/向下滚动才能使其正常工作。

用于在前端生成实时流视频的 HTML 代码是：

<div class="h264-live-view embed-responsive embed-responsive-16by9" data-media-type="video" data-media-playback="play">
   <video poster="./images/000000-0.png" 
    src="./geb5ac04-8f4e-462a-5fef-abc"></video> // placed a break-point here
</div>

在视频标记上方放置断点时，从hls.js中的以下代码调用 line#A

 if (this.media) {
    URL.revokeObjectURL(this._objectUrl);

    // clean up video tag src only if it's our own url. some external libraries might
    // hijack the video tag and change its 'src' without destroying the Hls instance first
    if (this.media.src === this._objectUrl) {
      this.media.removeAttribute('src');   // line#A
      this.media.load();
    } else {
      logger["b" /* logger */].warn('media.src was changed by a third party - skip cleanup');
    }
  }

我在 hls.js 中使用的代码位于https://video-dev.github.io/hls.js/stable/api-docs/file/src/controller/buffer-controller.js.html

问题陈述：

我想知道当网页上几分钟没有活动时直播视频黑屏的原因是什么以及如何修复它。

我们有什么办法可以修复这个错误吗？是否有任何代码可以覆盖以修复此错误？另外问题是为什么onMediaDetaching ()调用函数？如上所述在视频标签上放置断点时，(this.media.removeAttribute('src');)将调用 line#A。