无信箱的全背景 HTML5 视频

Question

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

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

这会切断一些视频，但没关系，我只是想摆脱信箱有什么办法。只用 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>

Answer 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');

    }

}

Answer 2

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

和

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

我发现的问题是，缩放附加到正文的 bg 视频或 img bg 在 diff OS

bot safari 和 ie 上的 smae 浏览器中表现不同，而 ie 拒绝在 Windows 平台上根据我的喜好缩放宽度，但在 osx 上表现如预期，您的里程可能会有所不同

=-)