9

ページに複数の YouTube iFrame を埋め込んでいます。映画の 1 つが既に再生されていて、ユーザーが別の映画の再生を開始することを決定した場合、最初の映画の再生を停止して、一度に 1 つの映画だけを再生することはできますか?

「iframe Embeds の YouTube Player API リファレンス」https://developers.google.com/youtube/iframe_api_referenceを見てきましたが、正直なところ、理解できません。私の開発者スキルは非常に限られています....明らかに。

残念ですが、これが現時点で私が持っているすべてです（iFrameのみ）... http://jsfiddle.net/YGMUJ/ 

<iframe width="520" height="293" src="http://www.youtube.com/v/zXV8GMSc5Vg?version=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<iframe width="520" height="293" src="http://www.youtube.com/v/LTy0TzA_4DQ?version=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

動画の URL の末尾に「&enablejsapi=1」を追加するだけでよいと思いました。

どんな助けでも大歓迎です。
前もって感謝します。

4

3 に答える 3

16

これは@Matt Koskelaのバージョンの高度なバージョンです。JavaScript で動画を作成する必要はありません。たとえば、ビデオが PHP 側で生成された場合 (Wordpress と考えてください) に機能します。

JsFiddle のデモはこちら。

<script>
    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function onYouTubeIframeAPIReady() {
        var $ = jQuery;
        var players = [];
        $('iframe').filter(function(){return this.src.indexOf('http://www.youtube.com/') == 0}).each( function (k, v) {
            if (!this.id) { this.id='embeddedvideoiframe' + k }
            players.push(new YT.Player(this.id, {
                events: {
                    'onStateChange': function(event) {
                        if (event.data == YT.PlayerState.PLAYING) {
                            $.each(players, function(k, v) {
                                if (this.getIframe().id != event.target.getIframe().id) {
                                    this.pauseVideo();
                                }
                            });
                        }
                    }
                }
            }))
        });
    }
</script>

One: 
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/zXV8GMSc5Vg?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe>
<br/>
Two:
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/LTy0TzA_4DQ?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe>

編集:動画がサムネイルで始まる場合は、以下の Jennie Sadler の微調整バージョンをチェックしてください。

于 2014-04-29T16:15:07.373 に答える
8

iframe を使用する代わりに、実際には iFrame Player API を使用する必要があります。実際に埋め込みたいビデオの数によっては、この JavaScript をより動的にしたいかもしれませんが、この作業例で十分に始めることができます。

基本的にここで行っているのは、2 つのプレーヤーを初期化し、プレーヤーの状態が再生に変わったときに反対側のビデオを一時停止することです。

http://jsfiddle.net/mattkoskela/Whxjx/で次のコードを試すことができます。

<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
    player1 = new YT.Player('player1', {
        height: '293',
        width: '520',
        videoId: 'zXV8GMSc5Vg',
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
    player2 = new YT.Player('player2', {
        height: '293',
        width: '520',
        videoId: 'LTy0TzA_4DQ',
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        stopVideo(event.target.a.id);
    }
}

function stopVideo(player_id) {
    if (player_id == "player1") {
        player2.stopVideo();
    } else if (player_id == "player2") {
        player1.stopVideo();
    }
}

于 2013-02-19T07:43:18.420 に答える
6

vbenceのソリューションは非常に近いですが、私が提案する編集が 1 つあります。一時停止する前に、他のプレイヤーが再生していることを確認する必要があります。そうしないと、ページの最初の埋め込みを再生すると、ページの他のすべての埋め込みが再生/一時停止され、プレビュー サムネイルが削除され、驚くべき副作用が生じます。

<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
    var $ = jQuery;
    var players = [];
    $('iframe').filter(function(){return this.src.indexOf('http://www.youtube.com/') == 0}).each( function (k, v) {
        if (!this.id) { this.id='embeddedvideoiframe' + k }
        players.push(new YT.Player(this.id, {
            events: {
                'onStateChange': function(event) {
                    if (event.data == YT.PlayerState.PLAYING) {
                        $.each(players, function(k, v) {
                            if (this.getPlayerState() == YT.PlayerState.PLAYING # checks for only players that are playing
                                  && this.getIframe().id != event.target.getIframe().id) { 
                                this.pauseVideo();
                            }
                        });
                    }
                }
            }
        }))
    });
}
</script>

One: 
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/zXV8GMSc5Vg?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe>
<br/>
Two:
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/LTy0TzA_4DQ?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe>
于 2016-07-15T22:31:34.163 に答える