By clicking on a link change within the video tag the value of being to the link clicked

Question

I have a list of mp4 movies on the page in a list li are 1000 links that open directly in the browser.

The point is that I created an iframe that receive the links will target a few links it starts a download of mp4.

So I wanted to use instead of iframe the Html5 video tag that works and displays the movie without downloading.

Only I don’t want to create 1000 video tags but only one that changes the src attribute according to the clicked link.

Answer 1

In summary you would have to do as demonstrated in the code below.

1º Define all links with the same class;

2nd Place a id unique to each link, as shown in the example below;

3rd Insert the case for each link, setting the address src 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>

<a href="#" 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>