javascript - 使用 html css 和 javascript 将视频播放列表添加到当前视频播放器

Question

所以基本上我使用带有广告的 videojs 播放器。我想使用它向该播放器添加一个播放列表，以便它环绕视频播放器，但我也希望视频通过 ID 为 my-video 的实际 videojs 播放器播放。它当前显示播放列表，但我想更改它播放我的视频的方式，而不是打开新网页。

这是链接: 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');

video 标记中没有 anchor

还将选择器更改为 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>