html5如何获得当前视频的长度

这篇文章将为大家详细讲解有关html5如何获得当前视频的长度,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

目前创新互联建站已为上1000+的企业提供了网站建设、域名、网页空间、网站托管运营、企业网站设计、三明网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

实例

获得当前视频的长度:

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

定义和用法

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

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

浏览器支持

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

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

语法

audio|video.duration

技术细节

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

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










 
Video player is not available.

0/0

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); };

由于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如何获得当前视频的长度”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


文章题目:html5如何获得当前视频的长度
标题路径:http://myzitong.com/article/pegpid.html