实例:远程、file、vue plupload三种方式上传的视频音频时长

file上传视频和音频时获取其时长

//获取视音频时长
//file为上传的文件,获取方式请看实例
	var url = URL.createObjectURL(file);
	var audioElement = new Audio(url);
	var duration = 0;
	audioElement.addEventListener("loadedmetadata", function(_event) {
		duration = Math.floor(audioElement.duration);
		console.log('多媒体时长', duration);
	});
//end;

vue plupload上传视频和音频时获取其时长

vue 使用plupload上传时获取到的file是进过拦截后的数据,getNative可获取到file真实数据

//获取视音频时长
//file为上传的文件,获取方式请看实例
	var file = file.getNative();//获取被plupload处理后的真实
	var url = URL.createObjectURL(file);
	var audioElement = new Audio(url);
	var duration = 0;
	audioElement.addEventListener("loadedmetadata", function(_event) {
		duration = Math.floor(audioElement.duration);
		console.log('多媒体时长', duration);
	});
//end;

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="file" id='upload'>
<button onclick="getTimes()">获取时长</button>
</body>
<script>
function getTimes() {
    var obj_file = document.getElementById("upload");
    var file = obj_file.files[0];//上传的文件
    //获取时长
    var url = URL.createObjectURL(file);
    var audioElement = new Audio(url);
    var duration = 0;
    audioElement.addEventListener("loadedmetadata", function (_event) {
        duration = Math.floor(audioElement.duration);//s为单位
        console.log('多媒体时长', duration);
    });
}
</script>
</html>

远程视频音频源地址获取时长

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取时长</title>
</head>
<body>
	<audio id="myAudio" controls>
		<source type="audio/mpeg" src="https://wenhui-1300165533.cos.ap-shenzhen-fsi.myqcloud.com/web/%E7%AC%AC%E4%BA%8C%E8%8A%82%20%E8%81%8C%E8%83%BD%E9%83%A8%E9%97%A8%E5%AE%9A%E7%BC%96%E9%80%BB%E8%BE%91%E4%B8%8E%E7%AE%A1%E7%90%86%E4%BB%B7%E5%80%BC.mp4">
		<source type="audio/ogg" src="https://wenhui-1300165533.cos.ap-shenzhen-fsi.myqcloud.com/web/%E7%AC%AC%E4%BA%8C%E8%8A%82%20%E8%81%8C%E8%83%BD%E9%83%A8%E9%97%A8%E5%AE%9A%E7%BC%96%E9%80%BB%E8%BE%91%E4%B8%8E%E7%AE%A1%E7%90%86%E4%BB%B7%E5%80%BC.mp4">
	</audio>
	<button onclick="getTimes()">获取时长</button>
	<script>
		function getTimes(){
			var duration = document.getElementById("myAudio").duration;
			console.log('多媒体时长', duration);
		}
	</script>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值