youtube iframe api 동영상을 일시 중지하지 않습니다.

Question

현재 다양한 iframe youtube 소스가 포함 된 슬라이더가있는 페이지에서 작업하고 있습니다.

슬라이더의 "다음"버튼을 눌렀을 때 JS가 비디오를 일시 정지 시키려고합니다. 나는 API에 따라 모든 것을 설정했다고 생각합니다. 그러나 슬라이더 버튼을 클릭 할 때 동영상을 일시 중지하지 않는 것 같습니다.

<script type="text/javascript"> 
// https://developers.google.com/youtube/iframe_api_reference 

// global variable for the player 
var player; 

// this function gets called when API is ready to use 

function onYouTubePlayerAPIReady() { 
    // create the global player from the specific iframe (#video) 
    player = new YT.Player('video', { 
    events: { 
     // call this function when player is ready to use 
     'onReady': onPlayerReady 
    } 
    }); 
} 

function onPlayerReady(event) { 

    // bind events 

    var pauseButtonRight = document.getElementByID("pause-right"); 
    pauseButtonRight.addEventListener("click", function() { 
    player.pauseVideo(); 
    }); 
    var pauseButtonLeft = document.getElementByID("pause-left"); 
    pauseButtonLeft.addEventListener("click", function() { 
    player.pauseVideo(); 
    }); 
} 

// Inject YouTube API script 
var tag = document.createElement('script'); 
tag.src = "//www.youtube.com/player_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
</script> 

내 iframe을 : 어떤 방향을 감상 할 수있다

<iframe src="https://www.youtube.com/embed/6QB6jVjA2js?enablejsapi=1&html5=1&" frameborder="0" allowfullscreen="0"></iframe> 

.

Answer 1

몇 가지 :

• 이 document.getElementById하지 당신이 어떤 ID가없는 ID 'video' 그러나 당신은 iframe와 유튜브 플레이어를 통해 인스턴스 한

• document.getElementByID :

  <iframe id="video" src="https://www.youtube.com/embed/6QB6jVjA2js?enablejsapi=1&html5=1&" frameborder="0" allowfullscreen="0"></iframe> 
  

• 을

  대신 onYouTubePlayerAPIReady

당신은해야합니다 뭔가 같은 :

var player; 

function onYouTubeIframeAPIReady() { 

    // create the global player from the specific iframe (#video) 
    player = new YT.Player('video', { 
    events: { 
     // call this function when player is ready to use 
     'onReady': onPlayerReady 
    } 
    }); 
} 

function onPlayerReady(event) { 
    var pauseButtonRight = document.getElementById("pause"); 
    pauseButtonRight.addEventListener("click", function() { 
    player.pauseVideo(); 
    }); 
    var pauseButtonLeft = document.getElementById("play"); 
    pauseButtonLeft.addEventListener("click", function() { 
    player.playVideo(); 
    }); 
} 

// Inject YouTube API script 
var tag = document.createElement('script'); 
tag.src = "//www.youtube.com/player_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

과 :이 일을

<iframe id="video" src="https://www.youtube.com/embed/6QB6jVjA2js?enablejsapi=1&html5=1&" frameborder="0" allowfullscreen="0"></iframe> 
<input id="pause" type="submit" value="pause" /> 
<input id="play" type="submit" value="play" /> 

확인 Youtube iframe API reference