YouTube 재생 목록 재생 중 새 동영상이 시작될 때 이벤트 트리거

Question

YouTube 재생 목록이 있습니다. 모든 것이 잘 작동합니다. 여기에 코드입니다 :

<div id="player"></div> 
<script> 
    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_api"; 

    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    var done = false; 
    var player; 
    function onYouTubePlayerAPIReady() { 
     player = new YT.Player('player', { 
      width: '100%', 
      height: window.innerHeight-120+'px', 
      vq: 'hd720', 
      videoId: 'ZnToyoZus74', 
      playerVars: { 
       'autoplay': 1, 
       'loop': 1, 
       'showinfo': 0, 
       'controls': 0, 
       'playlist': [ 
        'Glr36uh7Uls,Mx-cOLPqieg,C9uA-LFJS3Q,mKB4j3Lqa3w,tLmLXEShHT8' 
       ] 
      } 
     }); 
    } 
</script> 

그러나, 난 그냥 그 아래에 현재 재생중인 비디오에 관한 맞춤형 정보를 표시 할 (에 <div>을 분리하지만, 영상을 중첩되지 않음). 동영상이 시작되면 첫 번째 동영상의 정보가 포함 된 <div>이 표시되고 동영상이 끝나면이 div는 사라집니다. 두 번째 동영상 재생이 시작되면 두 번째 동영상에 대한 정보가 포함 된 다른 <div>이 표시됩니다.

<div> 요소에는 비디오의 id을 파일 이름으로 사용하여 ZnToyoZus74.html 인 HTML 파일이 포함됩니다.

• ZnToyoZus74
• Glr36uh7Uls
• Mx-cOLPqieg
• C9uA-LFJS3Q
• mKB4j3Lqa3w
• tLmLXEShHT8
:이 예에서
나는 다음과 같은 ID를 사용하고 있습니다

Answer 1

솔트!

이 단지의 경우 누군가가 같은 대답을 찾고, 마지막 코드 :

<div id="player" style="float:right;"></div> 
<script> 
    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
    var done = false; 
    var player; 
    function onYouTubePlayerAPIReady() { 
    player = new YT.Player('player', { 
    width: '100%', 
    height: window.innerHeight-110+'px', 
    vq: 'hd720', 
    videoId: 'K7XbJ0XLXPY', 
    playerVars: { 'autoplay': 1, 'loop': 1, 'showinfo': 0, 'controls': 0, 'playlist':['UiUZOo1b6m0,w0Sm9tRJDDA']}, 
    events: { 
    'onReady': onPlayerReady, 
    'onStateChange': onPlayerStateChange 
      } 
     }); 
    } 
    function onPlayerReady(evt) { 
     evt.target.playVideo(); 
    } 
    function onPlayerStateChange(evt) { 
     if (evt.data == YT.PlayerState.PLAYING) { 
      var url = evt.target.getVideoUrl(); 
      var match = url.match(/[?&]v=([^&]+)/); 
      var videoId = match[1]; 

      document.getElementById("myiframe").src='videosinfo/'+videoId+'.html'; 
     } 
    } 
</script> 
<iframe name="myiframe" id="myiframe" width="100%" height="200px" allowtransparency=true frameborder="0" ></iframe>