I have a list of mp4 movies on the page in a li list and there are 1000 links that open directly in the browser.
The issue is that I created an iframe that receives the links it will target plus some links it starts a mp4 download.
So I wanted to use instead of the iframe the html5 video tag that works and displays the movie without downloading.
I do not want to create 1000 video tags, but only one that only changes the src attribute according to the clicked link.
In summary you would have to do as shown in the code below.
1 Define all links with the same class ;
2nd Place a single id for each link, as shown in the example below;
3º Insert case for each link, setting the src address of each video.
$('.linkvideo').click(function(){
var link = $(this).attr('id');
switch(link){
case 'link1':
$('#fonteVideo').attr('src', 'https://www.w3schools.com/tags/movie.mp4');
$("#divVideo video")[0].load();
break;
case 'link2':
$('#fonteVideo').attr('src', 'https://www.w3schools.com/html/mov_bbb.mp4');
$("#divVideo video")[0].load();
break;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><ahref="#" id="link1" class="linkvideo">Link1</a><br><br>
<a href="#" id="link2" class="linkvideo">Link2</a><br><br>
<div id="divVideo">
<video width="320" height="240" controls>
<source id="fonteVideo" src="">
</video>
</div>