上传视频或音乐时获取时长信息
咻兔哔 / 技术文章

上传视频或音乐时获取时长信息

1. 视频时长获取

VUE中使用的一个方式

    handleBeforeUpload(file) {
      const that = this
      var video = document.createElement('video')
      video.src = URL.createObjectURL(file)
      video.oncanplay = function() {
        var duration = video.duration
        console.log('视频长度:', duration)
        that.$emit('duration', Math.ceil(duration))
      }
    },

2. 音乐时长获取

	<!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 content = obj_file.files[0]
        console.log(content)
        //获取录音时长
        var url = URL.createObjectURL(content);
         //经测试,发现audio也可获取视频的时长
        var audioElement = new Audio(url);

        var duration;
        audioElement.addEventListener("loadedmetadata", function (_event) {
            duration = audioElement.duration;
            console.log(duration/60);
        });
    }
</script>
</html>

对以上代码进行简单说明:

1.**URL.createObjectURL() **静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。(个人感觉可以把对象转换成url使用,十分灵活方便,特别是对于文件对象)。

2.loadedmetadata 当指定的音频/视频的元数据已加载时,会发生 loadedmetadata 事件。音频/视频的元数据包括:时长、尺寸(仅视频)以及文本轨道。

支付宝捐赠
请使用支付宝扫一扫进行捐赠
微信捐赠
请使用微信扫一扫进行赞赏
有 0 篇文章