检测视频分辨率的变化

Question

使用一些编解码器和容器,视频可以在流中改变分辨率.这在RTC风格的视频流中尤其常见,其中分辨率可以根据可用带宽进行放大/缩小.在其他情况下,可以旋转记录设备并且视频可以从纵向翻转到横向,反之亦然.

在网页上播放这些视频(简单<video>标记)时,如何通过JavaScript检测此更改的大小？

我能想到的最好的是每帧验证视频的大小,但这种方法有相当多的开销.如果有一种方法可以在视频更改大小或触发事件时触发回调,那就最好了.

严重调整大小的示例视频:https://bugzilla.mozilla.org/attachment.cgi？ id = 8722238

Answer 1

现在有一个resize事件在视频分辨率更改时触发。

超文本标记语言

<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/）

参考：

• HTML Living Standard 媒体事件 - 调整大小
• Chromium Bug：在视频数据更改尺寸时向元素添加“调整大小”事件
• Chromium Bug：在初始元数据加载时也会触发“调整大小”事件。