Question

我试图在我的网站上将div设为与视频相同的高度。

所以我执行了这个：

var videoHeight = 0;
videoHeight = $("video").css("height");
$(".tester").css("height", videoHeight);

in

$(document).ready(function(){}

并在

$(window).resize(function(){}

但是当我调整窗口大小而不是刷新时，高度才准确。我该怎么办？

刷新时：视频高554像素，格子为493像素

调整大小时：它是相等的

有什么想法吗？

编辑：

这是我的视频标记：

<video class="video"  preload="auto" loop="loop" controls>
      <source src="video/demo.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Answer 1

也许它会像这样工作：

video.addEventListener('loadedmetadata', function() {
    // Video is loaded and can be played

    var videoHeight = 0;
    videoHeight = $("video").css("height");
    $(".tester").css("height", videoHeight);
}, false);

Wait until an HTML5 video loads

Answer 2

在加载元数据之前，视频不知道其尺寸。使用https://developer.mozilla.org/en-US/docs/Web/Events/loadedmetadata

(.*[\r\n]+)

请注意video.addEventListener('loadedmetadata', function() { var videoHeight = $("video").css("height"); $(".tester").css("height", videoHeight); }, false);事件可能在loadedmetadata触发时已经触发，因此您可能需要在设置处理程序之前检查高度。

执行功能？仅适用于调整大小

2 个答案: