html5返回当前音频/视频的长度以秒计的属性duration

互联网 17-11-8

实例

获得当前视频的长度：

myVid=document.getElementById("video1");  alert(myVid.duration);

定义和用法

duration 属性返回当前音频/视频的长度，以秒计。

如果未设置音频/视频，则返回 NaN (Not-a-Number)。

浏览器支持

所有主流浏览器都支持 duration 属性。

注释：Internet Explorer 8 或更早的浏览器不支持该属性。

语法

audio|video.duration

技术细节

返回值	数字值，表示音频/视频的长度，以秒计。

根据JavaScript高级程序设计中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

由上面的结果，可以看出将oPlayer.duration的值赋给一个变量后这个变量的值是NaN。但是为什么？根据定义oPlayer.duration属性返回的是一个数值，为什么数值赋给一个变量会变成NaN？现在还不懂。

以上就是html5返回当前音频/视频的长度以秒计的属性duration的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： html5、duration、长度

html5返回当前音频/视频的长度以秒计的属性duration

相关资讯

标签推荐