没有 Letterboxing 的完整背景 HTML5 视频答案

【问题标题】：Full Background HTML5 Video Without Letterboxing没有 Letterboxing 的完整背景 HTML5 视频
【发布时间】：2026-02-08 11:25:02
【问题描述】：

这里有很多关于如何制作背景 HTML5 视频的问题，但我对此没有任何问题，它工作正常（除了一个小问题，它只会播放音频而不是视频，直到我在页面上选择某些内容或调整它的大小，有关该问题，请参见此处：Chrome Only Plays Audio Until Resize

我想要做的是让视频适合背景，这样它就不会出现任何信箱（当纵横比不匹配时，上方/下方或两侧的线条）。也就是当高度小于比例时适合宽度，当宽度小于比例时适合高度。

这会切断一些视频，但没关系，我只是想摆脱信箱。有没有办法只用 CSS 来做到这一点，如果不是什么 javascript/jQuery/我需要使用什么？

到目前为止我的代码：

#mashvid {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    min-width: 100%;
    z-index: -5;
}

<video preload id="mashvid" poster="images/mashvid_poster.png">
      <source src="http://www.mashwork.com/testsite/video/mashwork1080.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src="http://www.mashwork.com/testsite/video/mashwork1080.ogv" type='video/ogg; codecs="theora, vorbis"'>
      <source src="http://www.mashwork.com/testsite/video/mashwork1080.webm" type='video/webm; codecs="vp8, vorbis"'>
      Your browser does not support the video tag.
</video>

【问题讨论】：

这可能会有所帮助：*.com/questions/4380105/html5-video-scale-modes

标签： html fullscreen html5-video

【解决方案1】：

我是这样解决的，虽然我不确定它有多可靠

function dimensionFunction() {

    if ($('video').height() <= $(window).height()) {

        $('video').height($(window).height());
        $('video').width('auto');

    } else {

        $('video').width($(window).width());
        $('video').height('auto');

    }

    if ($('video').width() <= $(window).width()) {

        $('video').width($(window).width());
        $('video').height('auto');

    } else {

        $('video').height($(window).height());
        $('video').width('auto');

    }

}

【讨论】：

这基本上就是我最终的做法。必须有哪个维度更大的逻辑。我想知道随着时间的推移，CSS 会增加多少动态样式功能。

【解决方案2】：

我已经尝试了两 (2) 个不同的 jQuery 插件，它们在这个问题上做得相当不错。 http://github.com/georgepaterson/jquery-videobackground 一个不错的插件，带有回调和导航/控制功能和样式，不适用于移动设备“so-far-ee”，但在 windows 和 osx lion 上非常好。

和

http://syddev.com/jquery.videoBG/ 一个更简单的插件，更易于定制，但也不太健壮，与移动 safari 相同的问题，但在其他方面非常强大。

我发现的问题是缩放 bg 视频或附加到 body 的 img bg 在 diff OS 上的 smae 浏览器中会表现不同

bot safari 和 ie 拒绝在 windows 平台上按我的喜好缩放宽度，但在 osx 上表现如预期，您的里程可能会有所不同

=-)

【讨论】：