repetition of content informed by . html()

Question

I inform through JQUERY the link to open a video in a modal

<video width="100%" height="400" id="vid_video" controls="controls" style="padding: 0 10px 0 10px">
<!-- AQUI DENTRO VAI O <source></source> vindo do JQUERY -->
</video> 

JQUERY passes the video path and name:

 $('#visualizarVideo').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var vid_video = button.data('video') //captura o valor do data-video
$("#vid_video").html('<source src="../upload/'+vid_video+'" type="video/mp4"></source>' );
//vid_video recebe por exemplo video.mp4

beauty, it’s working. But I have a table with information coming from the BD by a loop, and each row of the table is a different video. If I click on a video and close right away, the next video is the same! As if jquery did not implement "data-video". I hope what I said is understandable.

Inside the loop I inform through the data-video the address.

<li><a href="#" data-video="<?php echo $videos->vid_video ?>" data-toggle="modal" data-target="#visualizarVideo" >Visualizar</a></li>

Personal thank you! :)

Answer 1

If you just change the source, the browser caches the first video run. What you should do is change the tag video all.

div that will receive HTML:

<div id="vid_video"></div>

Event:

$('#visualizarVideo').on('show.bs.modal', function (event) {
   var button = $(event.relatedTarget);
   var vid_video = button.data('video');
   var vid_html = '<video width="100%" height="400" controls="controls" style="padding: 0 10px 0 10px">'
   +'<source src="'+vid_video+'" type="video/mp4"></source>'
   +'</video>';
   $("#vid_video").html(vid_html);
});