javascript - 浏览器中 100% 宽度的视频的不同高度

Question

对于宽度为 100% 的视频，jquery height() 函数(编辑:innerHeight() 和outerHeight() 也 ) 在不同的浏览器中返回不同的数字。

参见http://www.bootply.com/iNuBWZeWCx

我的分辨率是 1920x1080，但浏览器针对任何特定分辨率返回不同的数字。在我的分辨率下，浏览器窗口最大化时视频的真实高度是 1047px

• Chrome 48.0.2564.109 m:几乎总是输出 952，很少输出 1047，尽管我无法检测到它发生变化的原因，我现在正在刷新它，但它仍保持在 952 ...
• Firefox 44.0.2:始终输出1047
• IE Edge 11.103.10586.0:始终输出 952

为什么 Chrome + IE 输出 952？他们是怎么得到这个号码的？如何获得正确的高度？

根据要求编写以下代码...

<p id="videoheight"></p>
<video id="bgvideo" style="width:100%;">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>

<script type="text/javascript">
$(document).ready(function() {
    $("#videoheight").text($("#bgvideo").innerHeight());
});
</script>

编辑:

• DOM 资源管理器中的 IE Edge 显示为 1903x1046.65
• 火狐检查器:1903x1046.65
• Chrome 开发者工具:1903x1047

Answer 1

我的猜测是这是一个时间问题。由于您的视频可能尚未加载，并且在您请求高度时视频文件的尺寸仍然未知。

您应该等待loadedmetadata事件。

$(function () {
    $("#bgvideo").bind("loadedmetadata", function () {
         $("#videoheight").text($(this).innerHeight());
    });
});