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

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