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里面，才能确保一定能获取时长。