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

#jquery #jquery-plugins #youtube-api

#jquery #jquery-плагины #youtube-api

Вопрос:

После того, как мое видео на 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. Теперь, если бы я только мог приукрасить / минимизировать конец видео! Большое спасибо.

Ответ №1:

Вы можете добиться этого с помощью 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>
 

Комментарии:

1. Привет, Ахмед, я проверю это, когда вернусь к этой части сборки сайта и дам вам знать. Спасибо за ваше терпение.

Ответ №2:

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

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

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

Комментарии:

1. Проблема с этим подходом заключается в том, что вам нужно полагаться на тайм-аут, а не смотреть, что делает видео. Например, это не удастся, если пользователь поставит видео на паузу.

Ответ №3:

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


onPlayerEnded: function(){
jQuery("#your-tubeplayer")
.tubeplayer("seek", 0)
.tubeplayer("pause");
}

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

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

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

Комментарии:

1. кроме того, теперь я замечаю, что параметр автоматического скрытия реализован не полностью. извините за это. я исправлю это, как только смогу