Добавление списка воспроизведения видео в текущий видеопроигрыватель с использованием html css и javascript

Question

Так что в основном я использую видео плеер js с рекламой. Я хочу добавить плейлист к этому плееру, используя его, чтобы он охватывал видеоплеер, но я также хотел бы, чтобы видео воспроизводилось через реальный проигрыватель js с идентификатором my-video. Сейчас он показывает плейлист, но я хочу изменить способ его воспроизведения на my-video вместо открытия новой веб-страницы.

Вот ссылка: http://bluntrollers.co/Live%20Stream.html

Вот код:

    <video id="my-video" class="video-js vjs-default-skin"
    controls preload="auto" width="640" height="315"
    poster="/Images/bluntrollerscobanner.png"
    data-setup='{
      "plugins": {
      "vastClient": {
        "adTagUrl": "https://www.movcpm.com/watch.xml?key=9ccb16032b77eabffbe9fbf2194c0464",
        "adCancelTimeout": 5000,
        "adsEnabled": true
        }
      }
    }'>
  <source src="/VidUploads/Natural%20-%20The%20Future%20%28Prod.%20by%20MURDA%20TAPE%29.mp4" type='video/mp4'/>
  </video>
  <figcaption>
        <a href="/VidUploads/Natural%20-%20Down%20To%20Hit%20Them%20Licks%20%28Music%20Video%29.mp4"><img src="/Images/hitthemlicksthumb.jpg" alt="Hit Them Licks by Natural"></a>  
    </figcaption>
</figure>
<script type="text/javascript"> 
    var video_player = document.getElementById("my-video"),
        links = video_player.getElementsByTagName('a');
    for (var i=0; i<links.length; i++) {
        links[i].onclick = handler;
    }
    function handler(e){
        e.preventDefault();
        videotarget=this.getAttribute("href");
        filename=videotarget.substr(0,videotarget.lastIndexOf('.'))||videotarget;
        video=document.querySelector("#video_player video");
        video.removeAttribute('poster');
        source=document.querySelectorAll("#video_player video source");
        source[0].src=filename + ".mp4";
        video.load();
        video.play();
}
</script>```

Answer 1

links = video_player.getElementsByTagName('a');

Нет тега anchors в video

Также измените селектор на тег video (см. Комментарии во фрагменте):

<video id="my-video" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="315"
poster="/Images/bluntrollerscobanner.png" data-setup='{      "plugins": {      "vastClient": {"adTagUrl":"https://www.movcpm.com/watch.xml?key=9ccb16032b77eabffbe9fbf2194c0464",        "adCancelTimeout": 5000,        "adsEnabled": true        }      }   }'> <!-- adding new lines in attribute value is not valid -->
  <source src="/VidUploads/Natural%20-%20The%20Future%20%28Prod.%20by%20MURDA%20TAPE%29.mp4" type='video/mp4'/>
  </video>
  <figcaption>
    <a href="/VidUploads/Natural%20-%20Down%20To%20Hit%20Them%20Licks%20%28Music%20Video%29.mp4"><img src="/Images/hitthemlicksthumb.jpg" alt="Hit Them Licks by Natural"></a>  
</figcaption>
</figure>
<script type="text/javascript"> 
 //   var video_player = document.getElementById("my-video"),
  var  links = document.querySelector("figcaption").getElementsByTagName('a'); // anchors are in figcaption tag
for (var i=0; i<links.length; i++) {
    links[i].onclick = handler;
}
function handler(e){
    e.preventDefault();
    videotarget=this.getAttribute("href");
    filename=videotarget.substr(0,videotarget.lastIndexOf('.'))||videotarget;
    video=document.querySelector("video"); // select video tag to perform changing operations
    video.removeAttribute('poster');
    source=document.querySelectorAll("video source"); //again select video tag
    source[0].src=filename + ".mp4";
    video.load();
    video.play();
}
</script>