Chrome not re-requesting source when running video.load()-CodePudding

My chrome browser doesn't seem to re-request the videos source once you run video.load().

<video  controls muted autoplay>
    <source src="/createReadStream" type="video/mp4">
</video>

<script>
    const video = document.querySelector('.player');

    video.onended = () => video.load();
</script>

Im changing the video that is sent back from the server every 10 seconds and I just need the browser to re-request the video after it has played it, which works fine like this in Firefox but not in Chrome as it isn't re-requesting the source. I've found this through the dev-tools networking tab as there is no new request going out in Chrome but there is in Firefox

CodePudding user response：

It has been observed elsewhere that Chrome will not re-request a video file if the name has not changed - see this question for example and there were some Chromium issues I believe too: After changing a Video, Chrome keeps playing the old one

One way to verify this is the issue and also to workaround the problem is to either change the name each time, by appending a number for example, and have your server just delete the appended number.

Alternatively, and easier if it works for you, you may be able to just add a random query parameter, or a sequential number, to the URL which your server can just ignore - e.g.:

<video  controls muted autoplay>
    <source src="/createReadStream?_n=000001" type="video/mp4">
</video>

CodePudding user response：

Untested code, but this might "trick" the Chrome browser. Let me know how it goes:

<video  controls muted autoplay>
    <source src="/createReadStream" type="video/mp4">
</video>

<script>

const video = document.querySelector('.player');
video.onended = () => resetSource();

function resetSource()
{
    //# first set a dummy "src" value... then set correct URL
    video.src=""; video.src="/createReadStream";
    video.load(); video.play();
    
}
    
</script>