web-dev-qa-db-ja.com

JavaScriptで非表示/表示-YouTubeiframeビデオの再生を停止します

Iframe関数を使用してビデオを埋め込み、JavaScriptを使用してコンテンツとビデオを非表示/表示しています。

one問題があります。最初のビデオで再生を押してから、最初のビデオを停止せずに次のビデオをクリックすると、最初のビデオは再生を続けます。

新しいコンテンツを表示するときに、「バックグラウンド」でビデオを停止するにはどうすればよいですか？

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

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

私はこの単純なJavaScript関数を使用しています。ここで、「pic1」と「pic2」のIDはdivのIDであり、ビデオが埋め込まれています。

私はそれを機能させることができないようです。削除しようとしましたが、必要に応じてビデオを再度表示することはできません。

javascriptiframeyoutubeyoutube-apiyoutube-javascript-api
15
Sabine Quardon

これは、追加のファイルを読み込まない、YouTubeプレーヤーAPIの実装です。この作業を行うには、すべての<iframe>の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>
    ....

JavaScript + jQueryコード：

$(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]);
        }
    });
});
27
Rob W