Воспроизведение анимации при воспроизведении видео Vimeo

У меня есть видеомодуль, который использует заставку и щелчок, показывает полноэкранное видео для размеров экрана 667+. Я бы хотел, чтобы это изменило анимацию после окончания видео, чтобы она вернулась к экрану заставки. Я не совсем уверен, где даже начать или это возможно. Любая помощь приветствуется!

    $(function(){

    var $parent = $('.video-hero'),
            $video = $parent.find('iframe'),
            $playButton = $(".play"),
            $itemsToFadeOut = $(".vid-cap, .ghost"),
            f = $video[0],
            url = $video.attr('src').split('?')[0],
            activeVideoClass = "video-started";

            // setup fitVids
            $parent.fitVids();

            // handle play click
            $playButton.click(function(e){

                e.preventDefault();

                // grab height of video
                var videoHeight = $video.height();

                // add class to hero when video is triggered
                $parent.addClass(activeVideoClass);

                // fade out the play button
                $(this).fadeOut("fast");

                // fade out poster image, overlay, and heading
                $itemsToFadeOut.fadeOut();

                // toggle accessibility features
                $video.attr({
                    "aria-hidden" : "false",
                    "tabindex" : "0"
                });

                // set focus to video for accessibility control
                $video.focus();

                // set height of hero based on height of video
                $parent.css("max-height",videoHeight).height(videoHeight);

                // send play command to Vimeo api
                runCommand('play');

            });

            // send play to vimeo api
            var runCommand = function(cmd){
                var data = {method : cmd};
                f.contentWindow.postMessage(JSON.stringify(data), url);
            }

            // handle resize
            $(window).resize(function(){
                var videoHeight = $video.height();
                if($(".video-started").size() === 1){
                    $parent.height(videoHeight);
                }
            });

});

Не забудьте изменить размер JSFiddle, чтобы вы могли видеть анимацию, о которой я говорю.

Ответ 1

Подумал все! Я объясню каждый фрагмент кода шаг за шагом для любой будущей ссылки.

Я смог выполнить то, что мне нужно было сделать без cdn froogaloop, и просто используя fitvids.js здесь работает fiddle моих решений.

Я перечислил все мои JS ниже в разделах, но для ответа на мой вопрос о "реверсировании моей функции после окончания видео" вам нужно только обратить внимание на мои обработчики событий, Подключение к API и Функции состояния игрока. Как только я смог установить соединение и прочитать, что видео было закончено, я использовал addClass(); и removeClass(); в сочетании с CSS Transitions для обработки обмена между моими играми и состояниями готовности (post finish).

Я пытался документировать и объяснять, насколько мог, надеюсь, это может помочь кому-то в будущем!

Именование моих варов

Не так много упоминания здесь, это просто предварительный, главное, чтобы обратить внимание на то, что это единственный способ, которым я мог бы написать его, чтобы позволить мне использовать мои слушатели с Vimeo api.

var parent = $('.video-hero'), 
                 f = $('iframe'),
                 $playButton = $(".play"),
                 $itemsToFadeOut = $(".vid-cap, .ghost, .play"),
                 $video = f[0],
                 url = f.attr('src').split('?')[0],
                 activeVideoClass = "video-started", //Class for when video is playing
           standardClass = "standard"; //Class for when video is finished/before play

Слушатели/обработчики событий

Мои слушатели просто ждут, чтобы получить сообщение от api/player о том, является ли видео ready, paused, finished или play ing.

слушателей

// Listen for messages from the player
if (window.addEventListener){
    window.addEventListener('message', onMessageReceived, false);
}
else {
    window.attachEvent('onmessage', onMessageReceived, false);
}

Мои обработчики хорошо... обрабатывают, когда мои функции запущены. Мои функции расположены ниже, это просто позволяет мне выбрать, какое состояние (случай) я отправляю из API и как реагировать на него.

Обработчики

// Handle messages received from the player
function onMessageReceived(e) {
    var data = JSON.parse(e.data);

    switch (data.event) {
        //Ready case is before play / after finish
            case 'ready':
            onReady();
            break;

        case 'pause':
            onPause();
            break;

        case 'finish':
            onFinish();
            break;
    }
}

Подключение к API Vimeo

Этот раздел связывается рука об руку с моей кнопкой html play и vimeo api/player, позволяя мне запускать, приостанавливать и останавливать видео

// send play to vimeo api
            var runCommand = function(cmd){
                var data = {method : cmd};
                f[0].contentWindow.postMessage(JSON.stringify(data), url);
            }


// Helper function for sending a message to the player
function post(action, value) {
    var data = { method: action };

    if (value) {
        data.value = value;
    }

    f[0].contentWindow.postMessage(JSON.stringify(data), url);
}

Функции состояния игрока

Что будет происходить в зависимости от того, какое состояние или случай игрока находится в

function onReady() {
    post('addEventListener', 'finish');

}

  function onPause() {
    console.log('paused');
}

function onFinish() {
  // add class to hero when video is triggered
                parent.removeClass(activeVideoClass);
parent.addClass(standardClass);
                // fade out the play button
                $(this).fadeIn("slow");
                // fade out poster image, overlay, and heading
                $itemsToFadeOut.fadeIn();

}

Ответ 2

Чтобы обнаружить конец видео и запустить JS-код, вам может понадобиться библиотека Froogaloop:

https://developer.vimeo.com/player/js-api#universal-with-froogaloop

Затем вы можете сделать что-то вроде:

var player = $f(iframe[0]);

player.addEvent('ready', function() {
    player.addEvent('finish', function() {
        // Animation...
    });
});

Различные события здесь: https://developer.vimeo.com/player/js-api#events

Я делаю это на сайте, который я недавно создал, чтобы закрыть модальное окно на конце/конце видео: http://billy.fm/

Невозможно проверить JS-код там (unminified version): http://billy.fm/wp-content/themes/billy/js/main.js

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