Javascript <；视频>；和onloadedmetadata事件

我想在JavaScript中使用HTML5视频元素的维度。

video

-标记本身没有设置任何维度，因此我希望它能够缩放到视频的大小（确实如此）。我的标记如下所示：

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

---

然而，活动永远不会启动（尽管视频将加载并播放），我也永远无法获得我的维度。jQuery-

绑定（'load'，

和我能想到的其他方式也会发生同样的情况。有什么想法吗？谢谢。

将代码放入HTML头部末尾的

函数中（例如称为
init
），并将其绑定到
DOMContentLoaded
事件：


函数init（）{
var video=document.getElementById（'viddy'）；
video.onloadedmetadata=函数（e）{
变量维度=[video.videoWidth，video.videoHeight]；
警报（维度）；
}
}
document.addEventListener（“DOMContentLoaded”，init，false）；
TL；DR在
DOMContentLoaded
之后添加
loadedmetadata
侦听器不会保证在触发
loadedmetadata
事件之前添加侦听器，但是，使用
src
将事件侦听器添加到视频元素之前创建的元素（例如
document
）在捕获阶段，或者将事件侦听器作为属性内联添加到视频元素中，都会导致错误

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

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

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

loadedmetadata事件在加载视频元数据后结束

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

src

属性

可以在视频元素本身上添加内联事件属性：

。在这里 不确定该处理程序是否也应该内联定义，或者只是内联定义 我也在工作

您可以在使用

src

属性创建视频元素之前添加事件侦听器。这意味着您需要将其添加到另一个在使用

src

属性创建视频元素之前创建的祖先html元素。此外，该事件不会冒泡，而是捕获。因此，您必须在捕获阶段t中添加它事件和一个祖先元素，例如

文档

document.addEventListener（“loadedmetadata”，函数（e）{
//如有必要，可以在此处添加自定义逻辑，例如，检查事件目标是否是使用event.target侦听事件的元素
var-video=e.target；
变量维度=[video.videoWidth，video.videoHeight]；
警报（维度）；
}，对）；

很有趣。我在

$（document.ready（）

上调用了我的JS，但它没有启动。区别在哪里？无论如何谢谢！好吧，所以我一定是打错了什么，它也在使用

$（document.ready（）

）。我的错。为什么Chrome需要

addEventListener（）

而不是

video.onloadedmetadata

？显然，loadedmetadata事件有时会在可以通过js添加eventlistener之前触发

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