Чтоб создать максимальное погружение!
Для создания подобного, нам нужен один короткий ролик (превью), который будет зациклен и без звука. Второй ролик это обычное видео со звуком, которое будет включаться при наведении, клике или прокрутке.
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:
- Работает под смартфонами и планшетами.
- Автоматически останавливает видео, если человек переключается на звонок или переключается между вкладками браузера.
- Автоматически останавливает или запускает видео при скроллинге страницы!
- Начинает подгрузку видео и постеров, только когда видео находится в пределах видимости.
С вами был разработчик конструктора лэндингов cPortfolio!
P.S.: Как правильно оформить html код smartVideo под скринридеры?
Комментарии (34)
alexxisr
22.08.2019 11:51+6А ведь совсем недавно для шевелящихся картинок использовали гифки, а не видео. И не надо было ничего кроме тега img в обычном html.
asakasinsky
22.08.2019 13:27Есть один интересный момент — вес «длинной» гифки будет больше веса видео-версии этой анимации.
alexxisr
22.08.2019 15:22Согласен, но мы же берем гиф как предпросмотр видео — это кадров 10, тут видео не сильно сэкономит, если вообще будет выигрыш.
А длинные гифки конечно нужно заменять на видео, но без автопроигрывания.
aamonster
22.08.2019 12:55+1Вот ведь. Напомнили, полез в Chrome ставить chrome:flags/#autoplay-policy в "нефиг" – а нету. Придётся вас через chrome://media-engagement банить.
s37
22.08.2019 13:14Очень «круто»! А то действительно забыли уже все про те времена, когда сидишь ночью (особенно «круто» если рядом ребенок спит которого только что уложил), а у тебя вдруг откуда-то музыка орать начинает на какой-то поистине дикой громкости.
iefedorov Автор
22.08.2019 13:23-1та музыка сама не включается!) звук только если сами захотите!
браузеры не позволяют включать звук автоматически! ну только старые… так что не нужно минусить не разобравшись в теме!aamonster
22.08.2019 13:37+1Лучше бы они и видео не позволяли. Так что могу поблагодарить вас — вы приближаете этот светлый миг.
ЗЫ: И спасибо вообще за напоминание про эту тему. Хотя бы на смартфоне залез в Chrome/Settings/Site Settings/Media и выставил Autoplay=Blocked. Ваш сайт помог проверить, что это работает.iefedorov Автор
22.08.2019 13:47-1и лучше бы они запрещали выводить картинки?) что уж там мелочиться!) только текст! все остальное блочим и вырезаем!)
aamonster
22.08.2019 14:00+1Вообще-то раньше эти настройки в браузерах были. И ими пользовались (в основном для экономии трафика/ускорения загрузки). Сейчас их сочли ненужными, но чем больше автоплея будет вылезать – тем больше шансов, что настройки вновь появятся. Появятся – скажем вам спасибо :-)
А вот зачем вы совершаете хабросуицид – я не понимаю. Очевидно же, что бОльшая часть читателей вашей статьи предпочитает самостоятельно решать, когда смотреть видео, и за посягательство на эту свободу будет минусовать.
iefedorov Автор
22.08.2019 14:27да, были, помню те времена)
>Появятся – скажем вам спасибо :-)
та не, это не благодаря мне, а благодаря разработчикам браузеров и ОС) это они разрешили посчитав благом!)
>А вот зачем вы совершаете хабросуицид – я не понимаю.
я тоже не понимаю, почему меня минусят, на конференциях эпл и самсунг, когда они представляли эту возможность, все их плюсовали, даже хабровцы) хлопали в ладоши! уже прошло три года, все этим пользуются! и тут я написал простой код, который позволяет оптимизировать, не только запускать видео, что обычно все делают, но его и паузить при прокрутке, если оно вышло за пределы экрана!
но еще и паузить когда вы переключились между закладками или вам позвонили! и за это меня минусят… вот просто автозапуск — это хорошо! а автозапуск умный, который выключается во время, это плохо! минус такому…aamonster
22.08.2019 15:42Дык делайте акцент на том, что людям нравятся!
У вас в первой же фразе: "много текста и автозапускающихся видео-роликов, вместо картинок". Т.е. звучит как "смотрите, как делать то, что все ненавидят".
Более того: упомянутые вами полезные вещи (своевременно ставить на паузу) будут работать, даже если автозапуска не будет. Это раз. И два: по хорошему, для вашего "Ежедневного пророка" нужен не автозапуск, а кнопка запуска — просто она должна быть одна на всю страницу. Интересно, кстати, можно ли это сделать, если автозапуск видео запрещён настройками браузера. Навскидку – можно иметь единственный элемент video и перемещать его из одного div в другой – но не знаю, продолжится ли playback при изменении data-src.
Да, и ваш пример плох: в нём запущены сразу три видео. Два из трёх должны ждать, пока на них обратят внимание.
iefedorov Автор
22.08.2019 16:03ну да, ваши комменты заставили задуматься… может стоить ряд моментов переделать!)
iefedorov Автор
22.08.2019 16:14Убрал из шапки слова: «много текста и автозапускающихся видео-роликов, вместо картинок»
может теперь меньше будут минусить)
iefedorov Автор
22.08.2019 15:56>А вот зачем вы совершаете хабросуицид – я не понимаю.
ну я не знал что хабровцы настолько суровый народ!) вы вспомнили старые добрые браузеры в которых картинки можно отключать)
другие вспомнили браузеры elinks и links2 как идеал для браузеров! и что даже картинки это зло, что уж говорить про мультимедиа) и тут понятно за что минусят… читая такие комменты…
теперь буду знать, что на хабре если нужно +100500, то нужно рассказывать про текст и текстовые страницы как идеал сайтов) ну и вспоминать о старых добрых браузерах, особенно консольных!)aamonster
22.08.2019 16:02Опять наловите минусов :-)
Как только вы начинаете принуждать людей к какому-то варианту реальности (будь то автозапускающиеся видео или сайты на чистом тексте) – те, кого он устраивает, проходят мимо, а те, кого не устраивает – начинают вас гнобить.
AlePil
22.08.2019 18:02elinks и links2 вспомнили ни как идеал для браузеров, ( кстати запуск одного из них с флагом -g позволяет видеть картинки и простую графику) а как инструменты, которые на 100% уберут реально то, что не дает осуществлять быстрый поиск и тормозит открытие страниц в обычных популярных на сегодня браузерах. Вот и все. Никто не против новых сверистелок, когда они к месту и не мешают всему пользователю.
Denai
22.08.2019 19:00К автозапуску видео есть ограничения. Со звуком, например, нельзя автозапускать. Ну и по размерам и прочему определённые требования есть. Штука хорошая, когда используется адекватно. Иногда это в самом деле нужно. Но вообще и лопатой можно людей убивать, а микроскопами окна бить. Веб защищается от нецелевого использования как умеет.
З.Ы. Сам делал нечто подобное, но чуть иное. Несло только позитив.aamonster
22.08.2019 20:29Там на mouseover обработчики? А то с телефона что с автозапуском, что без – никакой разницы.
А насчёт ограничений – чем больше будут использовать автозапуск, тем больше ограничений появится. Но вообще приятней иметь настройки. Мне удобней, чтобы видео по моему явному указанию запускалось, кому-то наоборот.
Denai
22.08.2019 20:35В моём случае js цепляется за мышиные события, ибо цели замучать слабые телефоны не было. Потому чтоб начало воспроизводить надо зажать пальцем (странно, но это срабатывает) или навести курсор. Внутри уже играет само, по тачу/клику останавливается.
99% людей в настройки никогда не полезет. Может части оставшихся и приятнее, но они и плагин могут соорудить)
s37
22.08.2019 13:56Ага, у меня даже функция такая есть по умолчанию — выключенный звук в принципе. Нормальный человек работает со звуком и выключает когда не нужно, а не держит выключенным чтобы включить когда нужно.
А вот про «ну только старые…» вообще не нужно «ля-ля», а то скоро все подряд менять будем.iefedorov Автор
22.08.2019 14:18У меня в хроме, если я зашел на сайт и ничего не кликал, а просто скроллишь его, смотришь, то звука нет и не может быть, даже если сайт пытается его запустить! Насколько я знаю, так во всех современных браузерах…
Но если я делаю что-то, кликну куда-то, то тогда возможен звук, браузер разрешает его, так как происходит взаимодействие с интерфейсом и логично что может быть нужен звук… и в моем примере то же самое… и если вы считаете что это плохо… ну возможно… это должны браузеры доработать… где человек мог выбирать: при каких условиях звуки должны появляться… или чтоб была клавиша: тихий режим…
но я считаю, что логично и правильно, когда человек взаимодействует с интерфейсом, чтоб были звуки от взаимодействия! типа: я кликнул по видео, и появился звук от видео, кликнул по аудио и то же самое… или кликнул по меню и звук от меню… но возможность выбора тихого режима нужна! но это не должно быть проблемой разработчиков сайтов! это проблема разработчиков браузеров или ОС, которые должны давать такие возможности!s37
22.08.2019 14:32Это хорошо что у вас так, а вот у меня бывает иначе. А если компьютеров больше чем один, то самое последнее чем мне хочется заниматься это различные настройки и т.п.
А еще я обращу внимание на такой неочевидный факт, что если кто-то подходит сзади/сбоку и видит видио на экране, то человек, почти со стопроцентной вероятностью, решит что вы его смотрите, а все попытки убрать его с экрана будут выглядеть как «заметание следов». Идем дальше: содержание видео может не соответствовать содержанию страницы, текст (особенно куски) никто не читает т.к. внимание привлекает видео. Лично моё рабочее место находится слева от двери (0,5 м влево и 1 м вперед), спиной к стене (дверь справа сзади по диагонали), за ней коридор по которому вся фирма ходит и кабинет директора. Т.е. издалека люди увидят что на экране видео не связанное с работой, а вот текст им не интересен будет даже если трижды про работу. Думаю дальнейшую идею вы понимаете.
AlePil
22.08.2019 14:47Совсем недавно где-то я видел решение с автозапуском видео при прокрутке…
Мое мнение — автозапуск видео, как и автозагрузки без предупреждения и спроса, это зло, которое, к сожалению, существует и его даже кто-то да продвигает. Скоро так действительно для поиска информации придется использовать старый добрый elinks или links2...
shurikaltai
22.08.2019 21:11Всем привет. Человек статью написал а его «комментаторы» в злодеи записали? Бро никогда не читай комменты в инете пусть беснуются ))) Делай свое дело.
Отрицательный результат — тоже результат.
© Нильс Борs37
23.08.2019 12:19Перед тем, как получать «отрицательный результат» нужно вообще подумать где и для чего эта вещь будет использоваться, а то один вон пытались тоже пестициды по мощнее сделать, а вышло совсем плохо.
thelongrunsmoke
Только браузеры избавили нас от этого дерьма, и вот опять...
iefedorov Автор
Как это можно назвать дерьмом?:) я просто в шоке с вас!
Все равно, что говорить, что инет должен быть только из текста! и все остальное надо запретить… вы истинный линуксоид!)
iefedorov Автор
кстати, вы чуть перепутали, браузеры под смартфоны и планшеты, только 3 года назад разрешили автозапуск видео, а не запретили! И причина: слишком много гиф-видео, которые весили в разы больше, и жрали ресурсов смартфона в 10-ки раз больше!
Они поняли что, запретив автозапуск обычного видео под смартфонами, они сделали только хуже!