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

Question

对于宽度为 100% 的视频，jquery height() 函数（edit：innerHeight() 和 outerHeight() ) returns 在不同的浏览器中是不同的数字。

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

我的分辨率是 1920x1080，但浏览器 return 任何特定分辨率的数字都不同。在我的浏览器 window 最大化分辨率下视频的真实高度是 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>

编辑：

IE Edge 在 DOM 资源管理器中显示 1903x1046.65
Firefox 检查器：1903x1046.65
Chrome 开发者工具：1903x1047

Answer 1

我的分辨率也是1920x1080，用"width:109.99%"。 http://www.bootply.com/3cCMYE77fs

<p id="videoheight"></p>
<video style="width:109.99%" id="bgvideo" controls="">
  <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>

Answer 2

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

您应该等待 loadedmetadata 事件。

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

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

Different height of a video with 100% width in browsers

html

javascript

jquery

html5-video