<视频>和加载的元数据事件

<video> and onloadedmetadata-event

本文关键字：事件 元数据 加载 gt lt 视频      更新时间：2023-09-26

我想在JavaScript中使用HTML5视频元素的维度。video-标签本身没有设置任何尺寸，所以我希望它能缩放到视频的大小（确实如此）。我的标记如下：

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

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

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

然而，这个活动永远不会启动（尽管视频会加载并播放），我永远不会得到我的尺寸。jQuery-bind('load',和我能想到的其他所有方法都是如此。知道吗？谢谢

将代码放入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>

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

视频文件的维度将与视频文件元数据一起加载。因此，您需要等待loadedmetadata事件被触发，然后您将能够从html视频元素的videoWidth和videoHeight属性中获取维度，在那里它们将被设置并准备好，这些都是正确的。

注意DOMContentLoaded：在dom内容加载事件之后添加事件侦听器，只会首先保证html元素的存在，从而能够在上添加事件侦听程序。这是正确的方法，这里不是问题所在。相反，这正是遇到问题的原因：在添加事件侦听器之前，元素的存在（具有src属性以加载数据），这在某种程度上是事件侦听器容易错过它应该捕获和处理的事件的原因。

当您将此事件侦听器添加到视频元素时，事件可能已经发生、传播和结束，因为您在使用其src属性创建的视频元素之后添加了事件处理程序。它将开始加载视频，从而加载视频元数据。如果速度足够慢，那么在加载视频元数据后loadedmetadata事件结束之前，您的代码将有机会添加到视频元素中。

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

    您可以在视频元素本身上添加内联事件属性：<video src="some-video-url" onloadedmetadata="somehandler">。在这里不确定处理程序是否也应该内联定义，或者只是参考作品。

  2. 您可以在使用src属性创建视频元素之前添加事件侦听器。这意味着您需要将其添加到另一个祖先html元素中，该元素是在使用src属性创建视频元素之前创建的。此外，该事件不是气泡，而是捕获。所以，您必须将它添加到事件的捕获阶段，并添加到祖先元素中，例如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>

相关文章：