问题描述
使用某些编解码器和容器，视频可能会在中途更改分辨率.这在 RTC 风格的视频流中尤为常见，其中分辨率可以根据可用带宽放大/缩小.在其他情况下，录制设备可能会旋转，视频可能会从纵向翻转为横向，反之亦然.
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.
在网页上播放这些视频时(简单的 标签)，我如何检测 JavaScript 何时发生这种大小变化?
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.
严重调整大小的示例视频:https://bugzilla.mozilla.org/attachment.cgi?id=8722238
Example video that resizes, severely: https://bugzilla.mozilla.org/attachment.cgi?id=8722238
推荐答案
现在有一个 resize 事件，它会在视频分辨率改变时触发.
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>
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/)
(JSFiddle: http://jsfiddle.net/qz61o2xt/)
参考文献:
这篇关于检测视频分辨率变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！