动态获取音视频时长（vue）（js）

最新推荐文章于 2023-10-08 13:38:55 发布

秃秃秃了

最新推荐文章于 2023-10-08 13:38:55 发布

阅读量3.1k

点赞数

分类专栏： js需求文章标签： javascript 音视频 vue.js

本文链接：https://blog.csdn.net/weixin_61285710/article/details/122468789

版权

js需求专栏收录该内容

12 篇文章 0 订阅

订阅专栏

问题：有时，我们有一个音视频的链接，但是我们不知道它的时长，偏偏我们有需要拿到它的时长，来做一些判断……

解决：通过js动态创建一个audio或者video的标签，再从创建的标签中获取即可

// 选择文件（音视频）的标签，uploadFile是回调函数
<input type="file" @change="uploadFile">

// js

uploadFile(event) {
    var urlFile = event.target.files[0]  // 获取链接
    var url = URL.createObjectURL(urlFile)  // 动态创建一个链接
    var videoTime = ''
    // 判断音频还是视频，创建不同的音视频标签
    var videoElem = video.type.indexOf('audio') == -1 ? document.createElement('video') : document.createElement('audio')
    videoElem.src = url  // 向标签注入链接
    videoElem.oncanplaythrough = function() {
        // 获取时长，并向下取整
        videoTime = Math.floor(videoElem.duration)
    }
}