Потоковое видео в реальном времени становится черным, когда на веб-странице нет активности

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>

При размещении вышеуказанной точки останова на теге video, строка #A вызывается из кода ниже из hls.js

 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 () функция называется? При размещении точки останова на теге видео, как указано выше, строка #A (this.media.removeAttribute('src');) называется.