- Регистрация
- 9 Май 2015
- Сообщения
- 1,071
- Баллы
- 155
- Возраст
- 51
Отображением на сайте видео с различных видеохостингов (того же YouTube) сегодня уже никого не удивить. Однако, если на странице находится не одно видео, а несколько возникает не совсем приятная ситуация.
Дело в том, что для отображения даже стандартного preview браузеру необходимо направить соответствующий запрос к видео хостингу, а это требует времени. И чем больше видео на странице, тем больше времени потребуется для обработки запросов к видеохостингу и тем дольше страница будет загружаться.
Как оптимизировать скорость загрузки страницы?
1.Старайтесь не размещать на странице вашего сайта код вставки видео, если планируется добавить на неё несколько видеороликов
Как уже говорилось выше, это требует отправки запросов к видеохостингу. Поэтому лучше заменить стандартный код, предлагаемый видеохостингом на «заглушку» в виде изображения или, в крайнем случае, простой кнопки или ссылки.
2.Загружайте видео динамически
И здесь мы уже вплотную подошли к использованию паттернам «Отложенная инициализация» и «Заместитель».
Вкратце напомним их суть.
По существу «Заместитель» можно рассматривать как частный случай «Отложенной инициализации».
На самом деле для того чтобы показать несколько видеороликов на сайте вовсе не обязательно загружать их на страницу все сразу. Это можно делать динамически при помощи JavaScript, например, по клику на вышеописанной «заглушке».
Рассмотрим данный приём более подробно на примере YouTube.
1й способ. Показ видео в одном и том же контейнере
Этот способ основан на паттерне «Отложенная инициализация».
Создадим две «заглушки». В атрибуте rel у каждой из них укажем идентификатор видео на YouTube.
<h4><span class="play" rel="идентификатор_видео_1">Видео 1</span></h4>
<h4><span class="play" rel="идентификатор_видео_2">Видео 2</span></h4>
Далее создадим контейнер, в котором будем показывать видео.
<div class="video">
<iframe width="640" height="390" src="//www.youtube.com/embed/идентификатор_видео_1" frameborder="0" allowfullscreen></iframe>
</div>
В нашем примере контейнер уже содержит код вставки видео. Его наличие необязательно. Данный код просто отображает видео, которое будет показываться по умолчанию при загрузке страницы.
По клику на «заглушке» мы будем удалять из контейнера имеющийся в нём код вставки видео (если он там есть), а на его место размещать новый со ссылкой уже на другое видео.
$('.play').click(function(){
// Получаем идентификатор видео из "заглушки"
var video_id=$(this).attr("rel");
// Удаляем старое видео
$('.video iframe').remove();
// Добавляем новое видео
$('.video').append('<iframe id="v'+video_id+'" width="640" height="390" src="//www.youtube.com/embed/'+video_id+'" frameborder="0" allowfullscreen></iframe>');
});
Таким образом видео будет загружаться только одно и только тогда когда посетитель страницы захочет его посмотреть. В результате объём трафика между браузером и видеохостингом существенно уменьшается и скорость загрузки страницы возрастает.
2й способ. Показ каждого видео в индивидуальном контейнере
Если показ видео в одном и том же контейнере не подходит (в том числе с точки зрения дизайна), можно создать отдельный контейнер для каждого видео. В этом случае при клике на «заглушку» будет изменяться содержимое соответствующего контейнера.
Ниже показа один из возможных вариантов реализации.
Создаём контейнеры для видеозаписей и помещаем в них «заглушки».
<div class="video2"><h4><span class="play2" rel="идентификатор_видео_1">Видео 1</span></h4></div>
<div class="video2"><h4><span class="play2" rel="идентификатор_видео_2">Видео 2</span></h4></div>
При клике на «заглушки» очищаем соответствующий контейнер и загружаем в него видео.
$('.play2').click(function(){
// Получаем идентификатор видео из "заглушки"
var video_id=$(this).attr("rel");
// Получаем контейнер, в котором расположена "заглушка"
var parent=$(this).parent();
// Очищаем контейнер, в котором расположена "заглушка"
parent.empty();
// Добавляем видео
parent.append('<iframe id="v'+video_id+'" width="640" height="390" src="//www.youtube.com/embed/'+video_id+'" frameborder="0" allowfullscreen></iframe>');
});
По своей сути этот способ представляет собой классическую реализацию паттерна «Заместитель», так как видео загружается не просто «по запросу», а вместо самой «заглушки». Более того при загрузке видео в индивидуальный контейнер нет необходимости загружать его повторно, если посетитель страницы вновь захочет его посмотреть. Что даёт дополнительную оптимизацию быстродействия по сравнению с первым способом.
Но, такой подход также не всегда приемлем в плане дизайна.
Поэтому, при выборе способа размещения видео на странице, как и подавляющем большинстве случаев, лучше всё-таки исходить в первую очередь из сути решаемой задачи.
Дело в том, что для отображения даже стандартного preview браузеру необходимо направить соответствующий запрос к видео хостингу, а это требует времени. И чем больше видео на странице, тем больше времени потребуется для обработки запросов к видеохостингу и тем дольше страница будет загружаться.
Как оптимизировать скорость загрузки страницы?
1.Старайтесь не размещать на странице вашего сайта код вставки видео, если планируется добавить на неё несколько видеороликов
Как уже говорилось выше, это требует отправки запросов к видеохостингу. Поэтому лучше заменить стандартный код, предлагаемый видеохостингом на «заглушку» в виде изображения или, в крайнем случае, простой кнопки или ссылки.
2.Загружайте видео динамически
И здесь мы уже вплотную подошли к использованию паттернам «Отложенная инициализация» и «Заместитель».
Вкратце напомним их суть.
- «Отложенная инициализация»
Некоторая ресурсоёмкая операция (создание объекта, вычисление значения) выполняется непосредственно перед тем, как будет использован её результат ();
«Заместитель»
В приложение вместо самого объекта помещается своего рода объект-«заместитель» («заглушка»). Когда программа обращается к объекту-«заместителю» загружается исходный объект.
По существу «Заместитель» можно рассматривать как частный случай «Отложенной инициализации».
На самом деле для того чтобы показать несколько видеороликов на сайте вовсе не обязательно загружать их на страницу все сразу. Это можно делать динамически при помощи JavaScript, например, по клику на вышеописанной «заглушке».
Рассмотрим данный приём более подробно на примере YouTube.
1й способ. Показ видео в одном и том же контейнере
Этот способ основан на паттерне «Отложенная инициализация».
Создадим две «заглушки». В атрибуте rel у каждой из них укажем идентификатор видео на YouTube.
<h4><span class="play" rel="идентификатор_видео_1">Видео 1</span></h4>
<h4><span class="play" rel="идентификатор_видео_2">Видео 2</span></h4>
Далее создадим контейнер, в котором будем показывать видео.
<div class="video">
<iframe width="640" height="390" src="//www.youtube.com/embed/идентификатор_видео_1" frameborder="0" allowfullscreen></iframe>
</div>
В нашем примере контейнер уже содержит код вставки видео. Его наличие необязательно. Данный код просто отображает видео, которое будет показываться по умолчанию при загрузке страницы.
По клику на «заглушке» мы будем удалять из контейнера имеющийся в нём код вставки видео (если он там есть), а на его место размещать новый со ссылкой уже на другое видео.
$('.play').click(function(){
// Получаем идентификатор видео из "заглушки"
var video_id=$(this).attr("rel");
// Удаляем старое видео
$('.video iframe').remove();
// Добавляем новое видео
$('.video').append('<iframe id="v'+video_id+'" width="640" height="390" src="//www.youtube.com/embed/'+video_id+'" frameborder="0" allowfullscreen></iframe>');
});
Таким образом видео будет загружаться только одно и только тогда когда посетитель страницы захочет его посмотреть. В результате объём трафика между браузером и видеохостингом существенно уменьшается и скорость загрузки страницы возрастает.
2й способ. Показ каждого видео в индивидуальном контейнере
Если показ видео в одном и том же контейнере не подходит (в том числе с точки зрения дизайна), можно создать отдельный контейнер для каждого видео. В этом случае при клике на «заглушку» будет изменяться содержимое соответствующего контейнера.
Ниже показа один из возможных вариантов реализации.
Создаём контейнеры для видеозаписей и помещаем в них «заглушки».
<div class="video2"><h4><span class="play2" rel="идентификатор_видео_1">Видео 1</span></h4></div>
<div class="video2"><h4><span class="play2" rel="идентификатор_видео_2">Видео 2</span></h4></div>
При клике на «заглушки» очищаем соответствующий контейнер и загружаем в него видео.
$('.play2').click(function(){
// Получаем идентификатор видео из "заглушки"
var video_id=$(this).attr("rel");
// Получаем контейнер, в котором расположена "заглушка"
var parent=$(this).parent();
// Очищаем контейнер, в котором расположена "заглушка"
parent.empty();
// Добавляем видео
parent.append('<iframe id="v'+video_id+'" width="640" height="390" src="//www.youtube.com/embed/'+video_id+'" frameborder="0" allowfullscreen></iframe>');
});
По своей сути этот способ представляет собой классическую реализацию паттерна «Заместитель», так как видео загружается не просто «по запросу», а вместо самой «заглушки». Более того при загрузке видео в индивидуальный контейнер нет необходимости загружать его повторно, если посетитель страницы вновь захочет его посмотреть. Что даёт дополнительную оптимизацию быстродействия по сравнению с первым способом.
Но, такой подход также не всегда приемлем в плане дизайна.
Поэтому, при выборе способа размещения видео на странице, как и подавляющем большинстве случаев, лучше всё-таки исходить в первую очередь из сути решаемой задачи.