javascripthtml5-videoazure-media-servicesazure-media-player

Get Video Width and Height from Azure Media Player

I have video's I'm streaming from Azure Media Services and are being rendered in my web page using Azure Media Player API.

I don't know ahead of time what the videos dimensions are (and they will vary). My issue is that when I play the video there is a black border (either at top/bottom or at left/right) around the video if I don't create the video element with the correct ratio to match the video. See for example the image below, notice the large black borders on the left and right of the video. I'd like to get the video size so I can correct the dimensions and get rid of the border.

enter image description here

The Azure Media Player API seems to say I can get the videoWidth and videoHeight. But I'm not sure (in Javascript) what object to get those values from.

In my script below, when I console.log the player object I don't see videoWidth or videoHeight as part of the player object.

let myOptions = {
    controls: true,
    autoplay: true,
    logo: { enabled: false }
};
myPlayer = amp(video, myOptions, () => {
    console.log(myPlayer);
});
myPlayer.src([{
    src: "<manifestURL>",
    type: "<type>"
}]);

The following screenshot is what gets logged. Unless I'm missing something, I don't see the videoWidth or videoHeight values.

enter image description here

Any assistance is greatly appreciated.

Solution

  • Actually videoWidth/videoHeight are functions.

    Also you should use the this keyword inside the ready handler.

    For example :

    amp(video, options, () => console.log(this.videoWidth())