Как заставить фоновое видео HTML5 заполнить высоту на дисплеях сетчатки?

Я создал новую клиентскую заставку, используя фоновое видео, и, кроме отзывчивых настроек для iPhone и уничтожения фонового видео на iOS, мне не пришло в голову протестировать на сетчатке.

Сегодня, когда я смотрю на MBP Retina, похоже, что видео покрывает «правильное количество пикселей» по высоте, но просто не знаю, как заставить видео покрывать «2x».

Вы слышали об этой спецификации?

Может быть проще установить минимальную высоту/минимальную ширину фона видео на "200%" для сетчатки?

Используемая разметка

<div id="bgVideo" class="background">
  <video id="video_background" preload="auto" autoplay loop muted volume="0">
    <source src="https://pravassawt.squarespace.com/s/pravassa-fall.mp4" type="video/mp4">
    <source src="https://pravassawt.squarespace.com/s/pravassa-fall.webm" type="video/webm">
    <source src="https://pravassawt.squarespace.com/s/pravassa-fall.ogv" type="video/ogg">
  </video>
</div>
<span style="opacity: .9"<div class="video_pattern" ></div></span>

CSS-фрагмент

#video_background { 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1000; 
    overflow: hidden;
}

Скриншоты и ссылки

Ссылка на действующий сайт

Снимок экрана с разрешением Retina — (MBP 13 дюймов Retina)


html css video retina
person Alan    schedule 08.09.2014    source источник
comment
К вашему сведению: установка минимальной высоты / минимальной ширины фона видео на 200% для сетчатки не сработала. По сути, он просто применил «200% масштабирование» к видеоконтенту. — сценарий звучит как ответ.   -  person Alan    schedule 08.09.2014

Ответы (1)


arrow_upward
0
arrow_downward

Уловка, которую вы можете использовать для сетчатки, состоит в том, чтобы создать экземпляр элемента в JavaScript, установив его ширину и высоту в два раза больше «обычного» размера тела.

Вы можете создать экземпляр переменных ширины и высоты следующим образом:

var videoWidth = (body.innerWidth() * 2);
var videoHeight = (body.innerHeight() * 2);

Затем, когда вы создаете фоновый видеообъект в файле JavaScript, установите параметры ширины и высоты на половину от значений videoWidth и videoHeight. Это может выглядеть примерно так:

videoBackground.setAttribute('width', videoWidth / 2);
videoBackground.setAttribute('height', videoHeight/ 2);

Приведенный выше код будет нормально отображать фоновое видео на настольных устройствах и устройствах без сетчатки. Наконец, вы можете использовать следующий код для масштабирования при обнаружении устройства сетчатки:

if(window.devicePixelRatio == 2) {
    videoBackground.setAttribute('width', videoWidth);
    videoBackground.setAttribute('height', videoHeight);
}

Преимущество этого метода в том, что он обеспечивает запасной вариант для дисплеев без сетчатки. Важным аспектом этого решения будет то, что вы создаете свой видеообъект внутри JavaScript, а не в HTML.

person Defiant    schedule 08.09.2014
comment
Спасибо. Похоже, это сработает, но мне нужно выяснить, как это реализовать. (говорит Дизайнер Разработчику) - person Alan; 08.09.2014
comment
Вы должны создать элемент в JavaScript и привязать его к div, который вы объявляете в своем HTML. Поместите все эти экземпляры в функцию в вашем JS-файле с именем 'prepareVideo()'. Вызовите функцию в своем HTML: ‹body onload=prepareVideo()› your code here ‹/body› - person Defiant; 08.09.2014