Js获取视频文件分辨率的操作

琥珀之序

已于 2023-05-29 15:40:34 修改

阅读量1.6k

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-05-29 15:38:54 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40812503/article/details/130929344

版权

通过监听video标签的loadedmetadata事件，可以获取到视频的宽度videoWidth、高度videoHeight和时长duration。在Vue框架中，将这个过程封装成一个返回Promise的函数getVideoData，实现异步获取并同步返回视频信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js获取视频文件的分辨率问题：
关键三步：
1、监听video标签dom元素的loadedmetadata或canplay事件；
2、获取videoWidth和videoHeight的值；
3、异步监听，同步返回，利用return new Promise()方法。

话不多说，直接上代码

<-- html代码 -->
<div class="box_video">
	<video id="video_destiny" ref="video_destiny" autoplay src="/media/video/tiankong.mp4" muted="true"  loop="true"></video>
</div>

//js代码，结合了vue框架
mounted() {
	this.getVideoData().then(videoInfo => {
		console.log("videoInfo对象：",videoInfo);
	});
}

methods: {
	getVideoData(){
		return new Promise((resolve,reject)=>{
			let videoElement = document.querySelector('video');
			videoElement.addEventListener('loadedmetadata', function (){  
				resolve({
					width: this.videoWidth,
					height: this.videoHeight,
					duration: this.duration,
				});
			});
		});
	},
}