您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)html5如何獲得當(dāng)前視頻的長度,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
實例
獲得當(dāng)前視頻的長度:
myVid=document.getElementById("video1"); alert(myVid.duration);
定義和用法
duration 屬性返回當(dāng)前音頻/視頻的長度,以秒計。
如果未設(shè)置音頻/視頻,則返回 NaN (Not-a-Number)。
瀏覽器支持
所有主流瀏覽器都支持 duration 屬性。
注釋:Internet Explorer 8 或更早的瀏覽器不支持該屬性。
語法
audio|video.duration
技術(shù)細節(jié)
返回值 | 數(shù)字值,表示音頻/視頻的長度,以秒計。 |
根據(jù)JavaScript高級程序設(shè)計中P489頁的程序,我寫了以下程序
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <p class="mediaplayer"> <p class="video"> <video id="player" poster="E:\1.jpg" width="300" height="200" src="太陽E15.mp4"> Video player is not available. </video> </p> <p class="controls"> <input type="button" value="Play" id="video-btn"> <span id="curtime">0</span>/<span id="duration">0</span> </p> </p> <script type="text/javascript"> window.onload=function(){ var oPlayer=document.getElementById('player'); var oBtn=document.getElementById("video-btn"); var oCurtime=document.getElementById('curtime'); var oDuration=document.getElementById('duration'); oDuration.innerHTML=oPlayer.duration; oBtn.onclick=function(){ if(oPlayer.paused){ oPlayer.play(); oBtn.value="Pause"; }else{ oPlayer.pause(); oBtn.value="Play"; } }; setInterval(function(){ oCurtime.innerHTML=oPlayer.currentTime; },250); }; </script> </body> </html>
由于IE8及其之前的版本不支持video標簽,所以不顯示。
但是在IE9,10,11支持的情況下,為什么會顯示
并且,使用alert(oPlayer.duration);頁面是能夠彈出該視頻的時間的。
但是為什么oDuration.innerHTML=oPlayer.duration;這句話會顯示NaN?
對此,我又嘗試了一下代碼
var duration1=oPlayer.duration; alert(duration1);//NaN alert(oPlayer.duration);//3625.982
由上面的結(jié)果,可以看出將oPlayer.duration的值賦給一個變量后這個變量的值是NaN。但是為什么?根據(jù)定義oPlayer.duration屬性返回的是一個數(shù)值,為什么數(shù)值賦給一個變量會變成NaN?現(xiàn)在還不懂。
關(guān)于“html5如何獲得當(dāng)前視頻的長度”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。