的解决方案：

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

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

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 3

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

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

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>

的解决方案：

4 个答案: