javascript - 使用 JavaScript 获取 HTML5 视频的宽度和高度？

Question

我已经尝试了在这里找到的几个答案。

此代码适用于 Firefox 并输出正确的大小，但不适用于 Chrome 或 IE。

主要是我试图获得宽度。

示例

我使用 3 个示例输出了视频下方的宽度。

https://jsfiddle.net/a8a1o8k2/

JavaScript

https://stackoverflow.com/a/4129189/6806643

var vid1 = document.getElementById("video");
vid1.videoHeight; // returns the intrinsic height of the video
vid1.videoWidth; // returns the intrinsic width of the video

返回 0

https://stackoverflow.com/a/9333276/6806643

var vid2 = document.getElementById("video");
vid2.addEventListener( "loadedmetadata", function (e) {
    var width = this.videoWidth,
        height = this.videoHeight;
}, false );

返回 0

https://stackoverflow.com/a/16461041/6806643

var vid3 = document.getElementById("video");
var videotag_width = vid3.offsetWidth;
var videotag_height = vid3.offsetHeight;

有时会返回正确的值
有时返回 300(如果没有视频源，默认播放器大小)

Answer 1

编辑:在我实际阅读跨浏览器问题后改进了解决方案。

下面的解决方案应该适用于 Chrome 和 Firefox。问题在于 Firefox 对待 readyState 的方式与 Chrome 不同。

var vid2 = document.getElementById("video");
vid2.addEventListener("loadedmetadata", getmetadata);

if (vid2.readyState >= 2) {
    getmetadata(vid2);
}

function getmetadata(){
    document.getElementById('output2').innerHTML = "Test 2: " + vid2.videoWidth;
}

已更新 JSFiddle