首页 > 建站教程 > JS、jQ、TS >  js获取上传的视频时长(blob和base64方法)正文

js获取上传的视频时长(blob和base64方法)

    我爱模板网在用vue-cli做一个教育网站时,需要上传视频,同时,还得在接口传视频长度。上传我用的是file控件:
<input type="file">
    我们都知道 html5 的 video,是可以获取视频时长的,即duration属性。那么现在的思路就是,将file控件上传的,得到的视频,想办法获取地址,赋给一个video,等待可以播放了(canplay),就可以得到视频时长了。关键是地址,经测试,通过 URL.createObjectURL 转为blob地址,或者通过 FileReader 的readAsDataURL 转为base64地址,video都可以直接播放,那么完美了,最终代码如下:
<input type="file" onchange="getDuration(this)">
<script>
//方法一:获取blob地址
function getDuration(that){
    var url = URL.createObjectURL(that.files[0]);
    var oVideo = document.createElement('video');
    oVideo.setAttribute('src',url);
    oVideo.oncanplay = ()=>{
        alert('视频时长:'+oVideo.duration+'秒');
    }
}

//方法二:获取base64地址:
function getDuration(that){
    var reader = new FileReader();
    var file = that.files[0];
    reader.readAsDataURL(file);
    reader.onload = ()=>{
        var oVideo = document.createElement('video');
        oVideo.setAttribute('src',reader.result);
        oVideo.oncanplay = ()=>{
            alert('视频时长:'+oVideo.duration+'秒');
        }
    }
}
</script>
    注:1、如果视频比较大,不建议使用第二种,因为base64可能会太长,等待时间比较久
          2、经测试,即使放在onload里面,也未必能获取时长,最好放到 canplay里面,才能确保一定能获取时长。