<video>和onloadedmetadata-event

Question

我想在JavaScript中使用HTML5视频元素的尺寸.该video-tag本身不具有任何尺寸的设定,所以我希望它扩展到视频的大小(它).我的标记看起来像这样:

<video id="viddy" autoplay>
<source src="myvideo.mp4" type='video/mp4; codecs="avc1.42E01E"' />
</video>

当我只使用jQuery获取元素height()和/或width()我将获得默认值300,因为它不会等待视频加载.所以我在网上(这里和这里)发现的是我应该等待onloadedmetadata-event.所以我想在我的JS中做以下事情:

var video = document.getElementById('viddy');
video.onloadedmetadata = function(e){
var dimensions = [video.videoWidth, video.videoHeight];
alert(dimensions);
} 

然而,事件永远不会发生(虽然视频会加载和播放),我永远不会得到我的尺寸.jQuery- bind('load',以及我能想到的其他方式也是如此.任何的想法？谢谢.

Answer 1

将代码放入functionhtml头的末尾(例如,称为'init')并将其绑定到init-event:

function init() {
    var video = document.getElementById('viddy');
    video.onloadedmetadata = function(e){
        var dimensions = [video.videoWidth, video.videoHeight];
        alert(dimensions);
    }
}

document.addEventListener("DOMContentLoaded", init, false);

另请参见此示例.

===更新===

对于Chrome,您应该更改添加侦听器:

<video id="viddy" autoplay>
    <source src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm' />
</video>

另请参阅此更新示例.

===更新===

使用jquery:

video.addEventListener('loadedmetadata', function(e){

另请参阅此更新示例.