2013-04-05 3 views
1

안녕하세요,은 iframe 유튜브 비디오 컨트롤

내가 자바 스크립트와 HTML5 정말 새로운 M (불과 3 주 전에 시작) 그래서 제 질문은 어쩌면 조금 바보 볼 것이다. 난 내 YouTube 동영상 음악 정지를 롤오버 할 때

그래서

나는 그것이 mouseleave.function와 YouTube 동영상을 중지 추적 할 수없는 가망이야 알고 싶습니다는 ...

내가 내 웹 사이트에 음악 느릅 나무 놀이를했습니다

: 나는 음악이 다시가는 비디오 플레이어를 떠날 때

내가 YouTube 동영상을 재생할 수있는 것보다
$(video).mouseenter(function(){ 
    audioElement.pause(); 
}); 

...

, 난이를 사용, 난 이런 식으로했다

그러나 비디오의 소리가 내 배경 음악의 사운드가 재생되는 동안 재생 있기 때문에 나는 동시에 YouTube 동영상의 정지를하고 싶습니다 ...

$(video).mouseleave(function(){ 
    audioElement.play(); **Something here to pause the youbevideo** 
}); 

은 가능합니까? fitvids를 사용하여 비디오 크기를 조정하기 때문에 youtube 비디오의 버전을 유지하고 싶습니다.

감사

피에르 내 영어에 대한 srry ...

여기, RAVI 나를 위해 솔루션입니다.

그렇다면 YouYube API 스크립트를 외부 js에서 기본 html로 옮기는 것이 해결책이었습니다.

<body> 

     <div class="tf_content" id="page4"> 
     <div class="container"> 
      <div class="vendor" id="video"> 
    <div id="player"></div> 


      </div> 
     </div> 
     </div> 




     <!-- The JavaScript --> 

     <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 player; 
     function onYouTubeIframeAPIReady() { 
     player = new YT.Player('player', { 
      height: '420', 
      width: '640', 
      videoId: 'lVQzIwpClXA?theme=light&color=white&autohide=0&autoplay=0&showinfo=0&rel=1&controls=1;', 
      events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
     } 
     function onPlayerReady(event) { 

     } 
     var done = false; 
     function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.PLAYING) { 
    audioElement.volume=0; 
      done = true; 
     } 
     } 


    video = document.getElementById("video"); 




      $(video).mouseleave(function(){ 
        player.stopVideo() 
       up(); 
       }); 



$(".container").fitVids(); 

지금은 작동

http://users.skynet.be/fc864408/version9.html

는 ... 비디오는 창에 따라 크기를 조정한다.

+0

실제로 API를 사용하고 아니면 그냥 iframe이를 내장하고 있습니다? API를 사용하는 경우 다음 문서를 참조하십시오. https://developers.google.com/youtube/iframe_api_reference#Getting_Started –

+0

fitvids 플러그인을 사용하고 싶기 때문에 iframe을 사용하고 있습니다. API 버전을 사용해 보았습니다. 목표는 동영상을 일시 중지하지만 fitvids 플러그인은 더 이상 작동하지 않습니다. https://developers.google.com/youtube/iframe_api_reference#Getting_Started 을 그리고는 onPlayerReady 기능에 라인을 추가합니다 : –

+0

왜이 같은 iframe이 API를 사용하지 '$ ('# 플레이어'). fitVids()'를 사용하면 플레이어 요소를 계속 제어 할 수 있습니까? 지금 가지고있는 방식대로 플레이어 요소에 액세스 할 수 없습니다. –

답변

0

마우스 이벤트에서 비디오를 재생/일시 중지하려면 (VideoElementID) .play() 및 (VideoElementID) .pause()를 사용하기 만하면됩니다. 오디오와 비디오를 별도로 재생/일시 중지 할 필요가 없습니다.

감사합니다, 라비

+0

안녕하세요 Ravi, 답변 주셔서 감사합니다. 그러나 youtubevideo –

+0

에 대해 (VideoElementID) .play() 또는 pause()를 사용할 수 없습니다. 여기 http://inkers.skynet.be/fc864408/version5 .html 단지 scrool 한번에 올바른 장소에 있어야합니다. thanks –

+0

비디오 요소 ID를 가져온 다음 JQuery 또는 Javascript 재생/일시 정지 기능을 사용할 수 없습니까? 그게 당신 문제인가요? –