Как повторно просмотреть кадр предварительного просмотра видео в конце воспроизведения с помощью плагина jquery "tubeplayer" - PullRequest
Новая
       5

Как повторно просмотреть кадр предварительного просмотра видео в конце воспроизведения с помощью плагина jquery "tubeplayer"

4 голосов
/ 31 октября 2011

После того, как мое видео на YouTube закончится, я бы хотел вернуть его в исходное состояние.Мне не нравится черный экран со ссылками в конце, и я также предпочел бы скрыть панель управления, которая, хотя и настроена на автоматическое скрытие, не скрывается, когда видео останавливается.Возможно ли это с использованием 

onPlayerEnded: function(){}, // when the player returns a state of ended

и 

onStop: function(){}, // after the player is stopped

?

Имейте в виду, что это будет для версии объекта, а не для iframe.Tumblr (как правило) встраивает YouTube как flash, а не iframe.

Вы можете увидеть и пример здесь: http://syndex.me,, который, кстати, уже успешно справляется с кучей вещей с ограничением Tumblr для видеочерез чертовски красивый плагин tubeplayer.Теперь, если только я могу также улучшить / минимизировать конец видео!Спасибо большое.

Ответы [ 3 ]

2 голосов
/ 12 ноября 2011

Этого можно добиться с помощью JSAPI YouTube.Вместо того, чтобы ждать, пока игрок закончит, у меня будет таймер, чтобы проверить, когда время игрока достигло продолжительности, поэтому видео завершено, но это до того, как игрок начинает закрываться.Затем вы просто возвращаетесь к 0 и делаете паузу, вот так: 

var i   = setInterval( checkPlayer, 100 );

function checkPlayer()
{
    if ( player.getCurrentTime() >= player.getDuration() )
    {
        clearInterval( i );

        player.seekTo( 0 );

        player.pause();
    }
}

А вот рабочий код: 

<div id="player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
<!--
    var player;
    var int;

    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'u1zgFlCw8Aw',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
            int = setInterval(handleInterval, 100);
        }
    }

    function handleInterval() {
        if (player.getCurrentTime() >= player.getDuration()) {
            player.pauseVideo();

            player.seekTo(0);
        }
    }
-->
</script>
0 голосов
/ 12 ноября 2011

У Ахмеда была правильная идея. Вы можете повторить это в плагине tubeplayer, используя метод onPlayerEnded, выполнив следующее:

onPlayerEnded: function(){<br> <code> jQuery ("# ​​your-tubeplayer")
.tubeplayer ("seek", 0)
.tubeplayer («пауза»);
}

Стоит отметить, что метод onStop является перехватчиком 'триггера'. Методы onPlayer [X] фактически вызываются проигрывателем, тогда как другие события onX используются для ловушек при вызове tubeplayer для выполнения желаемой операции.

W.r.t. скрытие панели управления: используете ли вы showControls: false? Насколько я могу судить, вы можете только установить, хотите ли вы показывать элементы управления во время создания экземпляра самого проигрывателя YouTube (и не можете изменить его на лету позже).

Я протестировал вышеуказанное исправление, и панель управления остается скрытой при использовании showControls: false.

0 голосов
/ 08 ноября 2011

Быстрый и грязный подход - установить интервал таймера, который будет на 5 секунд длиннее видео, а затем запустить onPlayerEnded после завершения интервала. Начните интервал с размытия или focusOut, в основном это событие мыши, которое, вероятно, будут делать люди. 

$(".video").blur(function() {
  $("#something").delay(30500).queue(function() {
    // do something..

Если вы хотите получить полный контроль, тогда вы можете использовать Javascript API YouTube с обратными вызовами и событиями. http://code.google.com/apis/youtube/js_api_reference.html#SubscribingEvents

...