this.videoWidth should be exposed

[sethborg]

I used to be able to use the loadedmetadata event to change the video player width and height once the meta data was loaded but now this.videoWidth and this.videoHeight return undefined. It's been like this for the past few months worth of patches. not sure when it was broken

<video id="video" width="300" height="200" preload="auto" controls="controls" autoplay="autoplay" class="video-js vjs-default-skin">
  <source src="video.mp4" type="video/mp4" >
</video>

videojs('video', {}, function(){
    this.on('loadedmetadata', function() {
console.log(this.videoWidth);  // test with a 720x480 video for example
//document.getElementById('video').style.width = this.videoWidth + 'px';
//document.getElementById('video').style.height = this.videoHeight + 'px';
    });
});

Edits by @mmcc: Code fences

[heff]

Can you say which browser you're using and any plugins?

You could help us by creating a jsbin for your script there so we can verify it quickly. And then the next steps we would take here is to determine if anything changed with the video tag itself in the specific browser you're testing in.

[mmcc]

Was videoHeight ever actually a thing? There are height() and width() methods, but even all the way back to 4.1 (edit: 4.0.0) it looks like all the references are commented out (although, oddly enough, we are still exporting them.

So anyway, I'm not sure what version you were using, but afaik, those methods have never been available in 4.x

[sethborg]

width() and height() do not return the actual video's dimensions. What I'm doing here is setting the wrong dimensions beforehand and then resizing once the actual video's dimensions are received from the meta data.

It must have been before 4.0.0 then but it used to be a thing because this used to work. And it should be a thing now. What's the point of a loadedmetadata event if you can't use the metadata?

I'm on Windows 7. I'm using Firefox 36. I tried Chrome 40 and IE 11. It's not a browser issue.

[mmcc]

I absolutely, 100% agree that this should be implemented, I'm just nearly positive that it never was (that's 3.2.2, the last 3.x release). Perhaps you were querying the actual html5 tech for the information? You could still do that, it just wouldn't work for Flash.

[sethborg]

I tested back to 4.3 and couldn't find one that worked but I swear I was doing it at one point but perhaps you're right.

While you're in there, what other metadata is accessible that isn't exposed?

[mmcc]

This list should about sum it up.

[sethborg]

Maybe this will spur someone to add these features. I tried adding:

vjs.Html5.prototype.videoWidth = function(){ return this.el_.videoWidth; };
vjs.Html5.prototype.videoHeight = function(){ return this.el_.videoHeight; };

vjs.Flash.prototype['videoWidth'] = function(time){
return this.el_.vjs_getProperty('videoWidth');
};

vjs.Flash.prototype['videoHeight'] = function(time){
return this.el_.vjs_getProperty('videoHeight');
};

but it didn't work so I'm using (I'm using jquery here but you can easily change it to just DOM calls):

videojs('video', {}, function(){
this.on('loadedmetadata', function() {
if ($('#video_flash_api').length) {
$('#video').css({
width: $('#video_flash_api').get(0).vjs_getProperty('videoWidth'),
height: $('#video_flash_api').get(0).vjs_getProperty('videoHeight')
});
}
else {
$('#video').css({
width: document.getElementById('video_html5_api').videoWidth,
height: document.getElementById('video_html5_api').videoHeight
});
}
});
});

[heff]

This will make it into 5.0 with #1952. @sethborg I'd be interested to get your feedback on that one.

[sethborg]

I found my code that exposed this.videoWidth inside $('#video').on('loadedmetadata', function() {}

It seems to have something to do with using jquery and setting:

var v=$('<video id="datbox_video" preload="auto" controls="controls" autoplay="autoplay" class="video-js vjs-default-skin" style="display:none;"><source id="datbox_source" src="'+$(el).attr('href')+'" type="video/mp4" /></video>');

Any idea why this works? Source code (datbox.js) http://sethb.org/datbox/

[heff]

Closing this because I believe it was fixed by #1952. Correct me if you find otherwise.

@sethborg I think that probably works because it's adding the event listener directly to the video element instead of the player.

[ayyash]

I don't understand, I followed all the related tickets, I just downloaded the latest version, but I still don't see how to read the metadata videoWidth? any pointers?

[ayyash]

Oh, I think i get it now

videojs('video', {}, function(){
    this.on('loadedmetadata', function() {
       console.log(document.getElementById("video").videoWidth);
    });
});

[flvingdutchman]

videojs('video', {}, function(){
    this.on('loadedmetadata', function() {
       console.log(this.videoWidth());
    });
});

Can also do the trick