实例
获得当前视频的长度:
1 2 | myVid=document.getElementById("video1");
alert(myVid.duration);
|
Copy after login
定义和用法
duration 属性返回当前音频/视频的长度,以秒计。
如果未设置音频/视频,则返回 NaN (Not-a-Number)。
浏览器支持
所有主流浏览器都支持 duration 属性。
注释:Internet Explorer 8 或更早的浏览器不支持该属性。
语法
技术细节
根据JavaScript高级程序设计中P489页的程序,我写了以下程序
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!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 >
|
Copy after login
由于IE8及其之前的版本不支持video标签,所以不显示。
但是在IE9,10,11支持的情况下,为什么会显示
并且,使用alert(oPlayer.duration);页面是能够弹出该视频的时间的。
但是为什么oDuration.innerHTML=oPlayer.duration;这句话会显示NaN?
对此,我又尝试了一下代码
1 2 3 | var duration1=oPlayer.duration;
alert(duration1);
alert(oPlayer.duration);
|
Copy after login
由上面的结果,可以看出将oPlayer.duration的值赋给一个变量后这个变量的值是NaN。但是为什么?根据定义oPlayer.duration属性返回的是一个数值,为什么数值赋给一个变量会变成NaN?现在还不懂。
The above is the detailed content of html5 returns the duration attribute of the current audio/video in seconds. For more information, please follow other related articles on the PHP Chinese website!