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

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

25.08.2018

411

1

Как сделать отложенную загрузку изображений описано здесь. Теперь сделаем отложенной загрузку видеороликов, в частности подгружаемых с видеохостингов 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 );
                } );    
    };
} )();

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

Тэги:

Поделится информацией с друзьями

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

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

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

Фон — видео

Фон — видео

Очень эффектно, для главной страницы, смотрится фон из видео. Рассмотрим основные моменты данной «фишки». Добавление видеофона в вёрстку <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

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

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