repeating content informed by .html ()

2

I inform 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 path and name of the video:

 $('#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 table row is a different video. If I click on a video and close soon then the next video is the same! As if jquery did not implement the "data-video". I hope what I said is understandable.

Within the loop I enter the address by means of the data-video.

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

Thank you guys! :)

    
asked by anonymous 22.08.2018 / 18:50

1 answer

5

If you only change source , the browser caches the first video shot. What you should do is change the entire video tag.

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);
});
    
22.08.2018 / 19:21