Javascript 检测视频分辨率变化

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

在网页上播放这些视频（简单的

标记）时，我如何检测JavaScript何时发生大小变化

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

---

严重调整大小的示例视频：

您可以使用

loadedmetadata

事件定义全局变量，或利用

元素.dataset

来反映

元素的初始
。videoWidth
，
。videoHeight
属性；如果某个属性更改了调用函数，则在
时间更新
初始存储的
事件和当前事件
.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)
    }
  })
}

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

链接-
现在有一个
resize
事件，当视频分辨率更改时触发该事件

HTML
（JSFiddle:）

参考资料：





onresize
或
onratechange
有任何帮助吗？
onresize
是否不像@dandavis建议的那样对您有效？您是否有这样做的视频示例进行测试？：）@格雷霍恩比，我今天就做一个。很抱歉，我还没有看到。我找不到任何证据表明您的示例视频使用MPC或
标记更改了分辨率。再说一次，我很想相信你，但我所见过的一切都不能说明你所说的是普遍的，甚至是可能的。。。请记住，视频图像与视频编码是分开的，可能会发生内部缩放，但视频播放器不会知道这种情况。谢谢，但这与每帧轮询视频高度/宽度没有多大区别。没有我可以收听的事件吗？@Brad“但这与每帧轮询视频高度/宽度没有多大区别。”如果不检查几乎每一帧，您如何能够意识到每一帧属性的变化？“没有我可以听的事件吗？”不确定你的意思？您可能会创建一个自定义函数，递归地检查
.videoWidth
，
.videoHeight
；或者，您可以监听
元素的
timeupdate
事件，该事件应返回相同的结果。一个timeupdate事件根本不是性能密集型事件，即使mobile@guest271314我希望有一个事件，当视频分辨率发生变化时，底层播放器会立即通知我。此代码不会在测试视频上触发任何事件，因此其中一个是错误的。奇怪的是，它还没有出现在MDN上，FF似乎也支持它，Safari也支持它，而且它似乎已经在规范中至少3年了。。。但是MDN中DOM事件的顺序让我不愿意自己创建一个页面（已经有了一个，所以他们可能应该在一个子目录中收集所有媒体事件，但这将是一个很大的工作…无论如何，
<p data-content="resolution"></p>
<video src="https://bug1250345.bmoattachments.org/attachment.cgi?id=8722238"></video>

document.querySelector('video').addEventListener('resize', (e) => {
  document.querySelector('[data-content="resolution"]').textContent = [
    e.target.videoWidth,
    e.target.videoHeight
  ].join('x');
});