Git Product home page Git Product logo

Comments (20)

gkatsev avatar gkatsev commented on June 11, 2024 3

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.

from video.js.

gkatsev avatar gkatsev commented on June 11, 2024 1

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

from video.js.

amtins avatar amtins commented on June 11, 2024 1

@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

from video.js.

amtins avatar amtins commented on June 11, 2024 1

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()

from video.js.

amtins avatar amtins commented on June 11, 2024 1

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

from video.js.

gkatsev avatar gkatsev commented on June 11, 2024 1

Reopened and updated the issue title

from video.js.

amtins avatar amtins commented on June 11, 2024 1

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

from video.js.

welcome avatar welcome commented on June 11, 2024

👋 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.

from video.js.

amtins avatar amtins commented on June 11, 2024

@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.

from video.js.

gkatsev avatar gkatsev commented on June 11, 2024

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?

from video.js.

Svarozic avatar Svarozic commented on June 11, 2024

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.

from video.js.

gkatsev avatar gkatsev commented on June 11, 2024

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);

from video.js.

Svarozic avatar Svarozic commented on June 11, 2024
import videojs from 'video.js';

console.log(videojs.VERSION);

this does not work, at least package [email protected] that I use, does not have VERSION property on function videojs imported from that package

from video.js.

Svarozic avatar Svarozic commented on June 11, 2024

@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" ?

from video.js.

gkatsev avatar gkatsev commented on June 11, 2024

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

from video.js.

Svarozic avatar Svarozic commented on June 11, 2024

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 ?

from video.js.

Svarozic avatar Svarozic commented on June 11, 2024

@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)

from video.js.

Svarozic avatar Svarozic commented on June 11, 2024

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 ?

from video.js.

amtins avatar amtins commented on June 11, 2024

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

from video.js.

Svarozic avatar Svarozic commented on June 11, 2024

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

@amtins I tried to make something quickly here #8543

from video.js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.