HTML5視頻的高度和寬度通過javascript

我想從一個簡單的JavaScript視頻獲取和打印出寬度和高度屬性，但由於某種原因，我不管理。HTML5視頻的高度和寬度通過javascript

這是JavaScript

video = document.getElementsByTagName("video")[1]; 
span1 = document.getElementById("dimensions"); 
span1.innerHTML = video.videoWidth + " x " + video.videoHeight;

，這是HTML5的代碼，它影響（這是在HTML結構中的第二視頻標籤）

<figure> 
<video controls> 
<source src="video.webm" type="video/webm"> 
</video> 
</figure> 
<p> 
Dimensions: <span id="dimensions"></span> 
</p>

非常感謝，我是一個初學者所以要點亮我。

來源

2011-07-28 3mpetri

您的視頻播放效果不錯嗎？ –

視頻是以webm格式播放的，現在只能在Chrome中播放，現在 – 3mpetri

根據您的標記，您的索引不會返回您想要的元素。該指數是基於零爲節點列表是陣列狀，並在0

var video = document.getElementsByTagName("video")[0];

編輯開始索引：對不起，沒看到你說，這是第二個視頻標籤。在這種情況下，我並不確定，因爲它適用於我：http://jsfiddle.net/3wCYz/1/

您可能想要嘗試的一件事是將您使用的代碼獲取視頻標記中偵聽的處理程序中的寬度和高度在等待loadedmetadata事件：

video.addEventListener("loadedmetadata", dimensionFunction, false);

其中dimensionFunction是一個函數，做你已經做什麼搶尺寸。

這樣做的目的是確保視頻的元數據在您嘗試抓取之前下載。

來源

2011-07-28 09:37:38 kinakuta

我添加了一個監聽器，也試過1秒延遲，它只在Chrome中運行良好，可能是因爲其他瀏覽器不支持webm呢？它在Firefox中顯示0 x 0時間延遲，與監聽器無關。但是，嘿，在Chrome中都很好：D謝謝 – 3mpetri

@ 3mpetri在這種情況下，您應該將腳本移到html代碼下面。或者讓你的腳本在'onload'事件中執行。我強烈建議不要使用延遲。 –

同意將它放入onload事件中。爲了讓它可以在其他瀏覽器上播放，只需將它編碼爲mp4和ogv，並且您將涵蓋支持html5的所有瀏覽器。使用各種免費工具進行編碼非常容易 - 我使用Miro Converter：http://www.mirovideoconverter.com/ – kinakuta

HTML5視頻的高度和寬度通過javascript

回答

相關問題