1

ファンシーボックスで再生しているYouTubeビデオが終了したら、イベントを発生させようとしています。

そのため、ビデオが終了したら、fancybox を自動的に閉じることができます。

私は最後のファンシーボックスバージョンを持っており、例に固執してYouTube APIを使用していますが、ytplayerオブジェクトが「未定義」であるようで、正しく機能させることができません。

私はこれを含むインターネット上の多くのものを読みましたが、これは良いようです: YouTubeのビデオIDが完了したときにファンシーボックスを自動的に閉じるにはどうすればよいですか?

これは私が使用しているコードです: JsFiddle

$(".fancybox").fancybox({
    'openEffect'  : 'none',
    'closeEffect' : 'none',
    'overlayOpacity' : 0.7,
    'helpers' : {
        media : {}
    },
    'afterLoad' :   function() {
        function onYouTubePlayerReady(playerId) {
            //alert(playerId);
            //alert(document.getElementById("myytplayer"));
            ytplayer = document.getElementById("myytplayer");
            ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
        }

        function onytplayerStateChange(newState) {
            //alert("Player's new state: " + newState);
            if (newState == 0){
                $.fancybox.close(true);
            }
        }
    }
});

// Launch fancyBox on first element
$(".fancybox").eq(0).trigger('click');

誰かがこれを機能させたら、それは素晴らしいことです! ファンシーボックスが完成したら閉じるためのビデオです！

どうもありがとう

4

2 に答える 2

2

次の作業コードを参照してください (fancybox のバージョン 2 を使用する必要があります)。

jsfiddle : http://jsfiddle.net/c5h9U/2/

// Fires whenever a player has finished loading
function onPlayerReady(event) {
    event.target.playVideo();
}

// Fires when the player's state changes.
function onPlayerStateChange(event) {
    // Go to the next video after the current one is finished playing
    if (event.data === 0) {
        $.fancybox.close();
    }
}

// The API will call this function when the page has finished downloading the JavaScript for the player API
function onYouTubePlayerAPIReady() {

    // Initialise the fancyBox after the DOM is loaded
    $(document).ready(function() {
        $(".fancybox")
            .attr('rel', 'gallery')
            .fancybox({
                openEffect  : 'none',
                closeEffect : 'none',
                nextEffect  : 'none',
                prevEffect  : 'none',
                padding     : 0,
                margin      : 50,
                beforeShow  : function() {
                    // Find the iframe ID
                    var id = $.fancybox.inner.find('iframe').attr('id');

                    // Create video player object and add event listeners
                    var player = new YT.Player(id, {
                        events: {
                            'onReady': onPlayerReady,
                            'onStateChange': onPlayerStateChange
                        }
                    });
                }
            });
    // Launch fancyBox on first element
    $(".fancybox").eq(0).trigger('click');
    });

}
于 2013-02-14T19:17:58.967 に答える
0

考えられる原因：

  • 「ローカル」でのテスト ( http://localhostを経由せずにファイルをロードする)
  • Embed API (iframe を宣言する場所) と iframe API (DIV を宣言して JS をロードする場所) を混在させる。イベントは後者でのみ機能するようです。
  • DIV の ID が新しい YT.Player(...) 呼び出しの ID と一致しません
于 2018-05-09T19:42:59.347 に答える