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

喜欢ヅ旅行 2024-03-16 10:34 81阅读 0赞

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,
    				});
    			});
    		});
    	},
    }

输入结果:  
![在这里插入图片描述][72d13040ec0642a8908a70eabd3ea151.png]

--------------------

壁纸放送：  
![在这里插入图片描述][83e965f0da3040f9b205048bc05bfd38.jpeg_pic_center]

[72d13040ec0642a8908a70eabd3ea151.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/4de3383b67ff40acb071b6fc41d75154.png
[83e965f0da3040f9b205048bc05bfd38.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/476d43bec00e48bea2df2fa299980e50.png

发表评论取消回复

表情：

评论列表（有 0 条评论，81人围观）

还没有评论，来说两句吧...

相关阅读

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

js获取视频文件的分辨率问题：关键三步： 1、监听video标签dom元素的loadedmetadata或canplay事件； 2、获取videoWidth和vi

喜欢ヅ旅行/ 2024年03月16日 10:34/ 0 赞/ 82 阅读

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

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

逃离我推掉我的手/ 2024年03月16日 10:33/ 0 赞/ 44 阅读

相关 java获取视频时长、分辨率、帧率、码率

1、先导包 <dependency> <groupId>ws.schild</groupId> <artifactId>jave-all-deps

川长思鸟来/ 2023年09月25日 22:11/ 0 赞/ 78 阅读

相关 JS获取浏览器信息及屏幕分辨率

网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：documen

桃扇骨/ 2023年08月17日 15:57/ 0 赞/ 169 阅读

相关 js获取视频时长

<!DOCTYPE html> <html> <head> <title></title> </head> <body>

绝地灬酷狼/ 2022年11月26日 14:00/ 0 赞/ 181 阅读

相关 js获取视频的时长

利用video标签的duration属性获取时长 <video (src)=""> //将视频文件的地址动态写入video.src //利用vide

谁借莪１个温暖的怀抱￠/ 2022年11月25日 04:29/ 0 赞/ 219 阅读

相关 JS获取当前对象大小以及屏幕分辨率等

JS获取当前对象大小以及屏幕分辨率等 ![复制代码][copycode.gif] < script type = " text/javascript " > func

小咪咪/ 2022年08月20日 08:15/ 0 赞/ 233 阅读

相关通过Js来获取所有屏幕分辨率的总结

> > > > > > > 通过Js来获取所有屏幕适配的总结 > > > > > > > > > <script type="t

青旅半醒/ 2022年08月19日 08:23/ 0 赞/ 12 阅读

相关 Android 获取播放视频的相关内容, 分辨率, 方向,作者信息

MediaMetadataRetriever retr = new MediaMetadataRetriever(); retr.se

傷城~/ 2022年08月18日 10:51/ 0 赞/ 120 阅读

相关 js获取页面宽度高度及屏幕分辨率

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] js获取页面宽度高度及屏幕分辨率网页可见区域宽：document.body.

忘是亡心i/ 2022年01月15日 03:59/ 0 赞/ 351 阅读