js获取上传的视频时长(blob和base64方法)_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

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

来源：未知作者：类型：文章教程点击次数：发布时间：2019-08-13 11:44:54

我爱模板网在用vue-cli做一个教育网站时，需要上传视频，同时，还得在接口传视频长度。上传我用的是file控件：

`1`	`<input` `type="file">`

我们都知道 html5 的 video，是可以获取视频时长的，即duration属性。那么现在的思路就是，将file控件上传的，得到的视频，想办法获取地址，赋给一个video，等待可以播放了（canplay），就可以得到视频时长了。关键是地址，经测试，通过 URL.createObjectURL 转为blob地址，或者通过 FileReader 的readAsDataURL 转为base64地址，video都可以直接播放，那么完美了，最终代码如下：

01<input type="file" onchange="getDuration(this)">
02<script>
03//方法一：获取blob地址
04function getDuration(that){
05    var url = URL.createObjectURL(that.files[0]);
06    var oVideo = document.createElement('video');
07    oVideo.setAttribute('src',url);
08    oVideo.oncanplay = ()=>{
09        alert('视频时长：'+oVideo.duration+'秒');
10    }
11}
12 
13//方法二：获取base64地址：
14function getDuration(that){
15    var reader = new FileReader();
16    var file = that.files[0];
17    reader.readAsDataURL(file);
18    reader.onload = ()=>{
19        var oVideo = document.createElement('video');
20        oVideo.setAttribute('src',reader.result);
21        oVideo.oncanplay = ()=>{
22            alert('视频时长：'+oVideo.duration+'秒');
23        }
24    }
25}
26</script>

注：1、如果视频比较大，不建议使用第二种，因为base64可能会太长，等待时间比较久
2、经测试，即使放在onload里面，也未必能获取时长，最好放到 canplay里面，才能确保一定能获取时长。