15

iframe 함수를 사용하여 동영상을 퍼가기 위해 자바 스크립트를 통해 콘텐츠 및 동영상을 숨기거나 표시하고 있습니다.자바 스크립트에서 숨기기/표시 - YouTube iframe 동영상 재생 중지

나는 하나가입니다. 첫 번째 비디오에서 재생을 누른 다음 첫 번째 비디오를 멈추지 않고 다음을 클릭하면 첫 번째 비디오가 계속 재생됩니다.

새 콘텐츠를 표시 할 때 "배경"으로 동영상을 중단하려면 어떻게해야합니까? 난 그냥 "PIC1"및 "PIC2는"ID가 DIV의 ID 인이 간단한 자바 스크립트 기능을 사용하고

$(function(){ 
    $("#link1").click(show1); 
}); 

function show1(){ 
    $("#pic1").fadeIn(); 
    $("#pic2").hide(); 
} 

비디오는에 포함됩니다.

에게 난 그냥 수없는 것 그것을 작동하게합니다. 제거를 시도했지만 원하는 경우 동영상을 다시 볼 수 없습니다.

+0

가능한 중복 ' div가 숨겨져있을 때 중지] (http://stackoverflow.com/questions/8667882/video-wont-stop-when-div-is-hidden) –

+0

참조 : http://stackoverflow.com/questions/1094397/how -can-i-stop-a-video-with-javascript-in-youtube – xbonez

+1

@xbonez 귀하의 질문에 대한 ** 프레임 ** YouTube 비디오 아니에요 . –

답변

27

추가 파일을로드하지 않고 YouTube 플레이어 API를 구현 한 것입니다. 이 작업을 수행하려면 의 src 속성에 모두 ?enablejsapi=1이라는 접미사를 사용해야합니다.

<div id="pic3"> 
    <iframe width="640" height="390" 
      src="http://www.youtube.com/embed/Xub4grFLbQM?enablejsapi=1" 
      frameborder="0" allowfullscreen></iframe> 
</div> 

<div id="tS2" class="jThumbnailScroller"> 
.. Removed your code for readability.... 
    <a href="#vid3" id="link3"><img src="images/thumbs/player2.jpg" height="85"/></a> 
    .... 

자바 스크립트 + jQuery 코드를 :

예 (I, 당신은 안전하게 바꿈을 생략 할 수 가독성을 위해 몇 줄에 걸쳐 코드를 파산)

$(function() { 
    /* elt: Optionally, a HTMLIFrameElement. This frame's video will be played, 
    *  if possible. Other videos will be paused*/ 
    function playVideoAndPauseOthers(frame) { 
     $('iframe[src*="http://www.youtube.com/embed/"]').each(function(i) { 
      var func = this === frame ? 'playVideo' : 'pauseVideo'; 
      this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*'); 
     }); 
    } 
    $('#tS2 a[href^="#vid"]').click(function() { 
     var frameId = /#vid(\d+)/.exec($(this).attr('href')); 
     if (frameId !== null) { 
      frameId = frameId[1]; // Get frameId 
      playVideoAndPauseOthers($('#pic' + frameId + ' iframe')[0]); 
     } 
    }); 
}); 
영상 원 [의
+0

정말 대단해! 고맙습니다 .-D –

+0

'http://www.mywebsite.com'이 원산지가 "http://www.youtube.com"인 프레임에 액세스하지 못하도록 차단했습니다. 프로토콜, 도메인 및 포트가 일치해야 함' –

+0

@ bfred.it이 메서드는 여전히 작동하거나 공식 YouTube iframe API를 포함한 다른 많은 스크립트가 중단됩니다. 어떤 코드를 사용하고 있습니까? –

관련 문제