Question

我目前正尝试使用以下内容获取视频的宽度和高度：

var vid = document.getElementById('myVideo');
vid.onloadedmetadata = function () {
   var vidHeight = this.videoHeight;
   var vidWidth = this.videoWidth;
   console.log(vidHeight, vidWidth);
};

我注意到，当我稍后尝试使用变量时，它有时会工作，有时却没有。我把控制台登录（如上所述）并刷新我的浏览器。有时值显示，有时它们不显示，就像onloadedmetadata根本没有触发一样。有谁知道这是为什么以及如何绕过它？

我还尝试了另一个事件onloadstart。这有相同的行为。

Answer 1

我找到了答案（这个例子在jQuery中，在简单的JS中也很简单）：

    this.options.$video.on('canplay canplaythrough', cb);

    if (this.options.$video[0].readyState > 3) {
        cb();
    }

    function cb() {
        var vidWidth = me.options.$video[0].videoWidth;
        var vidHeight = me.options.$video[0].videoHeight;
        console.log(vidWidth, vidHeight);
    }

每次刷新都不会触发视频事件

1 个答案: