When I have a simple HTML page with a <video> tag and you watch network requests in Chrome DevTools or similar, it does a single HTTP request. The video clip is only a few seconds long. Nice and clean!
When I use the same <video> tag markup in React to update the video source URL, it usually triggers 3 HTTP requests. The video works, but it’s no longer a single HTTP request. Its using ranges and so on.
I assume the way the DOM is updated changes the way the <video> element behaves.
My problem is in a complex application I am getting the occasional ‘cancel’ of a HTTP request to the image URL, and then some timing issue seems to sneak in and it can have multiple HTTP requests to the video URL in parallel. This is legal to do, but unfortunately triggers a Windows Chrome bug that results in error messages and the video does not play.
Is there a way to update the DOM using React to not trigger multiple HTTP requests? I was guessing React is incrementally building up the DOM element one attribute at a time, causing the player to pause and restart as it detects attribute changes that might change how the video is rendered. I was wondering if there was a funky way to update the DOM so <video> tags work more reliably (without the multiple HTTP requests for the video element).