25

我有一个视频元素：

var video = window.content.document.createElement("video");
video.width = width;
video.height = height; 
video.style.backgroundColor = "black";
window.content.document.body.appendChild(video);

我正在通过Firefox上的getUserMedia()检索它的源代码：

window.navigator.getMedia = ( window.navigator.getUserMedia || window.navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia || window.navigator.msGetUserMedia);

window.navigator.getMedia( //constraints, sucessCallback, errorCallback
    {video: true, audio: false},
    function(stream) {
        if (window.navigator.mozGetUserMedia) 
            video.mozSrcObject = stream;
        else 
        {
            var vendorURL = window.URL || window.webkitURL;
            video.src = vendorURL.createObjectURL(stream);
        }
        video.play();
    },
    function(err) {
        console.log("Error: " + err);
    }
);

问题是我需要知道视频的“活动区域”，它返回给我 0：

video.onloadedmetadata = function(){

    console.log(this.width + "x" +this.height); 
    console.log(this.videoWidth + "x" +this.videoHeight);
}

那么，如何检索 REAL 值？： 在此处输入图像描述

4

4 回答 4

24

这里有两个问题：

  1. video.videoWidth事件触发后，并video.videoHeight没有设置属性。loadedmetadata这是FireFox 中的一个错误，现已修复（感谢@Martin Ekblom 指出该错误）。
  2. 视频本身并不占用视频元素的整个区域，似乎没有一个答案已经解决。相反，它会缩放以适应元素内部。

我不认为有直接的方法来获取活动区域的尺寸，但是在我自己努力解决这个问题之后，我写了一个解决方案来根据我们知道的值来计算它：

function videoDimensions(video) {
  // Ratio of the video's intrisic dimensions
  var videoRatio = video.videoWidth / video.videoHeight;
  // The width and height of the video element
  var width = video.offsetWidth, height = video.offsetHeight;
  // The ratio of the element's width to its height
  var elementRatio = width/height;
  // If the video element is short and wide
  if(elementRatio > videoRatio) width = height * videoRatio;
  // It must be tall and thin, or exactly equal to the original ratio
  else height = width / videoRatio;
  return {
    width: width,
    height: height
  };
}

本质上，我们采用视频元素的纵横比、视频的纵横比和视频元素的尺寸，并使用它们来确定视频占据的区域。

这假设视频的拟合方法没有通过 CSS 修改（不确定此时是否可能，但规范允许）。有关该问题和其他一些事情的更多详细信息，请参阅我写的博客文章（“查找 HTML5 视频活动区域的真实尺寸”），受此问题及其缺乏完整答案的启发。

有趣的是，虽然规范特别提到了视频周围可能存在的边缘（信箱和邮筒），但除了您的问题之外，我找不到任何其他提及。

于 2016-09-05T08:37:08.463 回答
10

您应该loadeddata在视频中添加一个事件侦听器，然后尝试读取大小，此时有关流的足够信息已被解码并且可以准确确定尺寸。

尽管如此，在某些情况下，有时需要一些时间才能准备好尺寸，因此您可能需要尝试多次（有延迟）直到它起作用。

这可能就是为什么它对你不起作用但对 Sam 起作用的原因。

这是我检查视频大小的方法，如果需要，可以在我的 gumhelper 库中尝试多次： https ://github.com/sole/gumhelper/blob/master/gumhelper.js#L38

请注意我们如何尝试多次，如果它不起作用，我们“放弃”并默认为 640x480。

于 2013-10-17T11:13:24.040 回答
2

"loadeddata" should only fire once. It's better to use "timeupdate" to repeatedly check if the video width and height have been set, in particular with getUserMedia where you don't really pause the video, but go straight into playback.

于 2014-01-29T06:48:33.637 回答
1

实际上这似乎是 FF 中的一个错误： https ://bugzilla.mozilla.org/show_bug.cgi?id=926753

于 2015-02-23T17:03:03.890 回答