1

Segue código 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();

Segue 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>

Eu uso API da Cloudinary. Eu faço upload de um vídeo no lado servidor com o mesmo URL, porém com vídeo diferente. Com o código acima não está funcionando, estou tentando fazer um "refresh" no elemento vídeo, mas o vídeo antigo permanece o mesmo.

Quando aperto "F5" ou atualiza página, o vídeo funciona como esperava, ele já muda o vídeo carregado na nuvem (cloudinary).

Alguma ideia de como recarregar um vídeo usando jQuery ou Javascript?

1 Resposta 1

1

O navegador guarda em cache o vídeo, portanto não adianta alterar apenas o src, é preciso resinserir a tag video toda (com o novo src). Ficaria assim:

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();

Como você está substituindo um HTML por outro, não precisa das funções .pause() e .load().

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .