js Оптимизация видео YouTube и Vimeo на сайте 

Дата публикации  Дата изменения25.08.17  КомментарииНет   Просмотры1071

Курсы

Автор: Николай Мациевский, технический директор облачного сервиса Айри.рф
Использование видео становится все более распространенным, а такие сервисы как YouTube, Vimeo и другие предоставляют пользователям возможности для встраивания видео на свои сайты. Хотя это очень удобно, такое встраивание может привести к значительным задержкам в загрузке страницы.
В статье рассказывается о том, каким образом встраиваемое видео замедляет загрузку сайта и как с этим можно бороться.

Встраивание YouTube-видео на сайте

Для того чтобы встроить видео из YouTube на страницу своего сайта достаточно всего лишь загрузить видео на YouTube и выбрать «Поделиться». Далее выбираете «HTML-код», и у вас появляется возможность изменить размер встраиваемого видео и задать другие настройки. В итоге вы получаете небольшой кусочек кода, который вам нужно вставить на вашу страницу:

<iframe width="560" height="315" src="https://www.youtube.com/embed/filenamehere" frameborder="0" allowfullscreen class="c large aligncenter"</iframe>

Но внедрение видео через использование этого кода сопряжено проблемой: браузер скачивает при обращении к странице более, чем 500 КБ файлов Javascript. Это происходит в любом случае, даже если пользователь и не взаимодействует с встроенным на страницу проигрывателем видео.

1

Проблемы с несколькими видео

Что будет, если у вас на странице расположены несколько видео? Совсем не трудно предположить такие сценарии: например, несколько видео на странице с отзывами о компании. Или различные видео-инструкции, показывающие этапы настройки ПО на странице помощи.

YouTube загружает несколько файлов для каждого видео в iframe (осуществляется 8 запросов). Поэтому страницы, где есть несколько встроенных видео, могут загружаться намного медленнее из-за этих http-запросов и соответствующих загрузок файлов.
Отображение статического «баннера» на месте видео с YouTube

Решение было найдено в том, чтобы получить статический «баннер» с YouTube и отображать его вместо встроенного видео. Когда пользователь кликает на кнопку проигрывания видео, начинается показ этого видео.

Это можно сделать с помощью Javascript-кода, указанного ниже:

<script>
  function youTubes_makeDynamic() {
 var $ytIframes = $('iframe[src*="youtube.com"]');
 $ytIframes.each(function (i,e) {
 var $ytFrame = $(e);
 var ytKey; var tmp = $ytFrame.attr('src').split(/\//); tmp = tmp[tmp.length - 1]; tmp = tmp.split('?'); ytKey = tmp[0];
 var $ytLoader = $('<div class="ytLoader">');
 $ytLoader.append($('<img class="cover" src="https://i.ytimg.com/vi/'+ytKey+'/hqdefault.jpg">'));
 $ytLoader.append($('<img class="playBtn" src="play_button.png">'));
 $ytLoader.data('$ytFrame',$ytFrame);
 $ytFrame.replaceWith($ytLoader);
 $ytLoader.click(function () {
 var $ytFrame = $ytLoader.data('$ytFrame');
 $ytFrame.attr('src',$ytFrame.attr('src')+'?autoplay=1');
 $ytLoader.replaceWith($ytFrame);
 });
 });
  };
  $(document).ready(function () {youTubes_makeDynamic()});
</script>

Эффект от такого решения оказался очень существенным. Время загрузки страницы сократилось с 17,38 секунд до 3,6 секунд.

2

Альтернативное внедрение видео YouTube

Стандартный код внедрения видео YouTube не только увеличивает время загрузки страницы за счет скачивания дополнительных файлов и множественных запросов. Габариты видео на странице также внедрены в код, и делают проигрыватель неадаптивным.

Можно внедрить видео на страницу по-другому. Не будем использовать iframe, а воспользуемся тэгом div, не будем указывать размер и разместим iframe на страницу только, если пользователь кликнет на кнопку проигрывания видео.

2

Поскольку габариты проигрывателя не указаны, он займет по ширине весь родительский контейнер, а высота будет подобрана автоматически. Можно также вставлять несколько таких тэгов div с разными идентификаторами видео, если их нужно разместить на странице несколько.

Далее вставим следующий код в шаблон вашей страницы. Он найдет все такие внедренные тэги и заменит их на миниатюры видео.

<script>

//Light YouTube Embeds by @labnol
//Web: http://labnol.org/?p=27941

document.addEventListener("DOMContentLoaded",
function() {
	var div, n,
 v = document.getElementsByClassName("youtube-player");
	for (n = 0; n < v.length; n++) {
 div = document.createElement("div");
 div.setAttribute("data-id", v[n].dataset.id);
 div.innerHTML = labnolThumb(v[n].dataset.id);
 div.onclick = labnolIframe;
 v[n].appendChild(div);
	}
});

function labnolThumb(id) {
var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
	play = '<div class="play"></div>';
return thumb.replace("ID", id) + play;
}

function labnolIframe() {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?autoplay=1";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}

</script>

.youtube-player img:hover {
-webkit-filter: brightness(75%);
}

Обратите внимание, что браузеры Chrome и Safari на устройствах iOS и Android разрешают проигрывание HTML5 видео только по действию пользователя. Они блокируют автоматическое проигрывание внедренного видео, чтобы предотвратить скачивание больших объемов по сотовой связи.

*Источник: email рассылка Searchengines.ru

Бесплатные курсы

Категории

Теги: , , , , , , ,

Оцените материал:

Рейтинг: 0.0/10 (0)


КомментарииКомментарии:

Нет комментариев к этой статье.


Поля, обозначенные как *, обязательны.





Максимальная длина сообщения 900 символов. Осталось   символов

 

Старые →← Новые