feature request: expose version from player.version()

[Svarozic]

I am using videojs via NPM https://videojs.com/getting-started/#install-via-npm and I cant find a way, how to access videojs.VERSION that would be normally available, if I would use videojs via CDN.

Is it possible to get version of video JS from Player instance https://docs.videojs.com/player ?

Steps to reproduce:

• create for example REACT app with videojs like https://videojs.com/guides/react/
• try to get videojs version from Player instance or global object

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[amtins]

@Svarozic

Is it possible to get version of video JS from Player instance https://docs.videojs.com/player ?

No, because videojs.VERSION is the version of the library, whereas the player is a component. However, it is possible to expose the version through the player instance. Here are 3 possibilities

When instantiating the player

const player = videojs('my-player', {
vjsVersion : videojs.VERSION
});

// Access the value
player.options().vjsVersion;

Modifying the Player component prototype

videojs.getComponent('Player').prototype.VJS_VERSION = videojs.VERSION;
const player = videojs('my-player');

// Access the value
player.VJS_VERSION;

Modifying the Component component prototype

videojs.getComponent('Component').prototype.VJS_VERSION = videojs.VERSION;
const player = videojs('my-player');

// Access the value
player.VJS_VERSION;
player.controlBar.VJS_VERSION;
// ... or any other component

You can rename VJS_VERSION to VERSION if you prefer. Hope this helps.

[gkatsev]

Also, are you saying that videojs.VERSION isn't working for you? Because it should be working as far as I can tell. Can you provide a specific test case that shows it not working?

[Svarozic]

Thank you @amtins for nice workaround and 3 showcases.

@gkatsev no, because window.videojs.VERSION is not initialised and/or VERSION property does not exists on function videojs that I import from npm package (I am not using script with CDN link)

In my case, I am developing on analytics library that works with VideoJS player. I am receiving already created instance of Player, I am listening to player events and report them. I also need to get a version of VideoJS library that was used to create that VideoJS player and send it as part of that report, and that is a reason, why I have created this issue.

Until now, consumers of my library have been using CDN VideoJS integration, where I could relay on window.videojs.VERSION, but once they started to use VideoJS via npm, this version started to be reported as undefined (which makes sense). I have tried to inspect Player instance, to see, if VideoJS library version is present there, but I have not found anything, so I have decided to create an issue and ask for help here.

[gkatsev]

When using npm, videojs doesn't get added to window by default. It'll be available on the object you require/import:

import videojs from 'video.js';

console.log(videojs.VERSION);

[Svarozic]

import videojs from 'video.js';

console.log(videojs.VERSION);

this does not work, at least package video.js@8.6.1 that I use, does not have VERSION property on function videojs imported from that package

[gkatsev]

It definitely is there and it works. Is it a type issue you're running into maybe?

See for a running example https://stackblitz.com/edit/stackblitz-starters-w9ggsk?description=React%20%20%20TypeScript%20starter%20project&file=src%2FApp.tsx,package.json&title=React%20Starter

[Svarozic]

@gkatsev it is there, thank you very much. It was a type issue on my site , this made it work (also with version 8.6.1 I work with)

import videojs from 'video.js'; 

// @ts-ignore
console.log(videojs.VERSION);                

I would consider this issue as solved.

But to solve my problem, may I somewhere ask for "new feature" , could Player instance have VERSION / version property with version of VideoJS library that was used to create that "Player component" ?

[gkatsev]

I've definitely thought that there should be a version on the player before. And we should figure out the type issue.

[Svarozic]

What would help me would be, if VideoJS library would also store library version to created instance of Player, created by videojs() function

import videojs from 'video.js';

const myPlayer = videojs(videoElement, VIDEOJS_OPTIONS);

console.log(myPlayer.version);
// or
console.log(myPlayer.VERSION); 

because in my case, my analytics library I am working on, can only access that Player instance. Is this possible or would it be a new feature request ?

[amtins]

@Svarozic shouldn't it be the role of the analytics library to ask which version of the player is being used?

Something like:

class Analytics {
  constructor(player, vjsVersion=videojs.VERSION){}
}

// OR
class AnalyticsAlternative {
  constructor(player, params, vjsVersion=videojs.VERSION)
}


// Usage
const player = videojs('player');

new Analytics(player); // will have an implicit videojs version
new AnalyticsAlternative(player, {prop1: true, prop2: 'yes'}); // will have an implicit videojs version

For comparison, here's what we do https://github.com/SRGSSR/pillarbox-web/blob/2785d8dcdefa10abc17464d53ad5479da3e48828/src/middleware/srgssr.js#L230-L235

[Svarozic]

@amtins this is something, what I am considering as possible solution to go with, to let consumer pass version as options/params property to Analytics library constructor.

But because my analytics library was detecting that version automatically before, using only simple new Analytics(videoJsPlayer); (because consumer had CDN integration of VideoJS, so my library could pick version from window.videojs.VERSION), I wanted to ask about possible "version" property in VideoJS Player instance first, to be able to have same behaviour, even when NPM integration of VideoJS is used.

The solution with default value:

class Analytics {
  constructor(player, vjsVersion=videojs.VERSION){}
}

... can not work for me, because my library is published as independent package, without video.js dependency (without import videojs from 'video.js' in Analytics class)

[amtins]

Perhaps another idea would be to provide a videojs plugin that would ensure access to the videojs version and perhaps even simplify the developer experience.

package.json

{
  "name": "analytics-plugin.js",
  "version": "1.0.0",
  "peerDependencies": {
    "video.js": ">=7",
    "analytics": ">=1"
  }
}

plugin

import videojs from 'video.js';
import Analytics from 'Analytics.js';

class AnalyticsPlugin extends videojs.getPlugin('plugin') {
  constructor(player, options) {
    super(player, options);
    this.instance = new Analytics(player, params);
  }
}

usage

import videojs from 'video.js';
import 'analytics-plugin.js';

const player = videojs('my-player', {
  plugins: {
    analyticsPlugin: {
      customerAccount: 'platinum',
      prop1: true,
      prop2: 'yes',
    },
  }
});

player.analyticsPlugin().instance.somePublicAPI()

[gkatsev]

Those are great workarounds @amtins!

I do think that having the version on the player instance would be useful. I've definitely wished for it previously when debugging in production. Since we add the player instance as a property of the player element, we can get the player instance easily in dev tools but getting videojs may not be easy if the site was built using a bundler. So, player.version() or something would be helpful.
I think it would be cool if it could work similar to how VHS's version() method works where it will include versions of loaded plugins, techs, source handlers etc., when it's able to get those versions.

[amtins]

@gkatsev player.version() looks good. 👍🏽

[Svarozic]

thank you for supporting me with my issue and for quick response, it was impressive ;)

In my case, that new feature player.version() would help me a lot @gkatsev @amtins .
Where could I follow it to see its progress and when it would be released ?

[amtins]

@Svarozic could you reopen the issue, so we can link the PR to it? That way you'll be notified.

[gkatsev]

Reopened and updated the issue title

[amtins]

@Svarozic would you like to propose a PR for this feature? That would be a great contribution! 💯

[Svarozic]

@Svarozic would you like to propose a PR for this feature?

@amtins I tried to make something quickly here #8543