2

我正在使用 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，并修改#ytplayersrc 属性以包含此视频 ID。然后将模态渲染到页面上，但我仍在等待 Youtube 的响应。

4

3 回答 3

0

不知道你是如何加载它的，但 AJAX 确实有一个本机回调：

$.ajax({
  url: 'myYouTubeData.html',
  success: function(){
    alert('success');
  },
  error: function(){
    alert('failure');
  }
});
于 2013-03-06T23:30:35.273 回答
0

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

于 2013-03-06T23:34:42.780 回答
0

我正在做的是在加载视频时将背景与视频混合，以使过渡更平滑。

    // 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);
        }
    }
于 2014-10-14T14:48:42.713 回答