javascript 获取真正的 HTML5 视频宽度和高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17056654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting the real HTML5 video width and height
提问by gal007
I have a video element:
我有一个视频元素：
var video = window.content.document.createElement("video");
video.width = width;
video.height = height;
video.style.backgroundColor = "black";
window.content.document.body.appendChild(video);
And I'm retrieving it's source via getUserMedia()on Firefox:
我正在通过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);
}
);
The problem is I need to know the "active area" of video, and it's returning me 0:
问题是我需要知道视频的“活动区域”，它返回 0：
video.onloadedmetadata = function(){
console.log(this.width + "x" +this.height);
console.log(this.videoWidth + "x" +this.videoHeight);
}
So, how can I retrieve the REAL values?:
那么，如何检索 REAL 值？：
回答by Nateowami
There are two issues here:
这里有两个问题：
video.videoWidthandvideo.videoHeightproperties weren't getting set as soon as theloadedmetadataevent fired. This was a bug in FireFox, which is now fixed (thanks to @Martin Ekblom for pointing out the bug).- The video itself doesn't take up the whole area of the video element, which none of the answers seem to have addressed. Instead, it scales to fit inside the element.
video.videoWidth并且video.videoHeight在loadedmetadata事件触发后没有立即设置属性。这是FireFox中的一个错误，现在已修复（感谢@Martin Ekblom 指出该错误）。- 视频本身并没有占据视频元素的整个区域，似乎没有一个答案已经解决。相反，它会缩放以适应元素。
I don't think there's a direct way to get the dimensions of the active area, but after struggling with this myself, I wrote up a solution to calculate it from the values we do know:
我不认为有直接的方法来获得活动区域的尺寸，但在我自己努力解决这个问题之后，我写了一个解决方案来根据我们知道的值计算它：
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
};
}
Essentially, we take the aspect ratio of the video element, the aspect ratio of the video, and the dimensions of video element, and use those to determine the area the video is occupying.
本质上，我们采用视频元素的纵横比、视频的纵横比和视频元素的尺寸，并使用它们来确定视频占用的区域。
This assumes the video's fitting method hasn't been modified via CSS (not sure if that's even possible at this time, but the spec allows for it). For more details on that and a few other things, see the blog post I wrote ("Finding the true dimensions of an HTML5 video's active area"), inspired by this question and its lack of complete answers.
这假设视频的拟合方法尚未通过 CSS 修改（不确定此时是否可行，但规范允许）。有关该问题和其他一些事情的更多详细信息，请参阅我写的博客文章（“查找 HTML5 视频活动区域的真实尺寸”），其灵感来自这个问题及其缺乏完整答案。
It's interesting to note that while the spec specifically mentions the possible edges around a video (letterboxing and pillarboxing), I wasn't able to find any other mentions of it, apart from your question.
有趣的是，虽然规范特别提到了视频周围的可能边缘（信箱和邮筒），但除了您的问题之外，我找不到任何其他提及。
回答by sole
You should add a loadeddataevent listener to the video, and try to read the size then, which is when enough information about the stream has been decoded and the dimensions can be accurately determined.
您应该loadeddata为视频添加一个事件侦听器，然后尝试读取大小，这是关于流的足够信息已被解码并且可以准确确定尺寸的时候。
Still, it sometimes takes a bit in some cases to get the dimensions ready, so you might want to try several times (with delay) until it works.
尽管如此，在某些情况下有时需要一些时间才能准备好尺寸，因此您可能需要尝试多次（延迟）直到它起作用。
That might be why it is not working for you but it's working for Sam.
这可能就是为什么它对您不起作用但对 Sam 起作用的原因。
Here's how I check the video size, with several attempts if required, in my gumhelper library: https://github.com/sole/gumhelper/blob/master/gumhelper.js#L38
这是我在我的 gumhelper 库中检查视频大小的方法，如果需要，可以尝试多次：https: //github.com/sole/gumhelper/blob/master/gumhelper.js#L38
Notice how we try several times and if it doesn't work we "give up" and default to 640x480.
请注意我们如何尝试多次，如果它不起作用，我们“放弃”并默认为 640x480。
回答by Silvia
"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.
“loadeddata”应该只触发一次。最好使用“timeupdate”反复检查视频宽度和高度是否已设置，特别是在 getUserMedia 中，您不会真正暂停视频，而是直接进入播放状态。
回答by Martin Ekblom
Actually this seems to be a bug in FF: https://bugzilla.mozilla.org/show_bug.cgi?id=926753
实际上这似乎是 FF 中的一个错误：https: //bugzilla.mozilla.org/show_bug.cgi?id =926753
