Question

我想在JavaScript中使用HTML5视频元素的尺寸。 video - 标签本身没有设置任何尺寸，所以我希望它可以缩放到视频的大小（它可以）。我的标记看起来像这样：

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

当我只使用jQuery获取元素的height()和/或width()时，我将获得默认值300，因为它不会等待视频加载。因此，我在网络上发现的内容（here和here）是我应该等待onloadedmetadata - 事件。所以我想在我的JS中做以下几点：

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

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

Answer 1

将代码放入HTML头部末尾的function（例如，名为init）并将其绑定到DOMContentLoaded事件：

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

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

适用于Chrome

您应该将侦听器添加到：

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

function init() {
    var video = document.getElementById('viddy');
    video.addEventListener('loadedmetadata', function(e){
        var dimensions = [video.videoWidth, video.videoHeight];
        alert(dimensions);
    });
}

document.addEventListener("DOMContentLoaded", init, false);

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

使用jQuery

$(document).ready(function() {
    $('#viddy').on('loadedmetadata', function() {
        var dimensions = [this.videoWidth, this.videoHeight];
        alert(dimensions);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<video id="viddy" autoplay>
    <source src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm' />
</video>

Answer 2

TL; DR 在loadedmetadata之后添加DOMContentLoaded侦听器不能保证在触发loadedmetadata事件之前添加侦听器，但是，添加事件侦听器到在 video元素之前用src（例如document）创建的元素，并且处于 capture 阶段，或者将事件侦听器添加到视频元素内联中作为属性。

视频文件的尺寸将随视频文件元数据一起加载。因此，您将需要等待loadedmetadata事件被触发，然后才能从html video元素的videoWidth和videoHeight属性中获取尺寸，并在其中进行设置和准备，这些你都没错。

DOMContentLoaded 的注意事项：在dom内容加载事件之后添加事件侦听器，只会保证html元素首先存在，以便能够添加事件侦听器。那是做那件事的正确方法，这不是问题。相反，这是引起问题的原因：在添加事件侦听器之前，元素具有src属性可以加载数据，这是事件侦听器容易产生的原因错过了应该抓住并处理的事件。

在将此事件侦听器添加到video元素时，该事件可能已经发生，传播并结束，因为您是在使用src属性创建的video元素之后添加了事件处理程序。它将开始加载视频，从而开始加载视频元数据。如果这样做的速度很慢，则在加载视频元数据之后，loadedmetadata事件结束之前，您的代码将有机会被添加到video元素。

您需要在视频之前注册事件处理程序元素开始加载其视频文件。这里是src 属性，因此您需要在之前或同时添加处理程序添加src属性。

您可以在video元素本身上添加一个内联事件属性： <video src="some-video-url" onloadedmetadata="somehandler">。这里不知道处理程序是否也应该内联定义也是参考工作。
您可以在使用src属性创建视频元素之前添加事件侦听器。这意味着您需要将其添加到使用src属性创建视频元素之前创建的另一个祖先html元素中。同样，该事件不是冒泡，而是捕获。因此，您必须将其添加到事件的捕获阶段，并添加到祖先元素，例如document。

document.addEventListener("loadedmetadata", function(e){
    // if necesssary one can add custom logic here for example to check if the event target is the element we are listening the event for with event.target
    var video = e.target;
    var dimensions = [video.videoWidth, video.videoHeight];
    alert(dimensions);
}, true);

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

<video>和onloadedmetadata-event </video>

2 个答案:

适用于Chrome

使用jQuery