使用JavaScript获取HTML5视频的宽度和高度？

我试过这里找到的几个答案

这段代码在Firefox中工作并输出正确的大小，但在Chrome或IE中不工作

我主要是想得到宽度

示例

我使用3个示例输出了视频下的宽度

JavaScript

返回0

返回0

有时返回正确的值

---

有时返回300（如果没有视频源，则返回默认播放器大小）

如果您试图使用java脚本定义视频大小，我不确定您实际要做什么，尽管在我看来，您似乎只是希望它像此示例一样可自定义

如果我们假定视频是嵌入的，下面的代码可能会起作用

// Find all YouTube videos
var $allVideos = $("iframe[src^='//www.youtube.com']"),

    // The element that is fluid width
    $fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

  $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

  var newWidth = $fluidEl.width();

  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {

    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));

  });

// Kick off one resize to fix all videos on page load
}).resize();

您也可以参考此页面，了解其实际工作原理，还有一个CSS和HTML动态视频重缩放示例：

---

编辑：在我实际阅读了crossbrowser问题之后，改进了解决方案

下面的解决方案应该可以在Chrome和Firefox上使用。问题在于Firefox对待readyState的方式不同于Chrome

var vid2 = document.getElementById("video");
vid2.addEventListener("loadedmetadata", getmetadata);

if (vid2.readyState >= 2) {
    getmetadata(vid2);
}

function getmetadata(){
    document.getElementById('output2').innerHTML = "Test 2: " + vid2.videoWidth;
}

---

更新的

您能显示它在JSFIDLE中返回值吗？我没有正确使用文档写入输出。它在Chrome中显示Test 2:640，但在Firefox中为空。更新了我的答案，请检查它在Firefox和Chrome中都工作，但IE11没有返回值。让我把这段代码改编成我的项目，然后再给你回复。谢谢你在这方面的工作。我来看看这个。我只是在使用一个元素。

var vid3 = document.getElementById("video");
var videotag_width = vid3.offsetWidth;
var videotag_height = vid3.offsetHeight;

// Find all YouTube videos
var $allVideos = $("iframe[src^='//www.youtube.com']"),

    // The element that is fluid width
    $fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

  $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

  var newWidth = $fluidEl.width();

  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {

    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));

  });

// Kick off one resize to fix all videos on page load
}).resize();

var vid2 = document.getElementById("video");
vid2.addEventListener("loadedmetadata", getmetadata);

if (vid2.readyState >= 2) {
    getmetadata(vid2);
}

function getmetadata(){
    document.getElementById('output2').innerHTML = "Test 2: " + vid2.videoWidth;
}