Hangs on some URLs without errors

[hyperknot]

Hi, I'm using the following minimalistic snippet on a static page:

<video
      class="video-js vjs-fill vjs-big-play-centered"
      playsinline
      controls
      preload="auto"
      data-setup='{"responsive":true, "controlBar": {"pictureInPictureToggle": false}}'
    >
      <source class="video-source" type="video/mp4" />
    </video>
    <script>
      const vid = document.querySelector('.video-source')
//      vid.src = decodeURIComponent(location.hash.slice(1))  // normally URL is decoded from location.hash
       vid.src = 'https://twitter.com/shouldhaveaduck/status/1497234036514705412' // debugging
    </script>
    <script src="video.core.novtt.min.js"></script>
    <script>
      videojs.hook('error', function(player, err) {
        console.log(`player ${player.id()} has errored out with code ${err.code}\n\n${err.message}`);
      });
    </script>

My problem is that it doesn't detect errors on many URLs, for example on the ones which are blocked by CORS.

I'd like to detect unplayable file types and show a warning.

For example, for the following URL it works: https://example.com/, it returns error code 4.
But it doesn't work for https://twitter.com/shouldhaveaduck/status/1497234036514705412 for example.

Is it because I'm using the <video> embed method? Sometimes, when I load the page Chrome already tells me that. But sometimes it does not. But playing never happens, the player is just waiting with the circle animation forever.

Cross-Origin Read Blocking (CORB) blocked cross-origin response

[hyperknot]

I found a solution, it was as simple as using <video-js> tags in the above example. Somehow <video> tags don't work reliably.