这篇文章将为大家详细讲解有关HTML5如何获得当前视频的长度，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。实例获得当前视频的长度：myVid=document.getEl
这篇文章将为大家详细讲解有关HTML5如何获得当前视频的长度，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
实例
获得当前视频的长度：
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如何获得当前视频的长度”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
--结束END--
本文标题: html5如何获得当前视频的长度
本文链接: https://lsjlt.com/news/80830.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0