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

86

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 -->
javascript  youtube-api  youtube-javascript-api 
— 0161-Jon
소스
잘 모르겠어요,하지만 당신은 단지 그것을 숨길 비디오를 중지하거나 사업부에서 동영상을 삭제하는 방법을 찾을 수 있고하지 않을 수도 있습니다 ..
— aniri
대답을 받아 들여야합니다.
— activatedgeek

답변:

188

이 동작을 구현하는 가장 쉬운 방법은 필요할 때 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>
— 롭여
소스
1
이것이 효과가 있다면 녹색 확인란이 필요합니다. 저도이 솔루션을 사용하고 있습니다. 훌륭한 기능입니다. 이러한 비디오 프레임이 jQueryUI Accordion에 있으므로 각 트리거 이벤트에 연결해야합니다.
— jeffkee
슬프게도 YouTube의 API는 postMessage를 통해 전송 된 메시지에 큰 따옴표를 사용하게 만든다는 점을 지적하고 싶었습니다. 예를 들어 외부 큰 따옴표와 내부 작은 따옴표를 사용하도록 전환 할 수 없습니다.
— Jordan
1
@Jordan 메시지가 JSON 일 것으로 예상되기 때문에 완벽하게 의미가 있습니다. 정의에 따라 JSON은 큰 따옴표를 사용하여 키와 값을 인용합니다.
— Rob W
2
관심이 있다면 부트 스트랩 3 모달에서 "닫기"버튼을 클릭하면 비디오 재생을 중지하도록 코드를 업데이트했습니다. $ ( "# MyModal-close") .click (function () {var div = document.getElementById ( "MyModal-videoWrapper"); var iframe = div.getElementsByTagName ( "iframe") [0] .contentWindow; iframe.postMessage ( '{ "event": "command", "func": "'+ 'pauseVideo'+ '", "args": ""}', '*');});
— Ryan Walton
10
다음 ?enablejsapi=1과 같이 iframe 임베딩 URL <iframe class="embed-responsive-item" src="//www.youtube.com/embed/WIZUeIDFALw?html5=1&enablejsapi=1" allowfullscreen></iframe>
— 에를
23

다음은 모달 창에서 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의 답변을 참조하십시오.

— DrewT
소스
5
어떤 향상된 가독성이 변경 되었습니까? if / else 조건부이지만 이것에 대해 시작해 주셔서 감사합니다. 나는 단지 내가 유효한 추가가 전부라고 느꼈다.
— DrewT 2013
15

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

jQuery("iframe").each(function() {
  jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});
— 사중주 의자
소스
jQuery를 사용하지 않으려는 경우 '각'함수 내부의 코드는 jQuery 객체를 역 참조한 후에도 동일합니다. 즉, node.contentWindow. ...
— mattdlockyer
동영상이 다시 표시 될 때 다시 재생하려면 어떻게해야합니까?
— Carl Papworth 2017 년
"pauseVideo"를 "playVideo"로 바꾸십시오. 예 : jsfiddle.net/ora2kqzq/1
— quartarian
더 이상 내가 시도 때도 ... 작동하지있어 그 {"event":"command","func":"playVideo","args":[],"id":1,"channel":"widget"}이후에 {"event":"listening","id":1,"channel":"widget"}있는 유튜브가 포함에 YT.Player은 iframe API는 게시되는 것입니다.
— NoBugs
9

쉬운 방법은 단순히 비디오의 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>
— 폴라
소스
4
경고 :에 대한 수정을 iframe의 src와 자바 스크립트 부주의로 밀어 버린다 window.history돌아 가기 버튼 문제의 원인.
— Jordan Arseno
감사합니다 Jordan! 이 답변을 직접 사용하기 시작 했으며이 동작을 인식하지 못했습니다. 더 나은 나중에 :)보다는 지금 알고
— MMachinegun
이 방법을 시도하는 모든 사람에게 공정한 경고 : YouTube 용 iframe 삽입이 포함 된 div간에 전환하는 데이 방법을 사용하면 매우 눈에 띄는 지연이 발생할 수 있습니다. 조심해.
— Muhammad Abdul-Rahim 2015
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에서도 잘 작동합니다).

— 닉 F
소스
5

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

player.stopVideo()

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

— 데이비드
소스
플레이어 객체는 무엇이며 어떻게 액세스합니까? 나는 플레이어가 정의되지 않은 비디오가 여전히 재생 얻을
— Claudiu Creanga
JS API를 사용하여 인스턴스화 할 때 사용할 수 있습니다.
— david
4

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

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

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

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

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

