1

私は YouTube Iframe API を初めて使用し、ユーザーが別のスライドに移動したときに、スライドショー (jQuery flexslider プラグイン) にあるいくつかの埋め込まれた Iframe ビデオを一時停止しようとしています。プレーヤーが一時停止されていない場合、ビデオは引き続き再生されます。スライド ショーには複数のビデオがあるため、新しいスライドが表示されたときにそれぞれのビデオを一時停止する必要があります。iframe は API 経由では挿入されませんが、使用している CMS により、既に html に存在しています。

API リファレンスとここで見つけたいくつかの回答を読みましたが、ユーザーが新しいスライドに移行したときに任意/すべての iframe ビデオを一時停止する方法を理解するのに苦労しています。

私の最近の試みでは、以下のコードに見られるように、リンクがクリックされるたびに iframe を一時停止しようとしました。これは、ページ上の唯一のリンクが次のスライドと前のスライドに移動するためであるためです。また、flexslider API を介して提供されるスライド遷移イベントですべてのビデオを一時停止しようとしましたが、成功しませんでした。

var players = {}; //players storage object
function onYouTubeIframeAPIReady(){
    $('iframe[id]').each(function(){
        var identifier = this.id;
        var frameID = getFrameID(identifier);
        if (frameID) { // if iframe exists
            players[frameID] = new YT.Player(frameID, {
                events: {
                    "onStateChange" : createYTEvent(frameID, identifier)
                }
            });            
        }
    });
}

//returns a function to enable  multiple events
function createYTEvent(frameID, identifier){
    return function (event){
        var player = players[frameID]; //set player reference
        var done = false;

        $('a').click(function(){

            player.pauseVideo();
            return false;

        });        
    }
}

どんな助けでも大歓迎です

4

1 に答える 1

0

私の英語で申し訳ありません。私はフランス人ですが、最近同じ問題が発生しました。将来、あなたや他の人を助けることができると思ったのかもしれません.

あなたとの違いは、4 つのプレーヤーではなく、4 つのビデオのリストをロードする 1 つのプレーヤーのみを使用したことです。

私のHTMLがあります:

<div id='videos'>
    <div id="player">
        <!-- the iframe drectly write in the html, with a list of videos (4 in the example) -->
        <iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/youtubeVideoId1?playlist=youtubeVideoId2,youtubeVideoId3,youtubeVideoId4&version=3" frameborder="0" allowfullscreen></iframe>
    </div>
        <!-- below, the buttons for switching the 4 videos -->
        <span id='pagination'>
            <a onclick='video_slide(0);' id='puce1'></a>
            <a onclick='video_slide(1);' id='puce2'></a>
            <a onclick='video_slide(2);' id='puce3'></a>
            <a onclick='video_slide(3);' id='puce4'></a>
        </span>
    </div>
</div>

そして私のJavascript:

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

    // init the player
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('ytplayer', {
            events: {
                // the function "onPlayerStateChange is call when the player load, 
                   play, pause or stop a video
            'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerStateChange(event) {
        // if a new video is buffering (the event.data is -1 when buffering, 
           1 when playing, 2 when paused ...)
        if (event.data == -1) {
            // it mean that the player pass at the next video, 
               so we call the bellow function to turn on the corresponding button
            getTheRightPuce();
        }
    }
    // I add a function to recognize the current video playing, 
       and turn on the right button automatically when at the end of a video, 
       the player pass on the next one
    function getTheRightPuce(){
        var vidIndex = player.getPlaylistIndex();

        $("#pagination a").css('backgroundColor','#000000');

        if (vidIndex==0){$("#puce1").css('backgroundColor','red');}
        else if (vidIndex==1){$("#puce2").css('backgroundColor','red');}
        else if (vidIndex==2){$("#puce3").css('backgroundColor','red');}
        else if (vidIndex==3){$("#puce4").css('backgroundColor','red');}
    }

    // the function called by the buttons, change the current video 
       on the player and turn on the corresponding button, 
       the parameter is the index of the video in the play-list 
       (0 for the first, 1 for second...)
    function video_slide(sld){

        player.playVideoAt(sld);

        $("#videos").css('display','none');
        $("#pagination a").css('backgroundColor','#000000');
        $("#videos").fadeIn(500);
        if (sld==0){$("#puce1").css('backgroundColor','red');}
        else if (sld==1){$("#puce2").css('backgroundColor','red');}
        else if (sld==2){$("#puce3").css('backgroundColor','red');}
        else if (sld==3){$("#puce4").css('backgroundColor','red');}
    }
</script>

できるだけわかりやすくするように努めました。

これがあなたや他の誰かに役立つことを願っています:)

于 2012-09-30T23:18:23.320 に答える