Question

关于如何制作背景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>

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/ 一个更简单的插件更容易定制，但也不那么健壮，同样的问题与移动野生动物园，但其他方面也是如此。

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

bot safari，即拒绝在Windows平台上按照我的喜好扩展宽度，但在osx上表现如预期，您的里程可能会有所不同

= - ）

没有Letterboxing的完整背景HTML5视频

2 个答案: