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.
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.
Any assistance is greatly appreciated.
Advertisement
Answer
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())