js获取mp3、mp4音视频时长

WEB前端 Alice 1个月前 (09-17) 61次浏览 0个评论

在某些业务场景下,需要知晓上传的视频时长,以下是 2 种获取音视频时长的方法。

1、Audio/Video 的 duration 属性

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

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

例:

<video id="video" src="xxxx.mp4"></video>
duration = document.getElementById("video").duration

<audio class="audio1" src="xxxx.mp4"></audio>
duration = $(".audio1")[0].duration;

2、构造一个 Audio 音频对象

var audio = new Audio('https://xxxx.xxxxxxx.mp4')
audio.addEventListener("loadedmetadata", function (e) {
    let duration = audio.duration; 
});

本次项目要求上传mp3、mp4 到阿里云OSS 资源库时显示时长,就用了第 1 种方法,以下是解决步骤:

(1)、在上传页面添加一个 div 标签,方便上传时追加 audio

<div id="video"></div>

(2)、开始上传音视频时,追加 audio 标签到页面

js 获取 mp3、mp4 音视频时长

(3)、上传成功回调时,获取音视频时长并显示

js 获取 mp3、mp4 音视频时长

(4)、最后效果显示如下:

js 获取 mp3、mp4 音视频时长

不显示时长时的效果:

js 获取 mp3、mp4 音视频时长

 

因为duration属性返回当前音视频的时长是以秒计,在项目中需要显示成其它方式,以下是将其转化为时分秒的方法。

/**
 * 格式化秒
 *
 * @param value 秒数
 * @returns {string}
 */
function formatSeconds(value) {
	var theTime = parseInt(value);// 需要转换的时间秒
	var theTime1 = 0;// 分
	var theTime2 = 0;// 小时
	var theTime3 = 0;// 天
	if(theTime > 60) {
		theTime1 = parseInt(theTime/60);
		theTime = parseInt(theTime%60);
		if(theTime1 > 60) {
			theTime2 = parseInt(theTime1/60);
			theTime1 = parseInt(theTime1%60);
			if(theTime2 > 24){
				//大于 24 小时
				theTime3 = parseInt(theTime2/24);
				theTime2 = parseInt(theTime2%24);
			}
		}
	}
	var result = '';
	if(theTime > 0){
		result = ""+parseInt(theTime)+"秒";
	}
	if(theTime1 > 0) {
		result = ""+parseInt(theTime1)+"分"+result;
	}
	if(theTime2 > 0) {
		result = ""+parseInt(theTime2)+"小时"+result;
	}
	if(theTime3 > 0) {
		result = ""+parseInt(theTime3)+"天"+result;
	}
	return result;
}

女程序员博客 , 版权所有丨本站采用BY-NC-SA协议进行授权 , 转载请注明js 获取 mp3、mp4 音视频时长

【声明】:本博客仅为分享信息,不参与任何交易,也非中介,所有内容仅代表个人观点,均不作直接、间接、法定、约定的保证,读者购买风险自担。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。

【关于安全】:任何 IDC 都有倒闭和跑路的可能,备份永远是最佳选择,服务器也是机器,不勤备份是对自己极不负责的表现,请保持良好的备份习惯。

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址