— skribbz14
소스
4

단일 페이지에 여러 개의 YouTube 동영상이 포함되어있는 경우 작동하는 jQuery를 사용하여 생각 해낸 솔루션을 공유하고 싶었습니다. 제 경우에는 다음과 같이 각 비디오에 대한 모달 팝업을 정의했습니다.

<div id="videoModalXX">
...
    <button onclick="stopVideo(videoID);" type="button" class="close"></button>
    ...
    <iframe width="90%" height="400" src="//www.youtube-nocookie.com/embed/video_id?rel=0&enablejsapi=1&version=3" frameborder="0" allowfullscreen></iframe>
...
</div>

이 경우 videoModalXX는 동영상의 고유 ID를 나타냅니다. 그런 다음 다음 함수가 비디오를 중지합니다.

function stopVideo(id)
{
    $("#videoModal" + id + " iframe")[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}

이 접근 방식은 나중에 돌아가서 계속 시청하려는 경우 중단 한 부분에서 비디오를 일시 중지하기 때문에 좋아합니다. 특정 ID를 가진 비디오 모달 내부의 iframe을 찾고 있기 때문에 잘 작동합니다. 특별한 YouTube 요소 ID가 필요하지 않습니다. 바라건대 누군가 이것도 유용하다는 것을 알게 될 것입니다.

— Poldon
소스
이것은 엄청난 양의 코드 없이도 훌륭하게 작동했습니다. 페이지에 여러 YT 동영상이 있고 YT 엄지 손가락 만 표시하고 중지 / 일시 중지 솔루션이 필요했습니다. 그것은 전체 열 너비로 확장했을 때의 playVideo에 pauseVideo을 변경하여, 나는 비디오를 시작 할 수 있었다
— WebDude0482
2

iframe의 src 만 제거하십시오.

$('button.close').click(function(){
    $('iframe').attr('src','');;
});
— rakesh kejriwal
소스
그러나 그는 사용자가 열기를 클릭 할 때 계속 플레이하고 싶을 수 있습니다.
— Coda Chang
형제, onclick을 다시 JQuery와 통해 SRC를 추가, 그것은 작동합니다
— kejriwal 케쉬
1

Rob W 답변은 슬라이더가 숨겨져있을 때 iframe에서 비디오를 일시 중지하는 방법을 알아내는 데 도움이되었습니다. 그러나 작동하기 전에 약간의 수정이 필요했습니다. 다음은 내 HTML의 일부입니다.

<div class="flexslider" style="height: 330px;">
  <ul class="slides">
    <li class="post-64"><img src="http://localhost/.../Banner_image.jpg"></li>
    <li class="post-65><img  src="http://localhost/..../banner_image_2.jpg "></li>
    <li class="post-67 ">
        <div class="fluid-width-video-wrapper ">
            <iframe frameborder="0 " allowfullscreen=" " src="//www.youtube.com/embed/video-ID?enablejsapi=1 " id="fitvid831673 "></iframe>
        </div>
    </li>
  </ul>
</div>

이것이 localhosts에서 작동 하고 Rob W가 언급했듯이 " enablejsapi = 1 "이 비디오 URL 끝에 추가 되었는지 확인합니다.

다음은 내 JS 파일입니다.

jQuery(document).ready(function($){
    jQuery(".flexslider").click(function (e) {
        setTimeout(checkiframe, 1000); //Checking the DOM if iframe is hidden. Timer is used to wait for 1 second before checking the DOM if its updated

    });
});

function checkiframe(){
    var iframe_flag =jQuery("iframe").is(":visible"); //Flagging if iFrame is Visible
    console.log(iframe_flag);
    var tooglePlay=0;
    if (iframe_flag) {                                //If Visible then AutoPlaying the Video
        tooglePlay=1;
        setTimeout(toogleVideo, 1000);                //Also using timeout here
    }
    if (!iframe_flag) {     
        tooglePlay =0;
        setTimeout(toogleVideo('hide'), 1000);  
    }   
}

function toogleVideo(state) {
    var div = document.getElementsByTagName("iframe")[0].contentWindow;
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    div.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
};

또한 더 간단한 예로서 JSFiddle 에서 이것을 확인하십시오.

— 파힘 호세인
소스
1

이 접근 방식에는 jQuery가 필요합니다. 먼저 iframe을 선택합니다.

var yourIframe = $('iframe#yourId');
//yourId or something to select your iframe.

이제이 iframe의 버튼 재생 / 일시 중지를 선택하고 클릭합니다.

$('button.ytp-play-button.ytp-button', yourIframe).click();

도움이 되길 바랍니다.

— hong4rc
소스
0

여기와 다른 곳에서 RobW의 답변은 매우 도움이되었지만 내 요구 사항이 훨씬 간단하다는 것을 알았습니다. 나는 이것을 다른 곳에서 대답했다 에서 했지만 아마도 여기에서도 유용 할 것입니다.

UIWebView에로드 할 HTML 문자열을 구성하는 방법이 있습니다.

NSString *urlString = [NSString stringWithFormat:@"https://www.youtube.com/embed/%@",videoID];

preparedHTML = [NSString stringWithFormat:@"<html><body style='background:none; text-align:center;'><script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>var player; function onYouTubeIframeAPIReady(){player=new YT.Player('player')}</script><iframe id='player' class='youtube-player' type='text/html' width='%f' height='%f' src='%@?rel=0&showinfo=0&enablejsapi=1' style='text-align:center; border: 6px solid; border-radius:5px; background-color:transparent;' rel=nofollow allowfullscreen></iframe></body></html>", 628.0f, 352.0f, urlString];

준비된 HTML 문자열에서 스타일링 항목을 무시할 수 있습니다. 중요한 측면은 다음과 같습니다.

  • API를 사용하여 "YT.player"개체를 만듭니다. 한때는 iFrame 태그에만 비디오가 있었기 때문에 나중에 JS로 "player"개체를 참조 할 수 없었습니다.
  • 웹에서 첫 번째 스크립트 태그 (iframe_api src 태그가있는 태그)가 생략 된 몇 가지 예를 보았지만이 작업을 수행하려면 확실히 필요했습니다.
  • API 스크립트 시작 부분에 "플레이어"변수를 만듭니다. 나는 또한 그 줄을 생략 한 몇 가지 예를 보았다.
  • API 스크립트에서 참조 할 iFrame에 id 태그를 추가합니다. 나는 그 부분을 거의 잊었다.
  • iFrame src 태그 끝에 "enablejsapi = 1"을 추가합니다. 처음에는 작동하지 않거나 작동하지 않는 iFrame 태그의 속성으로 처음에 있었기 때문에 잠시 중단되었습니다.

비디오를 일시 중지해야 할 때 다음을 실행합니다.

[webView stringByEvaluatingJavaScriptFromString:@"player.pauseVideo();"];

도움이 되었기를 바랍니다.

— 브라이언
소스
왜 upvotes가 없는지 궁금한 경우에는 자바 스크립트가 아니기 때문에 iOS 앱이 아닌 youtube embed url을 참조하는 iframe 인 OP의 사용 사례에 유용하지 않기 때문입니다.
— Vroo 2015 년
@Vroo 예, 알겠습니다. 다른 iOS 사용자가 여기에 와서 내가 한 것처럼이 질문을 발견 한 경우이 답변을 여기에 남겨두고 싶었습니다.
— Brian
0

이것은 YT 플레이어에서 잘 작동합니다.

 createPlayer(): void {
  return new window['YT'].Player(this.youtube.playerId, {
  height: this.youtube.playerHeight,
  width: this.youtube.playerWidth,
  playerVars: {
    rel: 0,
    showinfo: 0
  }
});
}

this.youtube.player.pauseVideo ();

— HuyLe
소스
0

보다 간결하고 우아하며 안전한 답변 : 동영상 URL 끝에 "? enablejsapi = 1"을 추가 한 다음 pause 명령을 나타내는 일반 객체를 구성하고 문자열 화합니다.

const YouTube_pause_video_command_JSON = JSON.stringify(Object.create(null, {
    "event": {
        "value": "command",
        "enumerable": true
    },
    "func": {
        "value": "pauseVideo",
        "enumerable": true
    }
}));

Window.postMessage메서드를 사용하여 결과 JSON 문자열을 포함 된 비디오 문서로 보냅니다.

// |iframe_element| is defined elsewhere.
const video_URL = iframe_element.getAttributeNS(null, "src");
iframe_element.contentWindow.postMessage(YouTube_pause_video_command_JSON, video_URL);

메시지가 의도하지 않은 수신자에게 전송되지 않도록 Window.postMessage메서드의 targetOrigin인수에 대한 비디오 URL을 지정해야합니다 .

— 패트릭 다크
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.