Skip to content
This repository has been archived by the owner on Aug 21, 2019. It is now read-only.

Diferent implemetation #9

Open
PhilipeGatis opened this issue Mar 28, 2018 · 2 comments
Open

Diferent implemetation #9

PhilipeGatis opened this issue Mar 28, 2018 · 2 comments

Comments

@PhilipeGatis
Copy link

PhilipeGatis commented Mar 28, 2018

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
Copy link
Owner

Does this implementation provide any advantage over the existing one?

@PhilipeGatis
Copy link
Author

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants