JS获取video原始宽高

最新推荐文章于 2024-03-02 15:09:17 发布

高然然----IT农名工

最新推荐文章于 2024-03-02 15:09:17 发布

阅读量3.9k

点赞数

本文链接：https://blog.csdn.net/youtasa/article/details/103985623

版权

var video = document.querySelector('video');
video.addEventListener('canplay', function () {
    this.width = this.videoWidth;
    this.height = this.videoHeight;
});

参考地址，https://blog.csdn.net/weixin_33690963/article/details/91697691

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

高然然----IT农名工

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

JavaScript 读取图片的宽高

且听风吟的博客

08-17

764

JavaScript new Image()读取图片的宽高

vue项目利用elementui 上传视频获取视频的宽高大小等信息

TVM的博客

12-01

5134

1.饿了么的上传组件 <el-upload>,监听他的变化on-change <el-upload :on-change="uploadVideoChange" > <el-button size="small" type="primary"> <i class="el-icon-upload" /&...

参与评论您还未登录，请先登录后发表或查看评论

videojs获取视频真实宽高

Winhye

09-15

1545

【代码】videojs获取视频真实宽高。

JS获取video真实宽高

weixin_33690963的博客

04-03

1万+

为什么80%的码农都做不了架构师？>>> ...

js获取video的真实宽高

xuefeng11111的博客

09-18

3477

参考：https://blog.csdn.net/ganggelove/article/details/112526292 最近要实现一个功能，使用的vue项目，需要获取到video元素的真实宽度，但是通过$refs获取到的宽高并不是真实的宽度，之后再网上查到，可以通过js进行实现实现原理原生video上有一个canplay方法，可以监听视频是否可以开始播放，而当canplay的时候，说明视频已经加载成功，这个时候可以获取到视频的真实宽高了 <video id='video'>&lt

js获取视频的大小，宽高，时间，获取视频的第一针

cuiyuchen111的博客

08-23

1570

【代码】js获取视频的大小，宽高，时间，视频第一针作为图片。

oh-my-videojs:video.js和video-js-swf的原始代码分析-js

03-24

video.js和video-js-swf的原始代码分析 Video attachNetStream(netStream:NetStream):void将NetStream的数据帧通过Video显示出来 clear():void清空当前播放画面 width和height获取／设置宽度／高度 NetStream 初始...

前端获取视频或图片的实际宽高

weixin_42213951的博客

08-08

1423

```javascript // 获取图片宽高 imgspecsFct(file) { console.log(file) var width=''; var height=''; var that=this; const isSize = new Promise(function(resolve, reject) { let _URL = window.UR.

vue3获取接口返回的图片的宽高

qq_41697998的博客

12-14

2087

vue3获取接口返回的图片的宽高

H5/微信小程序/uni-app 动态获取视口高度

白白籽

08-24

2012

H5： console.log(document.documentElement.clientHeight) 微信小程序： wx.getSystemInfo({ success:function(res){ console.log("动态获取屏幕高度",res.windowHeight) } }) uni-app uni.getSystemInfo({ success: function (res) { console.log(res.windowHeight); } }); .

js获取图片和视频的宽高等

前端踩坑之路

05-15

3151

获取图片和视频的宽高日常开发中，在提交给后端视频和图片等文件之前，需要控制文件的的宽高，大小等。图片 // 上传文件的方法 uploadFile(e) { let that = this // 该file中可以获取到文件名，大小等信息 let file = e.target.files[0] let img = new Image() let reader = new Fi

UNI-APP 获取video视频实际宽高

码海扬帆：前端探索之旅的博客

03-02

1141

- 在模板中使用 video 标签，并绑定 loadedmetadata 事件到 onVideoLoaded 方法 -->

Atitit nodejs js 获取图像分辨率尺寸大小宽度高度

attilax的专栏

02-03

4597

Atitit nodejs js 获取图像分辨率尺寸大小宽度高度使用gm类库有点麻烦，太大了。直接使用-images 得了。。安装这个模块即可。。。还有image-size 这个模块应该也可。。。 Picclr.js function processOnePicV3(f) { var images = require("images");

js获取视频原始宽度和高度？videoWidth和videoHeight真的有用吗？

奇乐软件开发踩坑日志

05-02

1万+

chrome 浏览器可以获取到， listenerLoadedMetaData = (e) => { alert(e.target.readyState) if (e.target.readyState > 0) { alert('w：' + e.target.videoWidth + 'h：' +e.target.videoHeight) ...

python-opencv：对视频的基本操作包括获取高度、宽度、fps以及播放等opencv快速入门

j18423532754的博客

06-03

7642

关于OpenCV简介 OpenCV是一个基于BSD许可（开源）发行的跨平台计算机视觉库，可以运行在Linux、Windows、Android和Mac OS操作系统上。它轻量级而且高效——由一系列 C 函数和少量 C++ 类构成，同时提供了Python、Ruby、MATLAB等语言的接口，实现了图像处理和计算机视觉方面的很多通用算法。OpenCV用C++语言编写，它的主要接口也是C++语言，但是依然保留了大量的C语言接口。在计算机视觉项目的开发中，OpenCV作为较大众的...

video.js视频高度自适应解决方法

最新发布

07-12

El-upload是一个基于Element UI的文件上传组件，它支持上传多种类型的文件，包括视频。如果你想在用户上传视频后获取其宽度和高度，你需要在上传成功后的回调函数中处理。你可以通过HTML5的`FileReader` API读取视频数据，并使用`HTMLVideoElement`对象的`naturalWidth`和`naturalHeight`属性来获取原始大小。以下是一个简单的示例： ```javascript import ElUpload from 'element-plus/upload'; // ... <template> <el-upload :action="uploadUrl" :on-success="handleSuccess" :auto-upload="false" // 阻止自动上传，手动触发 > <i class="el-icon-upload"></i> <div slot="tip">点击选择视频</div> </el-upload> </template> <script> export default { methods: { handleSuccess(file, response) { const fileObj = new Blob([response.data], { type: file.type }); const videoURL = URL.createObjectURL(fileObj); const video = document.createElement('video'); video.src = videoURL; video.addEventListener('loadedmetadata', () => { const width = video.videoWidth; const height = video.videoHeight; console.log('视频宽:', width); console.log('视频高:', height); // 这里可以将宽高信息保存到数据库或做进一步处理 this.handleVideoDimensions(width, height); URL.revokeObjectURL(videoURL); // 释放URL资源 }); }, handleVideoDimensions(width, height) { // ... (在这里处理宽高的业务逻辑) }, }, }; </script> ``` 在这个例子中，当视频上传成功后，我们创建一个`video`元素并设置其src为服务器返回的视频数据，然后监听`loadedmetadata`事件，在这个事件触发时，视频的尺寸已经加载完成，我们就可以获取到它们了。