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

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

25.08.2018

281

1


  • Warning: Use of undefined constant html - assumed 'html' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 42

  • Warning: Use of undefined constant css - assumed 'css' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 43

  • Warning: Use of undefined constant script - assumed 'script' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 44

  • Warning: Use of undefined constant primer - assumed 'primer' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 45

  • Warning: Use of undefined constant video - assumed 'video' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 46

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

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

Из исходного iframe потребуется только ID

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

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() {
var vimeo = document.querySelectorAll( ".vimeo" );
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


Warning: Use of undefined constant html - assumed 'html' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 51

Warning: Use of undefined constant css - assumed 'css' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 52
.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;}

Warning: Use of undefined constant script - assumed 'script' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 53
( 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 );
} );
};
} )();

Warning: Use of undefined constant primer - assumed 'primer' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 54

Warning: Use of undefined constant video - assumed 'video' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 55
  • Похожие записи
  • Комментарии
  • Вложения
Видео (тест)
Видео на сайте

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

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

Фон — видео

Фон — видео

Очень эффектно, для главной страницы, смотрится фон из видео. Рассмотрим основные моменты данной «фишки». Добавление видеофона в вёрстку <div class="video-bg"> <video autoplay="" loop="" muted="" poster="https://opttour.ru/wp-content/uploads/2016/05/Cover-girl-HD.jpg"> <source src="https://opttour.ru/wp-content/uploads/2016/05/Cover-girl-HD.mp4" type="video/mp4"> </video> </div> Читать далее »

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

1 комментарий

  1. tstas

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

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