Question

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

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

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

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

Answer 1

看看这有助于我不确定。

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

Answer 2

您可以使用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)
    }
  })
}

Answer 3

现在有一个render() { if(this.props.data){ var projects = this.props.data.projects.map(function(projects){ var projectImage = 'images/portfolio/'+projects.image; return <li key={projects.title}> <img alt={projects.title} src={projectImage} /> </li> }) } return ( <section id="portfolio"> <div id="carousel" class="flexslider"> <ul class="slides"> {projects} </ul> </div> </section> ); }事件，该事件会在视频分辨率发生变化时触发。

HTML

resize

JavaScript

<p data-content="resolution"></p>
<video src="https://bug1250345.bmoattachments.org/attachment.cgi?id=8722238"></video>

（JSFiddle：http://jsfiddle.net/qz61o2xt/）

参考文献：

检测视频分辨率更改

3 个答案:

HTML

JavaScript