Газета Гарри Поттера

Создаем видео, как в легендарной газете «Гарри Поттера», в которой много текста и автозапускающихся видео-роликов, вместо картинок.

Картинки хорошо, но видео-ролики без кнопок Play, еще лучше!

Дает максимальное погружение.

Для создания подобного, нам нужен один короткий ролик (превью), который будет зациклен и без звука. Второй ролик это обычное видео со звуком, которое будет включаться при наведении, клике или прокрутке.

Html код, встраиваемый в страницу:

<div class="smartVideo graysv">    <video data-cprotate data-cprotatehover muted loop data-inits="autoplay" data-src="./test1.mp4" data-poster="./test.jpg" webkit-playsinline playsinline pip="false"></video>    <video data-cprotate data-volume="1" data-src="./test2.mp4" data-poster="./test.jpg" webkit-playsinline playsinline pip="false"></video> </div> 

2 видео оборачивается в div помечается классом smartVideo и добавляется класс graysv, если вам нужен черно-белый фильтр на видео, пока оно не включено или без звука!

data-cprotate – сообщает скрипту, что будет ротация основного и превью видео.
data-src – путь к видео файлу.
data-poster – путь к картинке, которая выводится, пока подгружается видео.
playsinline – для автозапуска под смартфонами, без этого не будет запускаться.
pip=«false» – чтоб браузеры не показывал кнопку скачивания.

Первому ролику мы должны ставить атрибуты muted loop data-inits=autoplay, которые значат: без звука, зациклено, и автозапуск если видно на экране.

Для первого видео-ролика, есть атрибут data-cprotatehover, который не обязателен и он означает – запускать видео при наведении мышкой. На второе видео его ставить не нужно!

Второму видео нужно указать data-volume=1 громкость, но если вы не хотите чтоб были звуки, тогда нужно поставить 0.

Пример, как можно сделать отзывы на странице.

Для подключения вам нужно вставить CSS стили на страницу:

<style> .smartVideo{   width:300px; } .smartVideo video {     width:100%;     z-index:0;     position: absolute;     top:0;     left:0;     user-select:none;     border:0;     padding:0;     margin:0;     vertical-align:middle;     cursor:pointer;     outline:none; } .smartVideo > video:first-child {   position:relative;   z-index:1; } .smartVideo video:not([data-inits="autoplay"]){visibility:hidden;z-index:0;} .graysv video{   -webkit-filter: grayscale(100%);   -ms-filter: grayscale(100%);   filter: grayscale(100%); } .graysv.cpsound video,.graysv:hover video:not([data-mouseout]){   -webkit-filter: none;   -ms-filter: none;   filter: none; } </style>

И нужен JS файл, который нужно подключать перед закрывающимся тегом body.

<script src="/smartvideo.js"></script>

Исходники для скачивания

Скрипт собрал на скорую руку!

Если будет много заинтересованных, то можно будет сделать полноценную библиотеку с различными настройками и выложить на гитхабе!

Опять же, если кому-то интересна техническая сторона работы JavaScript, то пишите, могу в следующей статье расписать JavaScript код (хотя придется его хорошо причесать и почистить перед этим! 🙂

Ключевые моменты smartVideo:

1. Преодолевает блокировку автозапуска на смартфонах (планшетах)
2. Автоматически останавливает видео, если человек переключается на звонок или переключается между вкладками браузера.
3. Автоматически останавливает или запускает видео при скроллинге страницы!
4. Начинает подгрузку видео и постеров, только когда видео находится в пределах видимости.

С вами был разработчик конструктора лэндингов cPortfolio!

P.S.: Как правильно оформить html код smartVideo под скринридеры?