hexylena / videojs-framebyframe

frame-by-frame stepping plugin for use with video.js
GNU General Public License v3.0
118 stars 36 forks source link

Diferent implemetation #9

Open PhilipeGatis opened 6 years ago

PhilipeGatis commented 6 years ago

This implementation uses frame control. It uses frame numbers instead of time control.

var VjsButton = videojs.getComponent('Button');
    var FBFButton = videojs.extend(VjsButton, {
        constructor: function(player, options) {
            VjsButton.call(this, player, options);
            this.player = player;
            this.frameTime = 1/options.fps;
            this.step_size = options.value;
            this.on('click', this.onClick);
        },

        onClick: function() {
            // Start by pausing the player
            this.player.pause();
            // Calculate movement distance
            var dist = this.step_size;
            this.player.currentFrame = this.player.currentFrame + dist;
            console.log('current pause:', (this.player.currentFrame * this.frameTime).toFixed(2));
            this.player.currentTime((this.player.currentFrame * this.frameTime).toFixed(2));
        }
    });

    function framebyframe(options) {
        var player = this,
            frameTime = 1 / options.fps;

        player.on('loadeddata', function() {
            player.totalFrames = player.duration() / frameTime;
            player.currentFrame = 0;
        });

        player.on('timeupdate', function() {
            player.currentFrame = Math.round(player.currentTime() / frameTime);
            console.log('current pause:', player.currentFrame)
        });

        player.ready(function(a) {

            options.steps.forEach(function(opt) {
                player.controlBar.addChild(
                    new FBFButton(player, {
                        el: videojs.createEl(
                            'button',
                            {
                                className: 'vjs-res-button vjs-control',
                                innerHTML: '<div class="vjs-control-content" style="font-size: 11px; line-height: 28px;"><span class="vjs-fbf">' + opt.text + '</span></div>'
                            },
                            {
                                role: 'button'
                            }
                        ),
                        value: opt.step,
                        fps: options.fps,
                    }),
                    {}, opt.index);
            });

        });
    }
    videojs.plugin('framebyframe', framebyframe);
hexylena commented 6 years ago

Does this implementation provide any advantage over the existing one?

PhilipeGatis commented 6 years ago

Sorry, I used google translator to write this text. I think so. In this implementation you have a clear control setting the time of the video according to the frame. we currently estimate the frame according to the current time of the video. For example: the time at the time of pause can be a fraction of the time between one frame and another and not exist 1.5 or 1.3 frame.