视频上传,限制时长,获取视频时长

文章讲述了如何在使用Element的upload组件上传文件时,通过before-upload钩子和创建Audio元素获取视频时长,确保视频不超过18秒。利用loadedmetadata事件处理异步音频元数据加载。
摘要由CSDN通过智能技术生成

使用element的upload上传文件时,除了类型和大小,需求需要限制只能长传18秒内的视频,这里通过upload的before-upload,以及创建一个音频元素对象拿到durtaion时长属性来实现。

   getVideoTime(file) {
      return new Promise(async (resolve, reject) => {
        let url = URL.createObjectURL(file);
        let audioElement = new Audio(url);
        let durtaion = 0;
        audioElement.addEventListener('loadedmetadata', function () {
          durtaion = audioElement.duration;
          resolve(parseFloat(durtaion));
        });
      });
    },

loadedmetadata 事件是当指定的音频/视频的元数据已加载时触发,就可以得到元数据,包括时长,尺寸等;
 这里使用promise是因为加载音频元数据这是一个异步操作。

在上传文件之前的钩子里就可以拿到视频的时长做判断了,videoTimes的单位是秒。

     let videoTimes = await this.getVideoTime(file);

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue 中获取视频文件的格式、文件大小、分辨率、帧率、比特率、时长、编码、音频声道、音频采样率、音频比特率以及音频编码等信息,可以借助 HTML5 中的 `<video>` 元素和 JavaScript 来实现。下面是一个示例代码: ```html <template> <div> <input type="file" @change="handleFileChange" accept="video/*"> <video ref="videoPlayer" controls></video> <div v-if="videoInfo"> <p>格式: {{ videoInfo.format }}</p> <p>文件大小: {{ videoInfo.fileSize }}</p> <p>分辨率: {{ videoInfo.resolution }}</p> <p>帧率: {{ videoInfo.frameRate }}</p> <p>比特率: {{ videoInfo.bitRate }}</p> <p>时长: {{ videoInfo.duration }}</p> <p>编码: {{ videoInfo.encoding }}</p> <p>音频声道: {{ videoInfo.audioChannels }}</p> <p>音频采样率: {{ videoInfo.audioSampleRate }}</p> <p>音频比特率: {{ videoInfo.audioBitRate }}</p> <p>音频编码: {{ videoInfo.audioEncoding }}</p> </div> </div> </template> <script> export default { data() { return { videoInfo: null }; }, methods: { handleFileChange(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = () => { this.$refs.videoPlayer.src = reader.result; this.getVideoInfo(file); }; reader.readAsDataURL(file); }, getVideoInfo(file) { const video = document.createElement('video'); video.preload = 'metadata'; video.onloadedmetadata = () => { window.URL.revokeObjectURL(video.src); this.videoInfo = { format: file.type, fileSize: file.size, resolution: video.videoWidth + 'x' + video.videoHeight, frameRate: video.frameRate, bitRate: video.bitRate, duration: video.duration, encoding: video.encoding, audioChannels: video.audioChannels, audioSampleRate: video.audioSampleRate, audioBitRate: video.audioBitRate, audioEncoding: video.audioEncoding }; }; video.src = URL.createObjectURL(file); } } }; </script> ``` 在上述示例中,通过 `<input type="file">` 元素选择视频文件,并将其赋值给 `<video>` 元素的 `src` 属性。然后使用 JavaScript 获取 `<video>` 元素的相关属性,从而获得视频文件的各种信息。最后,将这些信息显示在页面上。 请注意,由于浏览器的安全限制,您可能无法直接获取视频文件的详细信息。在某些情况下,可能需要将视频文件上传到服务器端进行解析或使用第三方库来实现更精确的信息获取
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值