[javascript] iframe을 숨길 때 YouTube 플레이어를 일시 중지하는 방법은 무엇입니까?

Question 1

YouTube 동영상이 포함 된 숨겨진 div가 <iframe>. 사용자가 링크를 클릭하면이 div가 표시되고 사용자가 동영상을 재생할 수 있어야합니다.

사용자가 패널을 닫으면 비디오 재생이 중지되어야합니다. 이것을 어떻게 달성 할 수 있습니까?

암호:

<!-- link to open popupVid -->
<p><a href="javascript:;" onClick="document.getElementById('popupVid').style.display='';">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">

  <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen></iframe>

  <br /><br />
  <a href="javascript:;" onClick="document.getElementById('popupVid').style.display='none';">
  close
  </a>
</div><!--end of popupVid -->

Question 2

이 동작을 구현하는 가장 쉬운 방법은 필요할 때 pauseVideo및 playVideo메서드 를 호출하는 것 입니다. 이전 답변 의 결과에 영감을 받아 원하는 동작을 달성하기 위해 플러그인이없는 함수를 작성했습니다.

유일한 조정 :

기능을 추가했습니다. toggleVideo
?enablejsapi=1기능을 활성화하기 위해 YouTube의 URL에 추가 했습니다.

데모 : http://jsfiddle.net/ZcMkt/
코드 :

<script>
function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
</script>

<p><a href="javascript:;" onClick="toggleVideo();">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
   <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
   <br /><br />
   <a href="javascript:;" onClick="toggleVideo('hide');">close</a>

Question 3

다음은 모달 창에서 iframe을 숨기거나 일시 중지하는 데 사용되는 RobW의 답변에 대한 jQuery입니다.

    function toggleVideo(state) {
        if(state == 'hide'){
            $('#video-div').modal('hide');
            document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
        }
        else {
            $('#video-div').modal('show');
            document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
        }
    }

참조되는 html 요소는 show / hide 메소드를 호출하는 모달 div 자체 (# video-div)와 비디오 URL이 src = “”이고 접미사 enablejsapi = 1 이있는 iframe (# video-iframe)입니다. ? 플레이어를 프로그래밍 방식으로 제어 할 수 있습니다 (예 :.

html에 대한 자세한 내용은 RobW의 답변을 참조하십시오.

Question 4

다음은 RobW 및 DrewT의 답변을 기반으로 페이지의 모든 비디오를 일시 중지하는 간단한 jQuery 스 니펫입니다.

jQuery("iframe").each(function() {
  jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});

Question 5

쉬운 방법은 단순히 비디오의 src를 아무것도 설정하지 않는 것입니다. 그러면 비디오가 숨겨져있는 동안 사라질 것입니다. 그런 다음 비디오를 여는 링크를 클릭 할 때 src를 다시 원하는 비디오로 설정합니다 .. to do youtube iframe에 ID를 설정하고 다음과 같이 해당 ID를 사용하여 src 함수를 호출합니다.

<script type="text/javascript">
function deleteVideo()
{
document.getElementById('VideoPlayer').src='';
}

function LoadVideo()
{
document.getElementById('VideoPlayer').src='http://www.youtube.com/embed/WHAT,EVER,YOUTUBE,VIDEO,YOU,WHANT';
}
</script>

<body>

<p onclick="LoadVideo()">LOAD VIDEO</P>
<p onclick="deleteVideo()">CLOSE</P>

<iframe id="VideoPlayer" width="853" height="480" src="http://www.youtube.com/WHAT,EVER,YOUTUBE,VIDEO,YOU,HAVE" frameborder="0" allowfullscreen></iframe>

</boby>

Question 6

다른 답변에 언급 된 / 명령을 ?enablejsapi=true사용하기 전에 iframe의 src에 설정해야하므로 Javascript를 통해 프로그래밍 방식으로 추가하는 것이 유용 할 수 있습니다 (특히이 동작을 다른 사람이 삽입 한 비디오에 적용하려는 경우) YouTube 소스 코드를 잘라내어 붙여 넣은 사용자). 이 경우 다음과 같은 것이 유용 할 수 있습니다.playVideopauseVideo

function initVideos() {

  // Find all video iframes on the page:
  var iframes = $(".video").find("iframe");

  // For each of them:
  for (var i = 0; i < iframes.length; i++) {
    // If "enablejsapi" is not set on the iframe's src, set it:
    if (iframes[i].src.indexOf("enablejsapi") === -1) {
      // ...check whether there is already a query string or not:
      // (ie. whether to prefix "enablejsapi" with a "?" or an "&")
      var prefix = (iframes[i].src.indexOf("?") === -1) ? "?" : "&amp;";
      iframes[i].src += prefix + "enablejsapi=true";
    }
  }
}

…이를 호출하면 document.ready“video”클래스가있는 div의 모든 iframe 이 enablejsapi=true소스에 추가되어 playVideo / pauseVideo 명령이 작동 할 수 있습니다.

(주의.이 예제는을 설정하는 한 줄에 jQuery를 사용 var iframes하지만 jQuery를 사용하지 않는 경우 일반적인 접근 방식은 순수 Javascript에서도 잘 작동합니다).

Question 7

stopVideo()div를 숨기기 전에 YouTube 플레이어 인스턴스 에서 메서드를 호출하여 비디오를 중지 할 수 있습니다.

player.stopVideo()

자세한 내용은 http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls를 참조하세요.

Question 8

RobW의 방식은 저에게 잘 맞았습니다. jQuery를 사용하는 사람들을 위해 여기에 내가 사용한 단순화 된 버전이 있습니다.

var iframe = $(video_player_div).find('iframe');

var src = $(iframe).attr('src');

$(iframe).attr('src', '').attr('src', src);

이 예에서 “video_player”는 iframe을 포함하는 상위 div입니다.