javascript <video> 和 onloadedmetadata-event
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8983714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<video> and onloadedmetadata-event
提问by m90
I'd like to use the dimensions of a HTML5 video element in JavaScript. The video-tag itself does not have any dimensions set, so I expect it to scale to the size of the video (which it does). My markup looks like this:
我想在 JavaScript 中使用 HTML5 视频元素的尺寸。该video-tag本身不具有任何尺寸的设置，所以我期待它的规模，以视频的大小（它）。我的标记如下所示：
<video id="viddy" autoplay>
<source src="myvideo.mp4" type='video/mp4; codecs="avc1.42E01E"' />
</video>
When I just use jQuery to get the element's height()and/or width()I will get a default value of 300 as it will not wait for the video to load.
So what I found out on the web (hereand here) is that I should be waiting for the onloadedmetadata-event. So I am trying to do the following in my JS:
当我仅使用 jQuery 获取元素height()和/或width()我将获得默认值 300 时，因为它不会等待视频加载。所以我在网上（这里和这里）发现的是我应该等待onloadedmetadata-event。所以我试图在我的 JS 中执行以下操作：
var video = document.getElementById('viddy');
video.onloadedmetadata = function(e){
var dimensions = [video.videoWidth, video.videoHeight];
alert(dimensions);
}
Yet, the event will never fire (although the video will load and play) and I'll never get my dimensions. Same happens with a jQuery-bind('load',and every other way I could think of. Any idea? Thanks.
然而，该事件永远不会触发（尽管视频会加载和播放）并且我永远不会得到我的尺寸。jQuerybind('load',和我能想到的所有其他方式也会发生同样的情况。任何的想法？谢谢。
回答by scessor
Put your code into a functionat the end of your HTML head (e.g. called init) and bind it to the DOMContentLoadedevent:
将您的代码放入functionHTML 头部末尾的a中（例如调用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>For Chrome
铬
You should change adding the listener to:
您应该将添加侦听器更改为：
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>With jQuery
使用 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>