html5 и CSS3 видео фон

Question

Я хотел бы узнать, как поставить фоновое видео в HTML так же, как его сделали в https://vimeo.com

Моя ширина контейнер 1000px.

Какой размер и resoultion следует загрузить видео быстрее и быть идеальным размером? Не черным сверху и снизу.

Кроме того, может ли кто-нибудь помочь с кодировкой html5 и css3? Можете ли вы показать мне код?

Я хотел бы следить за вашими инструкциями и учиться тому, как воссоздать видео в bg.

Answer 1

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

Вот мой код для этого:

<video src="http://media.w3.org/2010/05/sintel/trailer.mp4" autoplay loop></video> 

И мой CSS

video { 
    display: block; 
    height: 150%; 
    left: 0; 
    object-fit: cover; 
    position: fixed; 
    top: -25%; 
    width: 100%; 
    z-index: -1; 
} 

В принципе, то, что он делает то, что он позиционирует видео, так что это) по содержанию (г-индекс : -1) и b) больше экрана.

Object-fit позволяет нам изменить способ реагирования видео на превышение или уменьшение размера. Я выбрал обложку, потому что предположил, что часть видео отключена не имеет значения. fill заставит его занять место, игнорируя соотношение сторон. Содержит значение по умолчанию. Этот метод избавляет от черных полос.

Однако вы также должны проверить видеоролики на нескольких устройствах и размерах. Более продвинутый метод, который избавится от проблем с черным баром, будет вычислять соотношение сторон с javascript, а затем помещать соответствующий источник в DOM. Запросы СМИ также могут быть полезны.