[AI Help] Question: How do I get the playback resolution of a video element?

[mbmjertan]

What is the issue with the answer?

Hallucinated properties of DOM API interfaces, no width and height properties of VideoPlaybackQuality exist.

The agent corrects itself in later conversation.

How would you categorize this issue?

• The answer is harmful / unsafe.
• The answer is not correct.
• The answer is not helpful.
• The answer is outdated.

What did you ask?

1. How do I get the playback resolution of a video element?

What did AI Help answer?

To get the playback resolution of a video element, you can use the getVideoPlaybackQuality() method provided by the HTMLVideoElement interface. This method returns a VideoPlaybackQuality object that contains information about the video playback quality, including the resolution.

Here's an example of how you can use getVideoPlaybackQuality() to obtain the playback resolution:

const videoElt = document.getElementById("my-video");
const quality = videoElt.getVideoPlaybackQuality();

const resolution = quality.width + "x" + quality.height;
console.log("Playback resolution: " + resolution);

In the above code snippet, we first retrieve the video element using getElementById(). Then, we call the getVideoPlaybackQuality() method on the video element to obtain the VideoPlaybackQuality object. Finally, we extract the width and height properties from the VideoPlaybackQuality object to get the playback resolution.

Please note that the getVideoPlaybackQuality() method is not supported in all browsers, so it's important to check for browser compatibility before using it.

What MDN pages did AI Help consult?

• Audio and video manipulation
• VideoPlaybackQuality: totalFrameDelay property
• VideoPlaybackQuality: droppedVideoFrames property

[caugner]

@mbmjertan Thank you for reporting this issue. 👍

As we're working on an iteration, I would like to share with you what AI Help 2.0 might answer.

Can you please check how the following answer performs with regard to the issue you reported above? 🙏

To get the playback resolution of a video element, you can access the videoWidth and videoHeight properties of the HTMLVideoElement. These properties give you the intrinsic width and height of the video in pixels, which is the actual resolution of the video being played.

Here's an example of how you might use these properties:

const videoElem = document.getElementById('myVideo');

// Wait for the 'loadedmetadata' event to ensure the video's metadata is loaded
videoElem.addEventListener('loadedmetadata', () => {
  const width = videoElem.videoWidth;
  const height = videoElem.videoHeight;

  console.log(`The video resolution is: ${width}x${height}`);
});

In this code, we add an event listener for the loadedmetadata event, which fires when the metadata of the video has been loaded. This includes information like the video resolution. Once this event fires, we can safely access the videoWidth and videoHeight properties to get the resolution.

For more information, you can refer to the MDN documentation for HTMLVideoElement.videoWidth and HTMLVideoElement.videoHeight.

[mbmjertan]

Yes, this seems correct. Maybe additional notes on what do to if the event has already fired would be cool to see, but correctness is obviously a priority 😄