javascript – How to "refresh" after updating the new video?

Question:

In my view, I have an old video, when I "upload" new video, I want to automatically reload a new video after "uploading".

Here is the View code:

<div id="embed_video" class="embed-responsive embed-responsive-16by9">
    <video class="embed-responsive-item" controls>
        <source src="/Files/GetVideo?id=2" type="video/mp4">
        Seu navegador não suporta vídeo em HTML5.
    </video>
</div>

Here's Javascript code:

 $('#embed_video video').get(0).load();

JavaScript code only works the first time, the second time the video doesn't update, it stays as old.

Follow Controller code:

public ActionResult GetVideo(int id)
{
    using (var ctx = new Entities())
    {
        var result = ctx
            .Video
            .FirstOrDefault();    
        byte[] video_byte = result.Video;    
        return new RangeFileContentResult(video_byte, "video/mp4", "NomeDoArquivo.mp4", date);
    }
}

Any solution ?

Thank you in advance.

Answer:

This is because it's cached, as it's probably the same name, one way to solve it is to use a random querystring (which doesn't repeat itself, like something based on timestamp ).

However first you need to get currentSrc ( https://html.spec.whatwg.org/multipage/media.html#dom-media-currentsrc ), something like:

var videourl = $('#embed_video video').prop("currentSrc");

Then clear the querystring:

videourl = videourl.replace(/\?(.*?&)?_=\d+$/, "?$1");

And apply the new:

videurl = videorl + "_=" + Date.now();

You can do a function like this:

function updateVideo(query, play) {
    var el = $(query).get(0); //usei o .get para ficar mais "limpo" o código, mas o resultado é indiferente no final

    if (!el) alert('Não encontrado'); return;

    var videourl = el.currentSrc;

    videourl = videourl.replace(/\?(.*?&)?_=\d+$/, "?$1");
    videourl = videourl + (videourl.indexOf("?") !== - 1 ? "&" : "?");
    videourl = videourl + "_=" + Date.now();

    el.pause();
    el.src = videourl;

    if (play) el.play(); //o play já executa o load
}

Or use would be something like:

updateVideo('#embed_video video', true);

Or without autoplay:

updateVideo('#embed_video video', false);
Scroll to Top
AllEscort