videojs 6.2 compatibility (with webpack)

[neilsmind]

Was attempting to use this plugin with video.js 6.2.7 today and discovered that it doesn't work. I received the following error:

import videojs from 'video.js';
import framebyframe from 'videojs-framebyframe';

videojs.framebyframe.js?78a0:3 Uncaught ReferenceError: videojs is not defined

Is there something I'm doing wrong here? (Videojs without the framebyframe import works fine)

Assuming it's a compatibility issue similar to https://github.com/videojs/videojs-youtube/issues/465, would you be open to a pull request?

[hexylena]

Have not tested on newer versions, I haven't been updating my videojs. Yes open to PRs.

[mjs2020]

For the time being I've just had to copy-paste the module into my repo like so:

frame-by-frame-plugin.js:

import videojs from 'video.js'
// videojs-framebyframe-plugin

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.frameTime * this.step_size;
        this.player.currentTime(this.player.currentTime() + dist);
    },
});

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

    player.ready(function() {
        options.steps.forEach(function(opt) {
            player.controlBar.addChild(
                new FBFButton(player, {
                    el: videojs.dom.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);
        });
    });
}

module.exports = framebyframe;

and then where I intend to use it:

import videojs from 'video.js'
import framebyframe from 'path/to/frame-by-frame-plugin.js';
videojs.registerPlugin('framebyframe', framebyframe);