Javascript 如何将爆米花用于某个视频源？

所以我得到了一个具有多个视频源的交互式视频播放器，除此之外，我还有一个“框”，用于显示基于每个视频源的一些文本来解释每个视频

现在我遇到了一个问题，我似乎找不到一个解决方案将爆米花脚注连接到某个视频源，无论是在每一个视频中还是在没有视频中

以下是爆米花代码：

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

         var pop = Popcorn("#uvod"); 

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

---

我在每一个视频源上都显示了文本，即使我声明了一个爆米花到某个视频id

#uvod

。有什么想法吗？我遗漏了什么？

我想出了一个非常有效的解决方案

我把变量改成了英语，这样更容易理解

将爆米花部分更改为：

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

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

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

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();
}