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

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 под скринридеры?