마우스를 올려 놓으면 YouTube 비디오가 일시 중지됩니다.

Question

div를 마우스로 가리키면 YouTube iframe을 삽입하는 기능을 만들고 있습니다. when the user leaves div the video is paused. Everythings은 잘 작동하지만 사용자가 div를 떠날 때 동영상이 일시 중지되지 않습니다.

바이올린 : http://jsfiddle.net/508oknm7/20/

어떤 아이디어? 고맙습니다!

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

tag.src = "https://www.youtube.com/player_api"; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
var player; 
$(".video_wrap").on({ 
    mouseenter: function() { 

     player = new YT.Player($(this).attr('id'), { 
      height: '240', 
      width: '320', 
      videoId: 'wJnnT1SGEsc', 
      playerVars: { 
      wmode: "transparent", 
      controls: 0, 
      showinfo: 0, 
      rel: 0, 
      modestbranding: 1, 
      iv_load_policy: 3 //anottations 
      }, 
      events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
      } 
     }); 

     function onPlayerReady(event) { 
      event.target.playVideo(); 
     } 


    }, 
    mouseleave: function() { 
     player.pauseVideo(); 
    } 
}); 

Answer 1

API는 아마 준비가되지 않은 - the youtube Iframe API에 따라, 당신은에서 onYouTubeIframeAPIReady 기능을 구현해야합니다.

대신이 시도 : 이것은 단지 추측입니다

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

tag.src = "https://www.youtube.com/player_api"; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
var player; 
function onYouTubeIframeAPIReady(){ 
$(".video_wrap").on({ 
    mouseenter: function() { 

     player = new YT.Player($(this).attr('id'), { 
      height: '240', 
      width: '320', 
      videoId: 'wJnnT1SGEsc', 
      playerVars: { 
      wmode: "transparent", 
      controls: 0, 
      showinfo: 0, 
      rel: 0, 
      modestbranding: 1, 
      iv_load_policy: 3 //anottations 
      }, 
      events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
      } 
     }); 

     function onPlayerReady(event) { 
      event.target.playVideo(); 
     } 


    }, 
    mouseleave: function() { 
     player.pauseVideo(); 
    } 
}); 
} 

참고하지만, 당신이 뭔가 더 구체적인를 원한다면 당신은 jsfiddle을 제공 할 수 있습니다.

편집 : This works for the first time.

더 이상 마우스가 없기 때문에 나중에 작동하지 않는 이유는 더 이상 마우스 센터가 없기 때문입니다. iframe은 이전 div를 완전히 덮고 있기 때문에 입력하지 않으므로 그대로 둘 수 없습니다.

이렇게하려면 mouseout을 사용하고 싶습니다.