/ Сайтостроение / Дизайн / Фон — видео

Фон — видео

03.05.2016

694

Очень эффектно, для главной страницы, смотрится фон из видео. Рассмотрим основные моменты данной «фишки».

Добавление видеофона в вёрстку

<div class="video-bg">
<video autoplay="" loop="" muted="" poster="https://opttour.ru/wp-content/uploads/2016/05/Cover-girl-HD.jpg">
<source src="https://opttour.ru/wp-content/uploads/2016/05/Cover-girl-HD.mp4" type="video/mp4">
</video>
</div>

Чтобы видео автовоспроизводилось в решении Fullpage.js нужно добавлять атрибут data-autoplay

CSS стили, адаптация под размер области, с наложением пиксельной сетки поверх видео

.video-bg {position: absolute; top: 0; bottom: 0; width: 100%; overflow: hidden;}

.video-bg video {position: relative; min-width: 100%; height: auto; z-index: -100;}
	
.video-bg:before {
    background-image: url(https://opttour.ru/wp-content/themes/tester/images/bg-pattern.png);
    width: 100%;
    position: absolute;
    content: " ";
    top: 0;
    bottom: 0;
    left: 0;
}

Элементы управления тэгом video

autoplay=»» — авто воспроизведение
loop=»» — видео зациклено
muted=»» — без звука
controls=»» — показывать кнопки управления видео
preload=»» — предварительно полностью загружает видео
width=»», height=»» — Задает ширину и высоту области для воспроизведения видео
poster=»https://opttour.ru/wp-content/uploads/2016/05/Cover-girl-HD.jpg» — то что показывать предварительно

Желательно: постер должен быть назван так же как видеофайл

Форматы воспроизведения

Для кроссбраузерности рекомендуют использовать сразу 2 формата: .mp4 и .webm

<source src="video.mp4" type="video/mp4"></source>
<source src="video.webm" type="video/webm"></source>

Скорость воспроизведения

Скорость воспроизведения можно отрегулировать с помощью jQuery

Задаем тэгу <video> id=»slow-motion» и добавляем скрипт (без DocumentReady)

var vid = document.getElementById("slow-motion");
vid.playbackRate = 0.5;
vid.volume = 0.5; // управлять уровнем громкости

Если задать отрицательное значение — будет воспроизводится в обратном порядке

Воспроизведение и пауза видео по событию jQuery:
$('.video-btn').click(function() {
		$('#video').get(0).play();
		$('#video').get(0).pause();
	});
Событие по окончании видео:
document.getElementById('video').addEventListener('ended',myHandler,false);
function myHandler(e) {
// Необходимое событие      
}

iframe Youtube

Фоновое видео можно также сделать с iframe с Youtube. Принцип тот же:

<div class="video-bg">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/ie31pg3NknE?rel=0&controls=0&mute=1;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen data-autoplay></iframe>
</div>

controls=0&mute=1;showinfo=0 — отключение кнопок управления и информации и звука

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Видео на сайте

Видео на сайте

Знакомимся с различными способами и сервисами (youtube, vimeo и т.д.) добавления видео на страницу сайта. Vimeo <iframe src="https://player.vimeo.com/video/130903027" width="500" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> YOUTUBE <iframe width="500" height="500" src="https://www.youtube.com/embed/BeaW2qq8wAk" frameborder="0" Читать далее »

Видео (тест)
Вкладка видеообзор

Вкладка видеообзор

Для некоторых товаров в интернет-магазине требуется видеообзор — сделаем для них на странице товара вкладку. Создаем дополнительное поле Видеообзор add_action( 'woocommerce_product_options_general_product_data', 'video_custom_general_fields' ); add_action( 'woocommerce_process_product_meta', 'video_custom_general_fields_save' ); function video_custom_general_fields() { Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Фон — видео
Выравнивание миниатюр товаров
Рекомендации для васВыравнивание миниатюр товаровOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.