intermittent issue - video.offset is not a function

[elevenpast]

Hello,
Using the latest release, and I get an intermittent error where the offset plugin will not work.

<script src="http://vjs.zencdn.net/5.18.4/video.js"></script>
<script src="http://107.20.191.154/video-js/offset/videojs-offset.1.0.1.js">

video = videojs('example_video_1');
video.offset({start: 100, end: 200, restart_beginning: true });

Uncaught TypeError: video.offset is not a function

This happens roughly 5% of the time. A page reload usually fixes it. I've been stuck on this for a few days, any help would be greatly appreciated.

J

[cladera]

Hi @elevenpast ,

In order to use offset plugin you must initialise the plugin as follows:

videojs('my-video', {
  plugins: {
    offset: {
      start: 10, //Start offset in seconds
      end: 40,    //End offset in seconds
      restart_beginning: false //Should the video go to the beginning when it ends
    }
  }
});

Otherwise videojs won't import the plugin and expose its methods.

[elevenpast]

Hello,

I've tried both methods and both give me intermittent failures.

The Videojs docs on Github show that either method can be used (https://github.com/videojs/video.js/blob/master/docs/guides/plugins.md).

Setting up a Plugin

There are two ways to set up (or initialize) a plugin on a player. Both ways work identically for both basic and advanced plugins.

The first way is during creation of the player. Using the plugins option, a plugin can be automatically set up on a player:

videojs('example-player', {
plugins: {
examplePlugin: {
customClass: 'example-class'
}
}
});
Otherwise, a plugin can be manually set up:

var player = videojs('example-player');
player.examplePlugin({customClass: 'example-class'});

These two methods are functionally identical - use whichever you prefer!

I can change it back to the other method as you suggest, but the problem will still be there.

J

[elevenpast]

Confirmed, but the error message is different. Plugin not found: offset

Again, it works fine most of the time, but I get an error about 1 out of 20.

J

[cladera]

Such intermittent errors point to a rather assets-loading problem. Perhaps, sometimes your code is attempting to initialise videojs before the scripts are fully loaded in your page?

Are you loading you javscripts files using something like SystemJs that might be loading them asynchronously?

Try to load you page with "No Cache" option enabled in your dev tools. I bet the error will now occur 100% of the times.

[elevenpast]

I'm not using SystemJs or anything like that.

I am testing on a machine with much slower internet, and it occurs 50% of the time. So it seems like a race condition for sure. How I can avoid that?

J

[cladera]

Make sure you load all vendors' scripts including offset plugin before load and run your app code.

Then, surround your code in a function so you are sure your code is evaluated when your page is ready.

This is your example code:

<script src="http://vjs.zencdn.net/5.18.4/video.js"></script>
<script src="http://107.20.191.154/video-js/offset/videojs-offset.1.0.1.js">

video = videojs('example_video_1');
video.offset({start: 100, end: 200, restart_beginning: true });

Try replacing it by

<script src="http://vjs.zencdn.net/5.18.4/video.js"></script>
<script src="http://107.20.191.154/video-js/offset/videojs-offset.1.0.1.js">

(function() {
  video = videojs('example_video_1');
  video.offset({start: 100, end: 200, restart_beginning: true });
})();

Sorry if you already tried this :P

[elevenpast]

Haven't tried that, I'm unfamiliar with that approach. Something isn't right with the syntax though.

J

[cladera]

Check this out:

http://plnkr.co/edit/iD4stUXyDS7ipTtnHltL?p=preview

[elevenpast]

I think you cracked it!!!!

The function() seems to do the trick, thanks so much for your help and getting me out of a jam.

Josh

[cladera]

Glad we sort it out.

I'm closing the issue.

Cheers!