javascript - iframe を非表示にするときに YouTube プレーヤーを一時停止する方法は?

Question

に 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 -->

score 191 · Accepted Answer

この動作を実装する最も簡単な方法は、必要に応じてメソッド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>

score 23 · Accepted Answer

これは、モーダルウィンドウで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 の回答を参照してください。

score 16 · Accepted Answer

RobW と DrewT の回答に基づいて、ページ上のすべてのビデオを一時停止する簡単な jQuery スニペットを次に示します。

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

score 9 · Accepted Answer

ちょっと簡単な方法は、ビデオのsrcを何も設定しないことです。これにより、ビデオが非表示になっている間にビデオが消えるようになり、ビデオを開くリンクをクリックしたときにsrcを必要なビデオに戻すことができます.. 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>

score 6 · Accepted Answer

他の回答に記載されている/コマンド?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、「ビデオ」のクラスを持つ div 内のすべての iframe がenablejsapi=trueソースに追加され、playVideo / pauseVideo コマンドが動作できるようになります。

(注: この例ではvar iframes、を設定する 1 行に jQuery を使用していますが、jQuery を使用していない場合、一般的なアプローチは純粋な Javascript でも同様に機能するはずです)。

score 5 · Accepted Answer

stopVideo()div を非表示にする前に、YouTube プレーヤーインスタンスでメソッドを呼び出してビデオを停止できます。

player.stopVideo()

詳細については、http ://code.google.com/apis/youtube/js_api_reference.html#Playback_controls を参照してください。

score 4 · Accepted Answer

1 つのページに複数の 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 は必要ありません。うまくいけば、誰かがこれも役に立つと思うでしょう。

score 4 · Accepted Answer

RobWの方法は私にとってうまくいきました。jQueryを使用している人のために、私が最終的に使用した簡略化されたバージョンを次に示します。

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

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

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

この例では、「video_player」は iframe を含む親 div です。

javascript - iframe を非表示にするときに YouTube プレーヤーを一時停止する方法は?

14 に答える 14

Related

Reference