javascript - vimeo 视频播放完毕后反转动画

Question

我有一个使用启动画面的视频模块，点击后会显示一个适用于 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 这样您就可以看到我所说的动画。

Answer 1

大家想通了!我将逐步解释每个代码块，以供任何人将来引用。

我能够在没有 froogaloop cdn 的情况下完成我需要做的事情，只需要使用 fitvids.js这是一个工作 fiddle我的解决方案。

我在下面列出了我所有的 JS，但是要回答我的“视频结束后反转我的功能”的问题，你只需要注意我的事件处理程序，与 API 的连接，以及播放器状态函数。一旦我能够建立连接并得知视频已结束，我就使用了 addClass(); 和 removeClass(); 以及 CSS Transitions 来处理我的播放 和就绪(完成后) 状态之间的交换。

我尽可能多地记录和解释，希望这能对将来的人有所帮助!

命名我的变量

这里没什么好说的，这只是初步的，主要要注意的是 var url 这是我唯一可以写的方式，让我可以使用我的听众和 Vimeo应用程序接口(interface)。

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 的消息，告知视频是就绪、暂停、完成 还是播放。

听众

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

我的处理程序很好......在我的函数被触发时处理。我的功能位于下方，这只是让我选择从 API 发送给我的状态(案例)以及如何对此使用react。

处理程序

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

连接到 Vimeo API

这部分与我的 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();

}