Menu
With some codecs and containers, it's possible for a video to change resolution mid-stream. This is particularly common with RTC-style video streams where resolution can scale up/down based on available bandwidth. In other cases, the recording device might be rotated and the video may flip from portrait to landscape or vice versa.
When playing these videos on a web page (simple <video> tag), how can I detect when this change in size occurs with JavaScript?
The best I can think of is verifying the size of the video every frame, but there is quite a bit of overhead to this method. If there were a way to have a callback fired when the video changed sizes, or an event triggered, that'd be best.
Example video that resizes, severely: https://bugzilla.mozilla.org/attachment.cgi?id=8722238
339
Even simpler, you can right-click on the file name in Windows Explorer, select Properties, then look at the Detail tab, you will see the vertical resolution. If it is less than 720, your file is either 720p or 480p, while if it is greater than 720, the file will be at least 1080p.
Video resolution is the measurement of a video's width by height in pixels. For example, a video with a 1920 × 1080 aspect ratio would measure 1920 pixels along the bottom and 1080 pixels in height.
1080p (1920×1080 progressively displayed pixels; also known as Full HD or FHD, and BT. 709) is a set of HDTV high-definition video modes characterized by 1,920 pixels displayed across the screen horizontally and 1,080 pixels down the screen vertically; the p stands for progressive scan, i.e. non-interlaced.
720p is the lowest video resolution and is often known as 'HD'. Though most videos use at least 1080p, 720p (1280 x 720 pixels) is a resolution accepted for small web content.
There is now a resize event which fires when the video resolution changes.
<p data-content="resolution"></p>
<video src="https://bug1250345.bmoattachments.org/attachment.cgi?id=8722238"></video>
document.querySelector('video').addEventListener('resize', (e) => {
document.querySelector('[data-content="resolution"]').textContent = [
e.target.videoWidth,
e.target.videoHeight
].join('x');
});
(JSFiddle: http://jsfiddle.net/qz61o2xt/)
References:
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With