获取<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;

- Paul Schneider

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

这些链接涉及到HTML5中与视频大小相关的内容。

- Amr

---

变量video = $（event.target）; console.log（video.videoWidth）; 是“undefined” :(但使用video [0] .videoWidth仍可以正常工作。 谢谢 :) - Paul Schneider

你说得对，是我的错误，我会编辑答案的，不用谢 :))。 - Amr

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上查看。

- guerrato

Answer 3

试试这个

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

- Fuse Gamer

Answer 4

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

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

- WiRa