Полный фон HTML5 видео без почтового ящика - PullRequest
Новая
       6

Полный фон HTML5 видео без почтового ящика

0 голосов
/ 21 ноября 2011

Здесь есть много вопросов относительно того, как сделать фоновое HTML5-видео, но у меня нет проблем с этим, он работает нормально (за исключением небольшой проблемы, когда он будет воспроизводить только аудио, а не видео, пока я не выберу что-то на странице или измените его размер, см. здесь для этой проблемы: Только Chrome воспроизводит аудио до изменения размера

То, что я хочу сделать, это сделать так, чтобы видео соответствовало фону так, чтобы оно никогда не имело никакого почтового ящика (линии выше / ниже или по бокам, когда соотношение сторон не соответствует). Это означает, что ширина подгонки, когда высота меньше, чем отношение, и высота подгонки, когда ширина меньше, чем отношение.

Это отрежет часть видео, но это нормально, я просто хочу избавиться от почтового ящика. Есть ли способ сделать это только с помощью 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>

Ответы [ 2 ]

4 голосов
/ 12 декабря 2012

Я решил это так, хотя я не уверен, насколько он твердый 

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

    }

}
1 голос
/ 29 января 2012

Я пробовал два (2) различных плагина jQuery, которые неплохо справляются с этой проблемой. http://github.com/georgepaterson/jquery-videobackground хороший плагин, с функциями обратного вызова и функциями / стилями навигации / управления, не работает на мобильных устройствах до сих пор, но очень хорош на Windows и OSX LION.

и

http://syddev.com/jquery.videoBG/ более простой плагин, более простой в настройке, но при этом менее надежный, с теми же проблемами с мобильным сафари, но очень способный в противном случае.

проблема, которую я обнаружил, заключается в том, что масштабирование видео bg или img bg, привязанного к телу, будет вести себя по-разному в браузере smae на diff OS

Bot Safari, то есть отказывается масштабировать ширину по своему вкусу на платформах Windows, но ведет себя так, как ожидается на OSX, ваш пробег может варьироваться

= -)

...