我爱模板网在用vue-cli做一个教育网站时,需要上传视频,同时,还得在接口传视频长度。上传我用的是file控件:
我们都知道 html5 的 video,是可以获取视频时长的,即duration属性。那么现在的思路就是,将file控件上传的,得到的视频,想办法获取地址,赋给一个video,等待可以播放了(canplay),就可以得到视频时长了。关键是地址,经测试,通过
URL.createObjectURL 转为blob地址,或者通过 FileReader 的
readAsDataURL 转为base64地址,video都可以直接播放,那么完美了,最终代码如下:
01 | <input type= "file" onchange= "getDuration(this)" > |
04 | function 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+ '秒' ); |
14 | function getDuration(that){ |
15 | var reader = new FileReader(); |
16 | var file = that.files[0]; |
17 | reader.readAsDataURL(file); |
19 | var oVideo = document.createElement( 'video' ); |
20 | oVideo.setAttribute( 'src' ,reader.result); |
21 | oVideo.oncanplay = ()=>{ |
22 | alert( '视频时长:' +oVideo.duration+ '秒' ); |
注:
1、如果视频比较大,不建议使用第二种,因为base64可能会太长,等待时间比较久
2、经测试,即使放在onload里面,也未必能获取时长,最好放到 canplay里面,才能确保一定能获取时长。