问题 完成vimeo视频播放时反转动画

想出来的每个人！我将逐步解释每一块代码，以供将来参考。

如果没有froogaloop cdn，我就能完成我需要做的事情 fitvids.js 这是一个工作 小提琴 我的解决方案。

我在下面的部分列出了我的所有JS，但是对于我在“视频完成后撤消我的功能”问题的答案，你只需要注意我的 事件处理程序， 连接到API，和 玩家状态函数。一旦我能够建立连接并读取视频结束，我就用了 addClass(); 和 removeClass(); 再加上CSS Transitions 处理我的交换 玩 和 准备好（完成后） 状态。

我尽可能多地记录和解释，希望这可以帮助将来的某个人！

命名我的Vars

这里不多提，这只是初步的，要注意的主要是 var url 这是我写它的唯一方法，允许我使用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 /播放器的关于视频是否是的消息 ready， paused， finished 要么 playING。

听众

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

我的处理程序很好......当我的函数被触发时处理。我的函数位于下面，这只是让我选择从API发送的状态（case）以及如何对它做出反应。

处理器

// 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 /播放器，允许我运行，暂停和停止视频

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

}