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
Advertisement
Answer
There is now a resize event which fires when the video resolution changes.
HTML
<p data-content="resolution"></p> <video src="https://bug1250345.bmoattachments.org/attachment.cgi?id=8722238"></video>
JavaScript
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: