檢索HTML5視頻時間的問題

Question

更新：好吧，雖然我沒有完全解決這個問題，但我確實找出了一個處理我最關心的問題......用戶體驗的工作。

首先，視頻直到觀看者點擊播放按鈕後纔開始加載，所以我假設持續時間信息不可用於拉動（我不知道如何解決這個特定問題。儘管我認爲它只涉及從視頻中分別加載視頻元數據，但我甚至不知道這是否可能）。所以爲了避開沒有持續時間數據的事實，我決定完全隱藏持續時間信息（實際上是整個控制），直到你完成了比賽。

我知道......它的作弊。但現在它讓我開心:)

這就是說...如果有人知道如何加載視頻元數據與視頻文件分開...請分享。我認爲應該完全解決這個問題。

---

我工作的建設有一個自定義的界面HTML5視頻播放器，但我有一些問題得到視頻持續時間信息顯示。

我的HTML是真實的簡單（見下文）

<video id="video" poster="image.jpg" controls>  
    <source src="video_path.mp4" type="video/mp4" /> 
    <source src="video_path.ogv" type="video/ogg" /> 
</video> 
<ul class="controls"> 
<li class="time"><p><span id="timer">0</span> of <span id="duration">0</span></p></li> 
</ul> 

，我使用來獲取和插入時間的JavaScript是

var duration = $('#duration').get(0); 
var vid_duration = Math.round(video.duration); 
duration.firstChild.nodeValue = vid_duration; 

的問題是什麼也不會發生。我知道視頻文件有持續時間數據，因爲如果我只使用默認控件，它會顯示正常。

但真正奇怪的是，如果我把警報（持續時間），在我的代碼，像這樣

alert(duration); 
var vid_duration = Math.round(video.duration); 
duration.firstChild.nodeValue = vid_duration; 

則工作正常（彈出減去惱人警報）。任何想法這裏發生了什麼，或者我可以如何解決它？

Answer 1

的問題是在WebKit瀏覽器;視頻元數據在視頻後加載，所以在JS運行時不可用。你需要查詢readyState屬性;它有一系列從0到4的值，讓你知道視頻在哪個狀態;當元數據加載時，您會得到1的值。

所以，你需要做的是這樣的：

window.setInterval(function(t){ 
    if (video.readyState > 0) { 
    var duration = $('#duration').get(0); 
    var vid_duration = Math.round(video.duration); 
    duration.firstChild.nodeValue = vid_duration; 
    clearInterval(t); 
    } 
},500); 

我沒有測試的代碼，但它（或類似的東西）應該工作。

有關developer.mozilla.org上的媒體元素屬性的更多信息。

Answer 2

這是修改代碼

var duration = document.getElementById("duration"); 
var vid_duration = Math.round(document.getElementById("video").duration); 
//alert(vid_duration); 
duration.innerHTML = vid_duration; 
//duration.firstChild.nodeValue = vid_duration; 

希望這有助於。

它看起來像你使用IE瀏覽器，你爲什麼不使用document.getElementById方法檢索視頻對象？

Answer 3

這樣做：

var myVideoPlayer = document.getElementById('video_player'); 
myVideoPlayer.addEventListener('loadedmetadata', function() { 
    console.log(myVideoPlayer.duration); 
}); 

當瀏覽器從視頻接收到的所有元數據被觸發。

[編輯]自那時以來，較好的辦法是聽「durationchange」而不是「等待loadedmetadata」，這可能是不可靠的，因爲這樣的：

myVideoPlayer.addEventListener('durationchange', function() { 
    console.log('Duration change', myVideoPlayer.duration); 
}); 

Answer 4

HTML5規範並僅允許預加載元數據：

<video id="video" poster="image.jpg" controls preload="metadata">  
    <source src="video_path.mp4" type="video/mp4" /> 
    <source src="video_path.ogv" type="video/ogg" /> 
</video> 

http://www.w3.org/TR/html-markup/video.html#video.attrs.preload

Answer 5

我遇到同樣的問題：無法讀取視頻的時長，$('video')[0].duration總是返回NaN，我提到的公認的答案@stopsatgreen並更改代碼以適應常見的情況，它確實有效。

var video = $('video')[0]; 
var t = setInterval(function() { 
    if(video.readyState > 0) { 
     var duration = video.duration; 
     console.log(duration); 
     clearInterval(t); 
    } 
}, 500); 

該代碼非常簡單，真的工作，所以我張貼這個答案，並希望它可以幫助更多的人。