Adding video playlist to current video player using html css and javascript-ThrowExceptions

Exception or error:

So basically I am using a videojs player with ads. I want to add a playlist to this player using so it wraps around the video player, but I would also like the videos to play through the actual videojs player with the id my-video. It’s showing the playlist currently but I want to change the way it plays to my-video, instead of opening a new webpage.

Here is the link:
http://bluntrollers.co/Live%20Stream.html

Here is the code:

    <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>```
How to solve:
links = video_player.getElementsByTagName('a');

There are no anchors in video tag

Also change selector to video tag (see comments in snippet):

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

Leave a Reply

Your email address will not be published. Required fields are marked *