Question

对于宽度为100％的视频，jquery height（）函数（编辑 ：innerHeight（）和outerHeight（）也是 ）在不同的浏览器中返回不同的数字

请参阅http://www.bootply.com/iNuBWZeWCx

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

Chrome 48.0.2564.109 m：几乎总是输出 952 ，很少 1047 虽然我无法检测到它为什么会发生变化，但我现在正在刷新它但＃＆＃ 39;住在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 Explorer中的IE Edge显示1903x1046.65
Firefox Inspector：1903x1046.65
Chrome开发者工具：1903x1047

Answer 1

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

您应该等待loadedmetadata事件。

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

Answer 2

我的分辨率也是1920x1080，使用“宽度：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>

在浏览器中具有100％宽度的视频的不同高度

2 个答案: