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

最新推荐文章于 2024-05-21 13:00:39 发布
最新推荐文章于 2024-05-21 13:00:39 发布
阅读量1.6w 收藏
点赞数
分类专栏： JavaScript video
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jncinets/article/details/89761637
版权

chrome 浏览器可以获取到，

listenerLoadedMetaData = (e) => {
    alert(e.target.readyState)
    if (e.target.readyState > 0) {
        alert('w：' + e.target.videoWidth + 'h：' +e.target.videoHeight)
    }
};

在安卓中多数不支持。++D.

QIHU.ZY
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS获取各种宽度、高度的简单介绍
10-25
主要介绍了JS获取各种宽度、高度的简单介绍的相关资料,需要的朋友可以参考下
基于JavaScript+HTML+cropper.js 摄像头拍照和拖动裁剪
07-13
context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); cropper.crop(); }); ``` 裁剪完成后，我们可以使用cropper的getCroppedCanvas方法获取裁剪后的canvas，然后将其转换为Blob对象，通过...
Js获取视频文件分辨率的操作
天命既定，水中幻月
05-29 1121
1、监听video标签dom元素的loadedmetadata或canplay事件；3、异步监听，同步返回，利用return new Promise()方法。2、获取videoWidth和videoHeight的值；话不多说，直接上代码。
HTML5更改video的src路径后，更新后的视频宽高为0的解决方法
Wonder233的学习博客
09-14 5351
<video id="video4" width="100%" height="400px" src="media/1.mp4"> <source type="video/mp4"> </video>从视频列表中选择视频将video中的src进行更改后，直接获取 videoHeight、videoWidth会得到 0 值var video4 = $("#video4").get(0); v
浅谈video标签 videoHeight和clientHeight 属性
最新发布
weixin_41721796的博客
05-21 187
在设置cavas元素的宽和高的时候，使用videoHeight和clientHeight会导致不同的结果。· video.videoHeight 和video.videoWidth截取到的图片与视频中分辨率无异。· video.clientHeight和video.clientWidth截取到的图片会比视频中模糊。点击 Screenshot后查看获取图片，可以发现与原视频清晰度无异。点击 Screenshot后查看获取图片，可以发现比原视频清晰度低。这两个属性截取到的图片的分辨率不一样。
前端期末考试试题及参考答案(06)
谷哥的小弟
01-02 4390
HTML5支持的视频格式：目前，在HTML5中嵌入的视频格式主要包括Ogg、MPEG4、WebM三种文件格式。
HTML5标签video设置视频的宽度高度
Pete很皮
05-13 6894
HTML5中一般情况下video设置视频的宽度高度： <video width="500" height="400" controls="controls"> 但是有的时候发现设置了视频的高度却并没有发生变化，我们可以设置其父元素的宽高，让video填充满父元素。只要给video标签加上style="width:100%;height:100%;object-fit:fill"即...
html 获取视频文件的宽高尺寸，怎么获取视频的宽度-解决方案
橙-极纪元-cplvfx-JJY.Cheng
01-11 2858
html 获取视频文件的宽高尺寸，怎么获取视频的宽度-解决方案
C#实现语音视频录制-附demo
09-03
public VideoFileMaker(string filePath, string videoCodec, int videoWidth, int videoHeight, int videoFrameRate, string audioCodec, int audioSampleRate, int audioChannelCount, bool autoSyncToAudio);...
实时获取视频当前帧封面图.rar
08-10
"实时获取视频当前帧封面图"的主题涉及到如何在用户观看视频时动态显示当前播放帧的图像，这通常被称为视频海报或者视频预览图。这项技术可以增强用户体验，使用户在未点击播放按钮前就能对视频内容有所了解。以下将...
video-cover:视频获取首帧图片
05-01
以上就是使用JavaScript获取视频首帧图片的基本流程。需要注意的是，这个过程可能会受到浏览器兼容性的影响，不同的浏览器对HTML5 Video API的支持程度不同，因此在实际应用中可能需要添加相应的兼容性处理。同时，...
JS获取video真实宽高
钢ge的博客
01-12 5563
JS获取video真实宽高 JS代码 var video = document.querySelector('video'); video.addEventListener('canplay', function () { this.width = this.videoWidth; this.height = this.videoHeight; }); 知识点 canplay 事件，视频达到可以播放时触发； videoWidth 和 videoHeight 属性为视频真实宽高，这两个属性
js获取video元素真实分辨率
weixin_42230222的博客
09-18 2420
通过监听video元素触发的canplay事件获取video元素真实分辨率
视频获取分辨率以及时长的验证
m79452的博客
07-22 514
前端上传视频或者图片的时候需要校验分辨率，且视频要校验视频的时长，这时候心里就开始嘀咕了，JS能做到对视频这些详细的校验嘛？这个事件获取到视频的一些相关信息，因为事件本身是异步的，所以封装成了一个Promise。这个方法，转换成video实体DOM，再根据。直接创建Image的DOM，在通过。图片也是类似的操作，不过可以通过。同样的操作也可以用在音频上。
HTML5权威指南笔记：34-使用多媒体
u011069189的博客
11-02 796
1 使用video元素video元素可以在网页里嵌入视频内容。 video元素 元素类型 流/短语 允许具有的父元素 任何能包含流或短语元素的元素 局部属性 autoplay 、preload 、controls 、loop 、poster 、height、width 、muted 、src 内容 source和track元素，以及短语和流内容 标签用法
JS获取video原始宽高
youtasa的博客
01-15 3898
var video = document.querySelector('video'); video.addEventListener('canplay', function () { this.width = this.videoWidth; this.height = this.videoHeight; });
HTML5视频video
One of thre_tigers的博客
01-30 1948
博客简介 本篇博客将会介绍HTML5中视频< vedio >的用法： 视频简介以及格式 < video > 标签的属性 基本用法举例 < vedio >+DOM 视频简介以及格式 Web 上的视频 直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了...
js 实现sps 解析获取视频分辨率
sinat_27720649的博客
03-24 1223
function ceil(val) { return Math.ceil(val); } //获取buf 的前n个bit组成的值 function u(bitCount, buf) { var ret = 0; for( var i = 0;i< bitCount;i++) { ret <<= 1; if (buf[Math.floor(startBitIndex / 8)] & (0x80 >> (startBitIndex %..
用js创建video元素本地预览，并获取video元素的真实分辨率
我的米饭
04-08 7023
使用 document.createElement(‘video’) 创建了一个video元素后，直接用 video.width 获取到的尺寸永远是0，要用下边的方法获取 1、先把所选的本地video文件生成本机预览url const videoSrc = window.URL.createObjectURL(yourFile) 2、创建video对象，并给video对象设置本地可预览的url ...
camerax预览录制实时获取视频原始数据
06-10
你可以使用 CameraX API 来实现预览、录制和获取视频原始数据。具体步骤如下： 1. 首先，你需要在 AndroidManifest.xml 文件中添加相机权限： ```xml <uses-permission android:name="android.permission.CAMERA" /> ``` 2. 在布局文件中添加预览视图： ```xml <androidx.camera.view.PreviewView android:id="@+id/previewView" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 3. 在 Activity 或 Fragment 中获取相机实例，并绑定预览视图： ```kotlin val cameraProviderFuture = ProcessCameraProvider.getInstance(this) cameraProviderFuture.addListener({ val cameraProvider = cameraProviderFuture.get() val preview = Preview.Builder().build() val cameraSelector = CameraSelector.Builder() .requireLensFacing(CameraSelector.LENS_FACING_BACK) .build() val camera = cameraProvider.bindToLifecycle(this, cameraSelector, preview) preview.setSurfaceProvider(previewView.surfaceProvider) }, ContextCompat.getMainExecutor(this)) ``` 4. 如果要录制视频，可以使用 MediaRecorder API： ```kotlin val mediaRecorder = MediaRecorder() mediaRecorder.setVideoSource(MediaRecorder.VideoSource.SURFACE) mediaRecorder.setOutputFormat(MediaRecorder.OutputFormat.MPEG_4) mediaRecorder.setVideoEncoder(MediaRecorder.VideoEncoder.DEFAULT) mediaRecorder.setOutputFile(videoFilePath) mediaRecorder.setVideoSize(videoWidth, videoHeight) mediaRecorder.setVideoFrameRate(videoFrameRate) mediaRecorder.setVideoEncodingBitRate(videoBitrate) mediaRecorder.prepare() mediaRecorder.start() ``` 5. 如果要获取视频原始数据，可以使用 ImageAnalysis API： ```kotlin val imageAnalysis = ImageAnalysis.Builder() .setBackpressureStrategy(ImageAnalysis.STRATEGY_KEEP_ONLY_LATEST) .build() imageAnalysis.setAnalyzer(ContextCompat.getMainExecutor(this), { imageProxy -> val buffer = imageProxy.planes[0].buffer // 处理视频原始数据 imageProxy.close() }) cameraProvider.bindToLifecycle(this, cameraSelector, preview, imageAnalysis) ``` 注意，ImageAnalysis API 只能在 Android 10 及以上的设备上使用。在 Android 9 及以下的设备上，你需要使用 Camera2 API 来获取视频原始数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

QIHU.ZY

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值