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

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

HIT

25.08.2018

7723

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>');
    });
});

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

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

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

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

Произвольное поле — Видео

Произвольное поле — Видео

Тип поля Видео В произвольных полях изначально отсутствует тип поля Видео. Его можно добавить небольшим плагином acf-field-video. Просто копируем папку acf-field-video-master в папку plugins и в админке включаем его. Далее Читать далее »

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

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

Знакомимся с различными способами и сервисами (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" Читать далее »

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

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

  1. tstas

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

  2. Александр

    Благодарю.

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