js获取上传的视频时长(blob和base64方法)
- 作者：网页模板
- 类型：文章教程
- 点击次数：
- 发布时间：2019-08-13 11:44
我爱模板网在用vue-cli做一个教育网站时，需要上传视频，同时，还得在接口传视频长度。上传我用的是file控件：
2、经测试，即使放在onload里面，也未必能获取时长，最好放到 canplay里面，才能确保一定能获取时长。
(责任编辑：网页模板)
<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里面，才能确保一定能获取时长。
(责任编辑：网页模板)
- 本文标签：
- js获取视频时长
