'<video> blacks out screen shortly when stopping on Firefox

I have a simple webpage with an HTML 5 <video> element and simple Javascript for creating links to switch between videos and for making each video stop at predetermined times.

It appears to work fine on Chrome 94, Edge 99, and Vivaldi 4.3 (I am on Windows 10).
In my Firefox 91.7esr, however, when the video stops (at a stop time or at the end), the screen will often black out for about 1 second. After that, everything continues normally.
It is the entire screen that blacks out, not only the Firefox window or the <video> element on the page.

This happens irregularly about one third of the times (and much less frequently also when the video starts).
Why?

The web page and the videos are local files.
The effect occurs no matter whether hardware acceleration is on or off in Firefox.
It happens also after a reboot.

Here is the respective code:

<!DOCTYPE html>
<html>
  <body>
    <video id="pomalevi-video" height=540 controls>
       Your browser does not support the video tag.
    </video>
    <br>
    <button onclick="pmlv_speed(pmlv_video, 1.0)">1.0x</button>
    <button onclick="pmlv_speed(pmlv_video, 1.7)">1.7x</button>
    <button onclick="pmlv_speed(pmlv_video, 2.0)">2.0x</button>
    <p onclick='pmlv_switch_to(1)'>start video 1</p>
    <p onclick='pmlv_switch_to(2)'>start video 2</p>

    <script>
      var pmlv_video = document.getElementById("pomalevi-video")
      var pmlv_video_idx = 1
      var pmlv_stoptimes = [[5.1, 8.5, 11.9], [17.0, 20.4]]  // list of list of floats: stop times in seconds

      function pmlv_pause_at_stoptimes() {
          for (var t of pmlv_stoptimes[pmlv_video_idx-1]) {
            if(pmlv_video.currentTime >= t && pmlv_video.currentTime <= t+0.5) {
              pmlv_video.pause()
              pmlv_video.currentTime += 0.5
            }
          }
      }

      function pmlv_speed(obj, factor) {
        obj.playbackRate = factor
      }

      function pmlv_switch_to(i, play=true) {
        pmlv_video.src = "v" + i + ".mp4"
        pmlv_video_idx = i  // select the relevant stoptimes
        pmlv_video.load()
        if (play) {
          pmlv_video.play()
        }
      }

      pmlv_video.addEventListener("timeupdate", pmlv_pause_at_stoptimes)
      pmlv_switch_to(1, false)
    </script>
  </body>
</html>

firefox html5-video

Solution 1:^[1]

The problem has nothing to do with my HTML or Javascript. Rather, it appears to be a hardware issue:

The problem occurred on an external monitor that is connected to my notebook via, first an Icy Box IB-DK2403-C docking station using USB-C and from there via HDMI.
When I play the video on the internal screen of the notebook, the problem still occurs, but what is blacked out is still the external monitor, not the internal one having the Firefox window.
If I connect the monitor to the notebook's HDMI output directly, rather than through the docking station, the problem disappears.
Furthermore, the setup also appears to be sensitive to audio start/stop as well: I have seen the screen black out when Windows notification sounds were played.
But the video still produces the effect with the sound turned off in the <video> element's controls, so apparently both audio and video starting or stopping can produce a blackout. Weird.
Why the other browsers are immune to the problem? No idea. (Hints welcome!)

The reason why I did not understand this more quickly is that I started testing my application only one day after I had started using the docking station. I had not yet noticed the blackouts that occurred at other times.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Lutz Prechelt

'<video> blacks out screen shortly when stopping on Firefox

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]