/ Scripts & jquery / Отложенная загрузка видео

Отложенная загрузка видео

HIT

25.08.2018

5509

2

Как сделать отложенную загрузку изображений описано здесь. Теперь сделаем отложенной загрузку видеороликов, в частности подгружаемых с видеохостингов YOUtube и Vimeo.

Отложенная загрузка iframe YOUtube

Из исходного iframe потребуется только ID (в примере ниже — hr8DOsAdtqQ)

<iframe width="560" height="415" src="https://www.youtube.com/embed/hr8DOsAdtqQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Который необходимо прописать в специальный атрибут:

<div class="youtube" data-embed="hr8DOsAdtqQ"><div class="play-button"></div></div>

Скрипт, который берет ID и при нажатии на кнопку play подгружает видео

( function() {
    var youtube = document.querySelectorAll( ".youtube" );
    for (var i = 0; i < youtube.length; i++) {
        var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
        var image = new Image();
                image.src = source;
                image.addEventListener( "load", function() {
                    youtube[ i ].appendChild( image );
                }( i ) );
        
                youtube[i].addEventListener( "click", function() {
                    var iframe = document.createElement( "iframe" );
                    iframe.setAttribute( "frameborder", "0" );
                    iframe.setAttribute( "allowfullscreen", "" );
                    iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
                    this.innerHTML = "";
                    this.appendChild( iframe );
                } );    
    };
} )();

Чтобы видео автоматически воспроизводилось:

youtube[i].addEventListener( "click", function() {
	var iframe = document.createElement( "iframe" );
	iframe.setAttribute( "frameborder", "0" );
	iframe.setAttribute( "allowfullscreen", "" );
	iframe.setAttribute( "allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" );
	iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?autoplay=1" );
	this.innerHTML = "";
	this.appendChild( iframe );
} );

Если нужно с параметрами lazyload для изображений:

//image.src = source;
image.classList.add('lazy');
image.setAttribute("data-src", source);

CSS нужен для предварительного показа скриншота ролика и вывода кнопки play

/* Lazyload iframe YOUtube */

.youtube {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
}

.youtube img {width: 100%; top: -16.82%; left: 0; opacity: 0.7;}

.youtube .play-button {
    width: 90px;
    height: 60px;
    background-color: #333;
    box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
    z-index: 1;
    opacity: 0.8;
    border-radius: 6px;
}

.youtube .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #fff;
}

.youtube img, .youtube .play-button {cursor: pointer;}

.youtube img, .youtube iframe, .youtube .play-button, .youtube .play-button:before {position: absolute;}

.youtube .play-button, .youtube .play-button:before {top: 50%; left: 50%; transform: translate3d( -50%, -50%, 0 );}

.youtube iframe {height: 100%; width: 100%; top: 0; left: 0;}

Отложенная загрузка iframe Vimeo

С Vimeo немного посложнее, потому что номер в ссылке на превью не совпадает с номер самого видео. В остальном все тоже самое, берем ID видео

<iframe src="https://player.vimeo.com/video/67508707" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

и прописываем его в тот же атрибут:

<div class="youtube" data-embed="67508707"><div class="play-button"></div></div>

Скрипт немного видоизменяем под vimeo

( function() {<br>
    var vimeo = document.querySelectorAll( ".vimeo" );<br>
    for (var i = 0; i < vimeo.length; i++) {
        var source = "https://i.vimeocdn.com/video/"; //можно поставить произвольную заглушку
        var image = new Image();
                image.src = source;
                image.addEventListener( "load", function() {
                    vimeo[ i ].appendChild( image );
                }( i ) );
        
                vimeo[i].addEventListener( "click", function() {
                    var iframe = document.createElement( "iframe" );
                    iframe.setAttribute( "frameborder", "0" );
                    iframe.setAttribute( "allowfullscreen", "" );
					iframe.setAttribute( "webkitallowfullscreen", "" );
					iframe.setAttribute( "mozallowfullscreen", "" );
                    iframe.setAttribute( "src", "https://player.vimeo.com/video/"+ this.dataset.embed + "?autoplay=1");
                    this.innerHTML = "";
                    this.appendChild( iframe );
                } );    
    };
} )();

Если нужно видео добавить свойства loop и autopause, то после записи ?autoplay=1 нужно добавить &loop=1&autopause=0

Стили CSS абсолютно те же самые, только поменять .youtube на .vimeo

Альтернативное решение для подгрузки роликов YouTube

Немного проще код, но предварительные изображения нужно подставлять вручную

<div class="YoutubeBlock" id="oxLxzXTTaM0"><img src="https://img.youtube.com/vi/oxLxzXTTaM0/sddefault.jpg"></div>
.YoutubeBlock {cursor: pointer;}
.YoutubeBlock img {width: 100%;	height: 315px; object-fit: cover;}	
$(document).ready(function() {
	$(".YoutubeBlock").click(function() {
		var ID = $(this).attr("id");
		$("#"+ID).html('<iframe width="100%" height="315" src="https://www.youtube.com/embed/'+ID+'?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
    });
});

Поделиться в соц. сетях:

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

Фон — видео

Очень эффектно, для главной страницы, смотрится фон из видео. Рассмотрим основные моменты данной «фишки». Добавление видеофона в вёрстку CSS стили, адаптация под размер области, с наложением пиксельной сетки поверх видео Читать далее »

Форматы записей

Форматы записей

Записям в WP можно назначать формат, в зависимости от содержания: aside (заметка), gallery (галерея), link (ссылка), image (изображение), quote (цитата), status (статус), video, chat (чат), audio либо Стандартный (по-умолчанию). Пользовательские Читать далее »

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

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

Для некоторых товаров в интернет-магазине требуется видеообзор — сделаем для них на странице товара вкладку. Создаем дополнительное поле Видеообзор Создаем вкладку Видеообзор Проблема X-Frame-Options Проблема X-Frame-Options решается следующим образомдля youtubeперед Читать далее »

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

2 комментария

  1. tstas

    Приветствую!
    Работает следующим образом:
    Вместо видео, подгружается скрин из ютуба (превьюшка), по щелчку запускается видео!
    Это круто, но как теперь сделать, чтоб превьюшка загружалась отложено?
    Заранее спасибо.

  2. Александр

    Благодарю.

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