检测视频分辨率变化

Question

使用一些编解码器和容器，视频可以在中途更改分辨率。这对于 RTC 风格的视频流尤其常见，其中分辨率可以根据可用带宽放大/缩小。在其他情况下，录制设备可能会旋转，视频可能会从纵向翻转到横向，反之亦然。

在网页上播放这些视频（简单的<video> 标签）时，如何检测 JavaScript 何时发生这种大小变化？

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

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

Answer 1

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

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

参考资料：

• HTML Living Standard Media Events - resize
• Chromium Bug: Add a 'resize' event to elements for when the video data changes dimensions
• Chromium Bug: Fire 'resize' event on initial metadata load, too.

Answer 2

看看这是否有帮助我不确定。

链接 - https://www.w3.org/2010/05/video/mediaevents.html

Answer 3

您可以使用loadedmetadata事件定义全局变量或使用Element.dataset反映.videoWidth、.videoHeight元素的初始属性<video>；在 timeupdate 事件的 <video> 最初存储和当前事件 .videoWidth、.videoHeight 值，如果属性之一更改调用函数

window.onload = function() {
  function handleResolutionChange(event) {
    // do stuff if `.videoWidth` or `.videoHeight` changed from initial value
  }
  var video = document.querySelector("video");
  video.addEventListener("loadedmetadata", function(event) {
    event.target.dataset.width = event.target.videoWidth; 
    event.target.dataset.height = event.target.videoHeight;
  })
  video.addEventListener("timeupdate", function(event) {
    if (+event.target.dataset.width !== event.target.videoWidth
        && +event.target.dataset.height !== event.target.videoHeight) {
          // call `handleResolutionChange` one or more times
          // if `event.target` `.videoWidth` or `.videoHeight` changed
          handleResolutionChange.call(event.target, event)
    }
  })
}