Question

我正在使用AJAX动态更改Youtube视频的视频ID。我的AJAX呼叫几乎是即时的，但我注意到在Youtube上发出我的请求以获取我的下一个视频的内容时出现延迟。因此，我想隐藏我的Youtube播放器，因为我正在等待Youtube的响应。

我的问题是如何检测我的Youtube视频何时通过JavaScript加载？

<iframe id="ytplayer" class="hide" type="text/html" width="840" height="470" src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen>

编辑 - 我的AJAX如何运作：

当用户点击我网站上的视频按钮时，会出现一个模态。当模态加载时，我的AJAX从我的数据库中提取视频ID，并修改#ytplayer的src属性以包含此视频ID。然后将模态渲染到页面上，但我仍在等待Youtube的响应。

Answer 1

不确定如何加载它，但AJAX确实有本机回调：

$.ajax({
  url: 'myYouTubeData.html',
  success: function(){
    alert('success');
  },
  error: function(){
    alert('failure');
  }
});

Answer 2

如果您使用的是iframe API，则可以使用player.getPlayerState():Number，也可以在同一页面中使用Events API。也许使用onStateChange并听取YT.PlayerState.ENDED隐藏播放器的CSS。当它切换到YT.PlayerState.PLAYING或YT.PlayerState.BUFFERING等其他状态时，您可以再次显示它。

Answer 3

我正在做的是在加载视频时将背景与视频混合，以使转换更顺畅。

    // set up iframe player, use global scope so YT api can talk
    window.player;
    window.onYouTubeIframeAPIReady = function () {
        player = new YT.Player('tubular-player', {
            width: options.width,
            height: Math.ceil(options.width / options.ratio),
            videoId: options.videoId,
            playerVars: {
                controls: 0,
                showinfo: 0,
                modestbranding: 1,
                wmode: 'transparent'
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    window.onPlayerReady = function (e) {
        resize();
        if (options.mute)
            e.target.mute();
        e.target.seekTo(options.start);
        e.target.playVideo();
    }

    window.onPlayerStateChange = function (state) {
        if (state.data === 0 && options.repeat) { // video ended and repeat option is set true
            player.seekTo(options.start); // restart
        }
        if (state.data == YT.PlayerState.PLAYING) { // video ended and repeat option is set true
            $(".initial-video-image").fadeTo(1000, 0);
        }
    }

Youtube - 检查视频加载时

3 个答案: