Reload video element with external link

Question

Follow code jQuery:

var el = $('#embed_video video').get(0);
var urlVideo = 'https://res.cloudinary.com/matheus/video/upload/ferrari.mp4';
urlVideo = urlVideo + '?t=' + new Date().getTime();
//urlVideo = https://res.cloudinary.com/matheus/video/upload/ferrari.mp4?t=197325475
el.pause();
el.src = urlVideo;
el.load();
el.play();

Follows HTML:

<div id="embed_video" class="embed-responsive">
    <video class="embed-responsive-item" controls controlsList="nodownload">
        <source src="" type="video/mp4">
        Seu navegador não suporta vídeo em HTML5.
    </video>
</div>

I use API’s Cloudinary. I upload a video on the server side with the same URL, but with different video. With the above code not working, I’m trying to do a "refresh" on the video element, but the old video remains the same.

When I press "F5" or refresh page, the video works as expected, it already changes the video loaded in the cloud (cloudinary).

Any idea how to reload a video using jQuery or Javascript?

Answer 1

The browser caches the video, so it’s no use just changing the src, it is necessary to resinserir the tag video whole (with the new src). Would look like this:

var urlVideo = 'https://res.cloudinary.com/matheus/video/upload/ferrari.mp4?'+ new Date().getTime();

var tag_video = '<video class="embed-responsive-item" controls controlsList="nodownload">'
+'<source src="'+ urlVideo +'" type="video/mp4">'
+'Seu navegador não suporta vídeo em HTML5.'
+'</video>';

$('#embed_video').html(tag_video);
$('#embed_video video').get(0).play();

Since you are replacing one HTML with another, you do not need the functions .pause() and .load().