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来处理我的 play 之间的交换和准备好（完成后）状态。

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

命名我的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还是play的消息。

听众

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

连接到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();

}

Answer 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代码（未经授权的版本）： http://billy.fm/wp-content/themes/billy/js/main.js

希望我有更多时间来帮助你，但这应该让你走上正轨。

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

2 个答案:

命名我的Vars

事件监听器/处理程序

连接到Vimeo API

玩家状态函数