Проблемы с кодом для простого видеоплеера (JS, HTML, PHP)

Question

У меня проблемы с работой моего кода. Я бы использовал любой старый видеоплеер, но мне нужно, чтобы видео загружалось из определенной папки c, их тысячи, и их постоянно добавляется.

PHP может загрузить список файлов и отобразить их в тегах, но когда я нажимаю / нажимаю на ссылки, ничего не происходит (поэтому, вероятно, проблема с моим JS). Я попробовал более простой способ, без JQuery, но это тоже не сработало.

<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>

Я разместил свой код на https://pastebin.com/wS3LBPZw

Любая помощь будет с благодарностью !!!

Answer 1

Разве вы не пытаетесь добавить новый скрипт?

У вас есть:

<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>

ссылка sr c жестко закодирована и такая же, как ссылка в вашем исходном теге. Попробуйте назначить ссылку на ссылку data-video;

Что-то вроде этого:

<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>

Редактировать: удалить ссылки 1. поместить ссылки в контейнер, 2. добавить кнопку ВНЕ из контейнер ссылок, 3. добавьте событие click для кнопки, чтобы удалить содержимое контейнера ссылок

<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>

Ознакомьтесь с этими вопросами по stackoverflow для получения дополнительной информации. изменение источника на html5 видео теге Как изменить видео sr c с помощью jQuery?