팝콘을 특정 비디오 소스에 사용하는 방법은 무엇입니까?

Question

그래서 여러 비디오 소스가있는 대화 형 비디오 플레이어가 있고 그 외에도 각 비디오를 설명하기 위해 모든 비디오 소스를 기반으로 일부 텍스트를 표시하는 데 사용하는 "상자"가 있습니다.

이제는 문제가 생겼습니다. 특정 비디오 소스에 팝콘 각주를 연결하는 솔루션을 찾을 수없는 것 같습니다. 모든 비디오 또는 아무 것도 받아들이지 않습니다.

여기에 팝콘 코드입니다 : 여기

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

     var pop = Popcorn("#uvod"); 

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

의 비디오 소스 (+ 첫 번째가 완료되면 다른 비디오로 연결 두 개의 버튼) :

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

: 여기

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

비디오 swaping입니다

특정 비디오에 팝콘을 선언했다고 생각하는 모든 비디오 소스에 텍스트가 표시됩니다. d #uvod. 어떤 아이디어? 내가 뭘 놓치고 있니?

Answer 1

글쎄 나는 훌륭한 솔루션을 생각해 냈습니다.

변수를 영어로 변경하여 이해하기 쉽습니다.

변경된 팝콘 부분 :

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