Js如何限制上传的视频文件分辨率大小？

琥珀之序

于 2023-05-29 15:22:05 发布

阅读量341

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_40812503/article/details/130928837

版权

直接上代码，结合了vue与jquery的一些语法。
(注：当然用纯 js 也是可以的，语法稍微改变一下而已)

<!-- 测试 -->
<div>
	<input type="file" id="upload-video" accept="video/*">
</div>

mounted() {
	this.verifyRadio();
},
methods: {
	verifyRadio(){
		$("#upload-video").on("change",(e)=>{ //使用jquery的获取方式，记得导入jquery
			const inputDom = e.target; //获取input标签的dom
			let file = inputDom.files[0];
			if(file){
				let videoUrl = URL.createObjectURL(file);
				const videoDom = document.createElement("video"); //创建video标签dom
				videoDom.src = videoUrl;
				videoDom.addEventListener('loadedmetadata', function (){  //当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。
					if(this.videoWidth>1920 || this.videoHeight>1080){
						console.error("视频分辨率不能大于1080p",this.videoWidth,this.videoHeight);
					}else{
						console.log("视频分辨率符合要求：",this.videoWidth,this.videoHeight);
					}
				});
			}else{
				console.error("文件不存在");
			}
		})
	}
}