最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-27 15:06:57
文档

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

html5返回当前音频/视频的长度以秒计的属性duration:实例获得当前视频的长度:myVid=document.getElementById("video1"); alert(myVid.duration);定义和用法duration 属性返回当前音频/视频的长度,以秒计。如果未设置音频/视频,则返回 NaN (Not-a-Number)。浏览器支持所有主流
推荐度:
导读html5返回当前音频/视频的长度以秒计的属性duration:实例获得当前视频的长度:myVid=document.getElementById("video1"); alert(myVid.duration);定义和用法duration 属性返回当前音频/视频的长度,以秒计。如果未设置音频/视频,则返回 NaN (Not-a-Number)。浏览器支持所有主流


实例

获得当前视频的长度:

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

定义和用法

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

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

浏览器支持

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

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

语法

audio|video.duration

技术细节

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

根据JavaScript高级程序设计中P4页的程序,我写了以下程序

<!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

html5返回当前音频/视频的长度以秒计的属性duration:实例获得当前视频的长度:myVid=document.getElementById("video1"); alert(myVid.duration);定义和用法duration 属性返回当前音频/视频的长度,以秒计。如果未设置音频/视频,则返回 NaN (Not-a-Number)。浏览器支持所有主流
推荐度:
标签: html5 html 属性
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top