通过视频文件上传后监听loadedmetadata事件来获取视频属性
getVideoInfo(file) {
return new Promise(resolve => {
const videoElement = document.createElement('video')
videoElement.src = URL.createObjectURL(file)
videoElement.addEventListener('loadedmetadata', function() {
resolve({
duration: videoElement.duration,
width: videoElement.videoWidth,
height: videoElement.videoHeight
})
})
})
}
使用方式
<div onclick="doInput">上传</div>
<script>
doInput() {
const inputObj = document.createElement('input');
inputObj.addEventListener('change', this.readFile, false);
inputObj.type = 'file';
inputObj.click();
},
readFile() {
const file = this.files[0]; // 获取input输入的文件
},
getVideoInfo(file) {
return new Promise(resolve => {
const videoElement = document.createElement('video')
videoElement.src = URL.createObjectURL(file)
videoElement.addEventListener('loadedmetadata', function() {
resolve({
duration: videoElement.duration,
width: videoElement.videoWidth,
height: videoElement.videoHeight
})
})
})
}
</script>