Comments (20)
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.
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.
@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.
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.
@gkatsev player.version()
looks good. 👍🏽
from video.js.
Reopened and updated the issue title
from video.js.
@Svarozic would you like to propose a PR for this feature? That would be a great contribution! 💯
from video.js.
👋 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.
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.
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.
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.
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.
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.
@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.
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.
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.
@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.
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.
@Svarozic could you reopen the issue, so we can link the PR to it? That way you'll be notified.
from video.js.
@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)
- How do I disable pauses in the video tag? HOT 3
- [8.13.0] HTML-validation errors with the new version
- Is there any way to play clean h265 videos with the current player? HOT 5
- player.currentSources() - When the video is playing, missing all the sources when the first source is not an absolute URL HOT 3
- electron Enable hardware acceleration suppression,Play HEVC265 video,Black screen HOT 2
- Use HLS, We got some variable errors HOT 5
- [8.14.0] Type errors
- How to block video's whitespace default event
- Qulaity selector integration issue in react js HOT 2
- HLS + Fairplay streams buffers a lot in Mac Safari browser. HOT 3
- Volume slider not accessible using TalkBack HOT 1
- Poor Video Streaming Support - How to Improve??? HOT 3
- Why player.volume(val) fires volumechange event? HOT 3
- DRM | Safari | Fair Play License is not being called HOT 2
- The player does not support m3u8 videos in H265 format HOT 2
- [8.14.1] Type errors HOT 11
- [8.14.1] Duplicate HTML IDs
- It works for adding other custom headers but not working for overwriting the 'User-Agent' request header. Can you please refer to some information about it. HOT 9
- Mouseover tooltip on progress bar is not in sync with cursor when Zoom is used in css HOT 1
- More duplicate HTML IDs
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from video.js.