获取 <video> 的原始尺寸

Question

我想要一个视频和图片列表，每个都调整为相同大小以便于查看。

当用户点击其中之一时，应将其调整为原始大小（或最大边界框的大小）

我的问题是：如何获取视频的原始尺寸？

图片，

var img = new Image();
img.src= $(event.target).attr("src");
img.width   //this is the width
img.height  //this is the height

很有魅力。

但我找不到对 <video> 执行相同操作的方法。有没有？

我知道加载元数据有一些问题，但视频已经加载，我只想将其调整为原始大小（好吧，我不会对它们在调整大小时延迟加载有问题，但我想那是更多的努力）

这可以吗？如果是这样，如何？ jQuery首选。

解决方案：

var video = $(event.target);
var width = video[0].videoWidth;

Answer 1

您可以使用本机 Javascript :

var video = $("#myvideo" ); //JQuery selector 
video[0].videoWidth; //get the original width
video[0].videoHeight; //get the original height

也想知道 :

video[0].width; //get or set width for the element in DOM
video[0].height; //get or set height for the element in DOM

有关更多信息，您可以查看 W3 中的这些链接： videoWidth , videoHeight

Answer 2

我注意到，在加载元数据之前，您会得到错误的结果...如果您想确定，请等待元数据加载事件，然后获取 videoHeight 和 videoWidth！

yourVideoElement.addEventListener( "loadedmetadata", function (e) {
        console.log(this.videoHeight);
        console.log(this.videoWidth);
    }, false );

Answer 3

发布的解决方案对我不起作用。如果有人遇到同样的问题，我的解决方案可能会有所帮助。

const video = document.getElementById("myVid")

video.addEventListener('loadeddata', function(e) {
    let width = e.target.videoWidth
    let height = e.target.videoHeight

    let elWidth = e.target.width
    let elHeight = e.target.height

 }, false)

在https://codepen.io/guerrato/pen/aYNeaW

上查看

Answer 4

试试这个

$(function(){
  $('#my_video').bind('loadedmetadata', function(){
    var rawWidth = $(this).prop('videoWidth'); 
    var rawHeight = $(this).prop('videoHeight');
    $("#result").html('Height: '+rawHeight+'; Width: '+rawWidth);  
  });
});

获取 <video> 的原始尺寸

Get the original dimensions of a <video>

html

size

video

jquery

resize

解决方案：