两个背景视频在相同的<video>标记下表现不同

Question

我有两个在线服务的视频，两个表现不一样。 ＆＃34; Bunny视频＆＃34;坐在导航的顶部，＆＃34;空间视频＆＃34;在下面，在导航的未识别的黑色背景下（我没有设置）。

可能是什么造成的？我在本地尝试并将格式更改为webm - 但没有成功。

   <video id="background-video" loop autoplay muted>

      // "bunny video"
     // http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4
      // "space video"
      // http://www.dropbox.com/s/nqkhiatqe9vxw3w/space-odyssey.mp4?raw=1

// I switch those two links here:
      <source src="http://www.dropbox.com/s/nqkhiatqe9vxw3w/space-odyssey.mp4?raw=1" type="video/mp4" />

    </video>

在codepen上演示：https://codepen.io/RycerzPegaza/pen/KNYXJg

Answer 1

这两个视频对我来说都是一样的，两者都是1280x720分辨率 - 然而，“Big Buck Bunny”以16：9的宽高比呈现并填充视频帧，而空间剪辑则以16：9的形式显示（在视频中加入黑条，因为它以更宽的宽高比呈现。

所以，你的导航没有黑色背景 - 它实际上是视频的一部分。明白我的意思？