<video> andloadedloadedmetadata-event

我想在JavaScript中使用HTML5視頻元素的維度。 video-tag本身沒有設置任何尺寸，所以我希望它可以縮放到視頻的大小（它所做的）。我的標記看起來是這樣的：<video> andloadedloadedmetadata-event

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

當我使用jQuery來獲取該元素height()和/或width()我會得到300的默認值，因爲它不會等待視頻加載。所以我在網上找到的（here和here）是我應該在等待onloadedmetadata -event。所以我試圖做我的JS如下：

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

然而，該事件將永遠不會觸發（雖然視頻將加載和播放），我永遠也不會得到我的尺寸。 jQuery-bind('load',以及我能想到的所有其他方式也是如此。任何想法？謝謝。

來源

2012-01-24 m90

把你的代碼放到一個function在您的HTML頭端（例如所謂的「初始化」），並將其綁定到DOMContentLoaded -event：

<head> 
    ... 
    <script type="text/javascript"> 
    function init() { 
     var video = document.getElementById('viddy'); 
     video.onloadedmetadata = function(e){ 
      var dimensions = [video.videoWidth, video.videoHeight]; 
      alert(dimensions); 
     } 
    } 
    document.addEventListener("DOMContentLoaded", init, false); 
    </script> 
</head>

也看到這個example。

=== UPDATE ===

使用Chrome，你應該改變添加監聽器：

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

也看到這個updated example。

=== UPDATE ===

使用jQuery：

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

也看到這個updated example。

來源

2012-01-24 09:06:42 scessor

有趣。我在'$（document）.ready（）'上調用了我的JS，並且它沒有觸發。區別在哪裏？不管怎麼說，多謝拉！ – m90

好的，所以我必須做出某種類型的拼寫錯誤或其他，它使用'$（document）.ready（）'以及....我的壞。 – m90

爲什麼Chrome需要'addEventListener（）'而不是'video.onloadedmetadata'？ – Gili

<video> andloadedloadedmetadata-event

回答

相關問題