HTML5获取媒体文件的播放时间

video元素有一个duration属性,它表示的是视频时长的秒数,在页面上为了能更友好的显示时间,我们还需要对这些秒数进行格式化,需要使用到parseInt 和余数操作 (%):

 

<html>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<head><title>测试文件上传</title></head>
<body>
<input type=”file” id=”fileinput” onchange=”getduration()” />
<video id=”media” src=”” controls width=”400px” heigt=”400px”></video>
<script type=”text/javascript”>
function getduration(){
var file = document.getElementById(‘fileinput’).files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var media=document.getElementById(“media”);
media.src=this.result;
//media.play(); //播放
//alert(parseFloat(media.duration));
//writeObj(file);
var i = setInterval(function() {
if(media.readyState > 0) {
var minutes = parseInt(media.duration / 60, 10);
var seconds = parseInt(media.duration % 60);
alert(minutes+’分’+seconds+’秒’);
clearInterval(i);
}
}, 200);
}
}

function writeObj(obj){
var description = “”;
for(var i in obj){
var property=obj[i];
description+=i+” = “+property+”\n”;
}
alert(description);
}
</script>
</body>
</html>

需要说明的一点是,我们需要使用setInterval来检查视频的readyState是否有效,如果视频还没有加载成功,我们就去获取这个值,得到的数值就会有问题。parseInt是用来获取分钟数,余数操作时用来获取秒数。

 

此条目发表在 HTML5 分类目录。将固定链接加入收藏夹。