How to use popcorn to a certain video source?

Question

So i got an interactive video player with multiple video sources and besides that I have a "box" which I use to display some text based on every video source to explain each video.

Now I've got a problem, I can't seem to find a solution to connect popcorn footnote to a certain video source, either way I get it in every single video or in none.

Here's popcorn code:

 document.addEventListener("DOMContentLoaded", function () {

         var pop = Popcorn("#uvod"); 

         pop.footnote({
           start: 2,
           end: 12,
           text: "<br>Lorem ipsum...",
           target: "video-text"
         });
         pop.play();
      }, false);

Here's video sources (+two buttons that leads to another video when first one is finished):

<video id="uvod" class="uvod" src="uvod.mp4" muted></video>
<video id="dominikanski" class="dominikanski" value="vid2" src="dominikanski-mesto.mp4" style="display:none"></video>
<video id="busnazel" value="vid3" src="busna-zeleznica.mp4" style="display:none"></video>
<video id="knjiznica" value="vid4" src="knjiznica.mp4" style="display:none"></video>
<video id="termeprim" value="vid5" src="terme-primus.mp4" style="display:none"></video>
<video id="grad" value="vid6" src="grad-celota.mp4" style="display:none"></video>

<button class="gumb-podlaga" id="gumb-podlaga" href="#"  onClick="javascript:vidSwap('dominikanski-mesto.mp4'); return false;">Staro mestno jedro</button>
<button class="gumb-podlaga1" href="#" onClick="javascript:vidSwap('grad-celota.mp4'); return false;">Grad</button>

Here is video swaping:

function vidSwap(vidURL) {
  var myVideo = document.getElementsByTagName('video')[0];
  myVideo.src = vidURL;
  myVideo.load();
  myVideo.play();
}

I'm getting text shown on every video source even thought I declare a popcorn to a certain video id #uvod. Any ideas ? What am I missing?

Answer 1

Well I've came up with solution that works great.

I've changed variables to english so it would be easier to understand.

Changed popcorn part to:

document.addEventListener("DOMContentLoaded", function () { 

 var video1= document.getElementsByTagName('video')[0];
 var video2 = document.getElementsByTagName('video')[1];
 var pop = Popcorn(video1);
 var pop1 = Popcorn(video2);

     pop.footnote({
       start: 2,
       end: 12,
       text: "<br>Welcome.....",
       target: "video-text"
     });

   pop1.footnote({
       start: 2,
       end: 12,
       text: "<br>lorem ipsum ...",
       target: "video-text"
     });  
  }, false);

Video sources to:

<video id="video1" class="video1" src="video1.mp4" autoplay muted></video>
<video id="video2" class="video2" src="video2.mp4" style="display:none"></video>
    <button class="button1" id="button1" href="#"  onClick="javascript:getVideo1();">Change video</button>

And video swapping to:

var video2 = document.getElementsByTagName('video')[1];
var video1 = document.getElementsByTagName('video')[0];
var but1= document.getElementById("button1");

but1.onclick = function getVideo1(){
    video1.style.display = "none";
    but1.style.display = "none";
    pop.disable('footnote');
    pop1.enable('footnote');
    video2.style.display = "block";
    video2.src = "video2.mp4";
    video2.load();
    video2.play();
}