Issues with code for simple video player(JS,HTML,PHP)

Question

I'm having issues getting my code working. I would use any old video player but i need the videos to be loaded from a specific folder, there's thousands of them, and there are more being added all the time.

PHP is able to load the list of files and display them in the tags, but when I click/tap on the links, nothing happens(therefore likely an issue with my JS). I tried a simpler way, without JQuery but that didn't work either.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

<!-- this is your video element -->
<video width="400" controls>
    <!-- your video source, verify so that type is accurate -->
    <source id="vidsrc" src="../media/0-11970-20200228064830.mp4" type="video/mp4">
</video>

<?php
//fetch and list all the files found in the video folder. Make sure to change the path to your video folder.
foreach(glob('../media/*') as $video){
    echo '- <a href="#" id="isVideo" class="isVideo" data-video="'.$video.'">'.$video.'</a><br/>';
}
?>

<!--<script>
  document.getElementById('isVideo').onclick = function(){
    document.getElementById('vidsrc').setAttribute('src', 
    $(this).data('video'));
  }
</script>-->

<script type="text/javascript">
  //jQuery code that will trigger when you click on one of the links displayed by the PHP script
  $('.isVideo').on('click', function() {
    //this will change the video source to the chosen video
    $('#vidsrc').attr('src', '../media/0-11970-20200228064830.mp4');
    return false;
  });
</script>

I posted my code at https://pastebin.com/wS3LBPZw

Any help would be greatly appreciated!!!

Answer 1

Shouldn't you be trying to add a new script?

You have:

<script type="text/javascript">
//jQuery code that will trigger when you click on one of the links displayed by the PHP script
$('.isVideo').on('click',function(){
   //this will change the video source to the chosen video
   $('#vidsrc').attr('src','../media/0-11970-20200228064830.mp4');
   return false;
   });
</script>

the link src link is hard coded and is the same as the one in your source tag. Try to assign the clicked link data-video;

Something like this:

<script type="text/javascript">
$('.isVideo').on('click',function(event){
   var video_link = $(event.target),
       new_source = video_link.attr('data-video');
   //this will change the video source to the chosen video
   $('#vidsrc').attr('src', new_source);
   // maybe console.log(new_source); to see if a new value was picked up
   // and I think .load();
   $('#vidsrc').load();
   // or $('#vidsrc')[0].load();
   return false;
   });

   // to remove the clicked link
   event.target.remove();
   // unless the link has other elements than those elements have to have the css property pointer-events:none;
</script>

Edit: to remove links 1. put the links in a container, 2. add a button OUTSIDE of the links container, 3. add a click event on button to remove the contents of the links container

<div id='my-links'>
<?php
//fetch and list all the files found in the video folder. Make sure to change the path to your video folder.
foreach(glob('../media/*') as $video){
    echo '- <a href="#" class="isVideo" data-video="'.$video.'">'.$video.'</a><br/>';
}
?>
</div>
<a id="links-clear" style="cursor:pointer;">CLEAR</a>

<script>
 var clear_button = document.getElementById('links-clear');
 if(clear_button != null){
   clear_button.addEventListener('click', function( ){
   var links_container = document.getElementById('my-links');
   if(links_container != null){
     links_container.innerHTML = '';
   }
  });
 }
</script>

Check out these questions on stackoverflow for more inspiration. changing source on html5 video tag How do you change video src using jQuery?