<video> и загруженные метаданные-событие

Question

Я хотел бы использовать размеры элемента видео HTML5 в JavaScript.Сам тег 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', и любым другим способом, который я мог придумать.Любая идея?Спасибо.

Answer 1

Поместите свой код в function в конце заголовка HTML (например, под названием 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>