Question

我在这里找到了几个答案。

此代码适用于Firefox并输出正确的大小，但不适用于Chrome或IE。

主要是我试图获得宽度。

示例

我使用3个示例在视频下输出宽度。

的JavaScript

https://stackoverflow.com/a/4129189/6806643

var vid1 = document.getElementById("video");
vid1.videoHeight; // returns the intrinsic height of the video
vid1.videoWidth; // returns the intrinsic width of the video

返回0

https://stackoverflow.com/a/9333276/6806643

var vid2 = document.getElementById("video");
vid2.addEventListener( "loadedmetadata", function (e) {
    var width = this.videoWidth,
        height = this.videoHeight;
}, false );

返回0

https://stackoverflow.com/a/16461041/6806643

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

有时会返回正确的值
有时返回300（如果没有视频源则默认播放器大小）

Answer 1

编辑：在我实际阅读了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;
}

更新了JSFiddle

Answer 2

如果您尝试使用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示例：

https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

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

2 个答案: