Youtube – проверьте, загружается ли видео

Я использую AJAX для динамического изменения идентификатора видео моего видео на Youtube. Мой вызов AJAX почти мгновенный, но я заметил задержку при запуске моего запроса на 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 извлекает идентификатор видео из моей базы данных по мере загрузки модального окна и изменяет атрибут #ytplayer src, чтобы включить этот идентификатор видео. Затем модальное окно отображается на странице, но я все еще жду ответа от Youtube.


javascript youtube youtube-javascript-api
person Jon    schedule 06.03.2013    source источник
comment
завершена загрузка, как в, весь контент может быть полностью воспроизведен, если он в автономном режиме?   -  person John Riselvato    schedule 07.03.2013
comment
@JohnRiselvato Подтверждаю.   -  person Jon    schedule 07.03.2013

Ответы (3)


arrow_upward
0
arrow_downward

Не уверен, как вы его загружаете, но у AJAX есть собственный обратный вызов:

$.ajax({
  url: 'myYouTubeData.html',
  success: function(){
    alert('success');
  },
  error: function(){
    alert('failure');
  }
});
person JerryHuang.me    schedule 06.03.2013
comment
Извините, я изменю свой вопрос, чтобы указать, как работает мой AJAX. - person Jon; 07.03.2013

arrow_upward
0
arrow_downward

Если вы используете iframe API, возможно, вы можете использовать player.getPlayerState():Number или Events API. на той же странице. Возможно, используйте onStateChange и слушайте YT.PlayerState.ENDED, чтобы скрыть проигрыватель с помощью CSS. Когда он переключается в какое-либо другое состояние, например YT.PlayerState.PLAYING или YT.PlayerState.BUFFERING, вы можете показать его снова.

person Jorge Israel Peña    schedule 06.03.2013

arrow_upward
0
arrow_downward

Что я делаю, так это смешиваю фон с видео, когда видео загружается, чтобы сделать переход более плавным.

    // 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);
        }
    }
person open-ecommerce.org    schedule 14.10.2014