检测视频分辨率变化

Question

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

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

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

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

Answer 1

您可以使用loadedmetadata事件来定义全局变量或利用Element.dataset来反映<video>元素的初始.videoWidth、.videoHeight属性；在 <video> 的 timeupdate 事件初始存储和当前事件 .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)
    }
  })
}

Answer 2

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

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

Answer 3

现在有一个 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/)

参考文献：

检测视频分辨率变化

Detecting video resolution changes

html

javascript

video

html5-video

HTML

JavaScript