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

Posted 2023-05-07

【中文标题】执行一个功能？仅适用于调整大小

【英文标题】：Executing a function ? works only on resize

【发布时间】：2016-09-25 19:35:14

【问题描述】：

我正在尝试使 div 与我网站上的视频高度相同。

所以我执行了这个：

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

在

$(document).ready(function()

在

$(window).resize(function()

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

刷新时：视频高 554 像素，我的 div 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>

【问题讨论】：

@Baptiiste Amaud：你能上传任何小提琴样本吗？同时，您还可以在 ready 函数中触发 re-size 函数。

【参考方案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

【讨论】：

没错，页面可能已加载，但视频尚未加载，因此尺寸不可用。如果视频被缓存，原始代码可能会起作用。唯一的事情是不必等待整个视频加载，只需它的元数据，有一个元数据加载事件

@BaptisteArnaud 确保您的 video 变量已定义。

【参考方案2】：

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

video.addEventListener('loadedmetadata', function() 
    var videoHeight = $("video").css("height");
    $(".tester").css("height", videoHeight);
, false);

请注意，loadedmetadata 事件可能在 DOMReady 触发时已经触发，因此您可能需要在设置处理程序之前检查高度。