Switch up the animation direction after the vimeo video finishes playing

Question

Switch up the animation direction after the vimeo video finishes playing

My video module has a splash screen that reveals a full-screen video when clicked for screen sizes 667+. I want to reverse the animation after the video ends and return to the splash screen. I'm unsure of how to approach this or if it's even possible. Any assistance would be greatly appreciated!

    $(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);
                }
            });

});

Don't forget to resize my JSFiddle to see the animation in action.

javascript jquery css

Answer 1

Answer №1

Exciting news, I have cracked the code! Let me break down each part of the code for better understanding and reference in the future.

Without utilizing the froogaloop cdn, I was able to achieve my goal by simply using fitvids.js. Here is a functioning fiddle showcasing my solutions.

In the JS sections below, focus on the answer to "reversing my function after video finishes." You will mainly need to pay attention to my Event Handlers, Connection to the API, and Player State Functions. By establishing the connection and detecting when the video ends, I used addClass(); and removeClass(); along with CSS Transitions to manage the transition between the play and ready (post finish) states.

I have tried to document and explain as thoroughly as possible, hoping that this can benefit someone down the line!

Assigning Variables

Nothing significant here, just the initial setup. Pay close attention to var url as it's crucial for utilizing listeners with the 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 video playing state
           standardClass = "standard"; // Class for video finished/before play state

Event Listeners / Handlers

The listeners await messages from the api/player indicating if the video is ready, paused, finished, or playing.

listeners

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

The handlers determine how my functions are triggered based on the received state (case) from the API.

handlers

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

    switch (data.event) {
        case 'ready':
            onReady();
            break;

        case 'pause':
            onPause();
            break;

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

Connecting to the Vimeo API

This segment coordinates with my html play button and vimeo's api/player to execute, pause, and stop the video.

// 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);
}

Player State Functions

Determining actions based on the player's current state or case.

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();
}

Answer 2

Exciting news, I have cracked the code! Let me break down each part of the code for better understanding and reference in the future.

Without utilizing the froogaloop cdn, I was able to achieve my goal by simply using fitvids.js. Here is a functioning fiddle showcasing my solutions.

In the JS sections below, focus on the answer to "reversing my function after video finishes." You will mainly need to pay attention to my Event Handlers, Connection to the API, and Player State Functions. By establishing the connection and detecting when the video ends, I used addClass(); and removeClass(); along with CSS Transitions to manage the transition between the play and ready (post finish) states.

I have tried to document and explain as thoroughly as possible, hoping that this can benefit someone down the line!

Assigning Variables

Nothing significant here, just the initial setup. Pay close attention to var url as it's crucial for utilizing listeners with the 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 video playing state
           standardClass = "standard"; // Class for video finished/before play state

Event Listeners / Handlers

The listeners await messages from the api/player indicating if the video is ready, paused, finished, or playing.

listeners

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

The handlers determine how my functions are triggered based on the received state (case) from the API.

handlers

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

    switch (data.event) {
        case 'ready':
            onReady();
            break;

        case 'pause':
            onPause();
            break;

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

Connecting to the Vimeo API

This segment coordinates with my html play button and vimeo's api/player to execute, pause, and stop the video.

// 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);
}

Player State Functions

Determining actions based on the player's current state or case.

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();
}

Answer 3

Answer №2

If you want to detect the end of a video and execute JavaScript code, consider utilizing the Froogaloop library.

Check out this link for more information:

You can implement something like this:

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

player.addEvent('ready', function() {
    player.addEvent('finish', function() {
        // Execute animation here...
    });
});

For a list of different events, visit:

I used this approach on a recent project to close a modal window when a video ends:

Feel free to explore the unminified JS code here:

I wish I could offer more assistance, but hopefully, this will point you in the right direction.

Answer 4

If you want to detect the end of a video and execute JavaScript code, consider utilizing the Froogaloop library.

Check out this link for more information:

You can implement something like this:

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

player.addEvent('ready', function() {
    player.addEvent('finish', function() {
        // Execute animation here...
    });
});

For a list of different events, visit:

I used this approach on a recent project to close a modal window when a video ends:

Feel free to explore the unminified JS code here:

I wish I could offer more assistance, but hopefully, this will point you in the right direction.

Switch up the animation direction after the vimeo video finishes playing

Answer №1

Assigning Variables

Event Listeners / Handlers

Connecting to the Vimeo API

Player State Functions

Answer №2

Similar questions

We encountered an error: The function setName is not defined

What is the best way to toggle dropdown menu items using jQuery?

Saving a Coordinated Universal Time and showcasing it in the corresponding local timezone

What is the best way to create a PHP session variable upon clicking a button while remaining on the current page?

Is it possible to solve a mathematical equation entered into a text box that resembles an Excel cell, complete with an equal sign?

Transform seconds into an ISO 8601 duration using JavaScript

Altering the appearance of a different element with React

Is it possible to use a webcam to scan a QR code directly into a webpage?

send information via an ajax call to trigger a callback function

Shopping cart has encountered an issue with storing the data correctly

Tips for deleting a text node preceding a div element?

Sending Information from Node/Express to Client-Side JavaScript

Tips on customizing the navigation bar color in Bootstrap

Hover effect exclusively for specific child elements

Adjust picture based on the MaterialUI slider's value

What is the best way to create a cornered button using CSS?

Utilizing Javascript for logging into Facebook

The process of updating UseContext global state in React Native and ensuring that the change is reflected across all screens

Tips for maintaining the data on a page continuously updating in AngularJS

The ajax request does not support this method (the keydown event is only active during debugging)