Как добавить видео на сайт, чтобы не пострадала скорость загрузки страницы

Ускорение загрузки страниц с iframe-видео из YouTube

Очень часто ставится задача сделать максимально быстрой загрузку страниц на которой находится крупное количество видео с youtube, например, в качестве отзывов.
Даже одно видео встроенное через iframe в страницу очень сильно замедляет её загрузку и отпугивает Ваших потенциальных клиентов.

Было создано две пустые страницы.
На одной из них был просто вставлен iframe без параметра autoplay, дабы пользователю пришлось нажать на видео для его запуска.
На другой было вставлено это же видео, код с заглушкой был полностью скопирован отсюда, из этой статьи. Так же, для запуска видео пользователю нужно было нажать на видео.

Интернет стабильный и не дерганный. Страницы грузились без кэшей и всего остального.

Страница с чистым iframe грузилась в среднем 0.257 секунды.
Страница с «заглушенным» iframe грузилась в среднем 0.105 секунды.

Это быстрее чистого айфрейма даже более чем в два раза!
А представьте, что будет если таких айфреймов на странице будет десять?

Оптимизация выглядит странно, но работает. Необходимо повесить вместо видео заглушку-картинку, при нажатии на которую будет происходить встраивание iframe с параметром autoplay.
Адаптив делать не буду дабы не растягивать статью слишком сильно.

Первым делом нужно получить обложку видео для заглушки.
Берём ссылку для нужного видео и вытаскиваем идентификатор видео, например
https://www.youtube.com/watch?v=ID-VIDEO
Нам нужна только выделенная часть.
Ссылкой на обложку в максимальный размер будет:
https://img.youtube.com/vi/ID-VIDEO/maxresdefault.jpg

Так же нам нужно изображение кнопки плея. Как достать не подскажу, но вы можете воспользоваться этой:

И собираем всё в кучу. Так же создаём функцию которая будет вставлять в наш контейнер ютуб-айфрейм с параметром autoplay.

Выглядеть это будет как-то вот так:

Всё было сделано максимально просто дабы показать сам способ ускорения страницы за счёт отказа от айфреймов, написанный код рабочий, но очень далёк от идеального.

Как добавить видео на сайт, чтобы не пострадала скорость загрузки страницы

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Разрешите предложить вашему вниманию пост буквально в несколько абзацев. Проблема, которая тут решается, довольно для меня «больная», ибо уже много лет предпринимаю шаги по оптимизации скорости загрузки страниц сайта. Со временем проблема начинает переходить в стадию «навязчивой», но я пока держусь в рамках.

Очередной враг, обнаруженный мною на полях боев за миллисекунды загрузки страниц и число создаваемых при этом запросов — видео вставляемое на сайт с Ютуба, Фейсбука и других мест. Стало очевидно, что это враг. Если его со страницы убрать, то грузится все быстрее и шустрее.

С другой стороны, не стоит переходить грань разумного, ибо иногда видео вставленное на страницу серьезно повышает ее шанс на попадание в Топ (лучше поведенческие, да и вообще оно может оказаться в конце концов интереснее самой статьи). Поэтому от вставки видеороликов нельзя отказаться совсем, но желательно это делать с наименьшим ущербом для скорости работы сайта. Об этом речь и пойдет.

Варианты вставки видеоролика с Ютуба, Фейсбука и т.п.

Предлагаемые по умолчанию методы вставки видео на сайт (с помощью ифрейма или embed) создают много дополнительных запросов при загрузке страницы. А если роликов на одной странице будет еще и несколько, то вообще караул. Даже тестируемый мною CloudFlare проблемы не решал, а скорее усугублял (но это уже детали). Суть в том, что нужно было что-то делать.

Первое решение, которое пришло в голову — оставлять на странице лишь скрины, снятые с ранее вставленных роликов (с кнопками видеоплеера и запуска, чтобы казалось, что это действительно ролик, а не просто картинка). Ну, а уже на эту ширму (скрин с кнопкой запуска) можно повесить ссылку, чтобы в новом окне открывалась страница, где и будет возможность просмотреть этот ролик (можно даже его автовоспроизведение там включить, чтобы пользователю еще раз мышкой не щелкать).

Проблему сей метод решал, но попутно создавал посетителям дополнительные трудности, что не есть хорошо. Да и пользователь, уходя смотреть ролик на другую страницу, по сути не улучшал, а ухудшал поведенческие характеристики данной страницы (хотя, это спорный вопрос). Но главное, что это не удобно (проверял и смотрел статистику).

Второе решение вытекало из первого. Надо сделать все то же самое (размещать на странице только скрин ролика), но показывать видео уже не на другой странице, а на этой же самой и еще лучше в том же самом месте, чтобы вызывать иллюзии типа «все как обычно». Сделать это можно, на мой взгляд, только с помощью Джава-скрипта, что и было реализовано.

Выглядеть это будет примерно так (изначально в исходном коде вы найдете только изображение chto-takoe-bitkoin.jpg, а воспроизведение ролика активируется с помощью onclick, т.е. при клике по этому изображению):

Но у данного метода есть несколько недостатков:

  1. Возня со всем описанным ниже вместо того, чтобы просто скопировать предлагаемый на видеохостингах код
  2. В браузерах пользователей должен быть разрешен Джава-скрипт. В противном случае видео они не посмотрят 🙁

Вставка видео на сайт с помощью джава-скрипта

Если все это вас не останавливает, а желание сделать страницы сайта чутка быстрее перевешивает нежелание немного повозиться с кодом, то вперед. Для каждого вставляемого на сайт видео придется вручную проделать следующие манипуляции:

  1. Скопировать код вставки (с нужным размером видео) и разместить его на странице, типа этого:
  2. Снять скрин с ролика (использовать картинку, которую, например, плеер Ютуба подгружает себе по умолчанию, не получается, ибо на ней нет кнопки запуска — того самого треугольника посередине, который и позволяет отличить ролик от простого изображения). Получится примерно так (пока еще не кликабельно — просто картинка):

    Сегодня постараемся научиться устанавливать видео, чтобы не замедлять загрузку сайтов. Как известно, любой запрос на сервер отнимает драгоценные миллисекунды, а если сервак находится на другом конце света, то сами знаете, чем это чревато. Поэтому, нужно стараться минимизировать количество запросов в коде вашего сайта на сервер. При загрузке видео также идет дополнительный запрос. Не важно, видео с Ютуба, Фейсбук или другого видеохостинга, важно, что при загрузке странице будет проходить дополнительный запрос на чужой сервер. Это зло, от которого нужно избавляться. Сегодня мы этим и займемся. Удалять видос не в коем случае не нужно, так как он может повысить время нахождения пользователя на странице, а это плюс в копилку вашего интернет-проекта.

    Способы установки видео, чтобы скорость загрузки не хромала

    1. Делаем скриншот нужного видео. А именно, его анонса, так как привыкли видеть пользователи. Вместо кода самого видео ставим ссылку с этим скриншотом на другую страницу, где уже будет помещен код, который мы скопировали с Ютуб или Фейсбук. Тем самым мы сокращаем количество запросов при загрузке страницы. А пользователь видит такую же картинку, как и при обычном видео, только при нажатии на нее видео не запустится, а откроется в новом окне, а там опять нужно сделать клик, чтобы оно начало воспроизводится. С одной стороны не удобно для посетителей, но с другой – увеличиваем скорость загружаемого кода страницы
  3. Использование Java. В этом случае, мы оставляем скриншот, ссылку на видео, но сделаем так, чтобы пользователь мог его просмотреть не на другой странице, а на той же и в том же месте. Создается иллюзия работы стандартного кода YouTube (нажал и смотришь).

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

    Использование дополнительного Ява-скрипт кода. С которым нужно будет немного повозиться, вместо того, чтобы просто вставить скопированный код с видеохостингов. Об этом поговорим ниже

  • Пользователи могут отключать запуск скриптов у себя в браузерах. Это значит, что ваш код не будет работать
  • Поэтому, вы сами для себя должны решить, что для вас важно. Если важно стабильная работоспособность вашего сайта, то забейте на те потерянные миллисекунды при загрузке страницы и не читайте далее. Тем более, большое влияние этой скорости не доказано ни кем, только громкими заявлениями самого Google.

    Если вы скоростной маньяк и для вас важна каждая сотая секунды, тогда поговорим, какой код нужно использовать, чтобы ускорить загрузку видео на сайте.

    Ускоряем загрузку видосов при помощи Java скриптов

    Для ускорения загрузки страниц с видео контентом нужно будет изменить тот код, который предлагает видеосервисы. Эту работу можно разделить на несколько этапов:

    1. Подключаем Ява скрипт к своему сайту
    2. Копируем код для вставки на страницу, который предлагает Ютуб. Он имеет вот такой вид


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

    На этом этапе делаем сжатие изображения при помощи программы IrfanView. Это необходимо, чтобы удалить из картинки все мета данные, из-за которых pagespeed будет матюкаться на них

    Модифицируем код, представленный ниже. В него вставляем идентификатор своего видео (он отмечен на крине выше). В тег «img» добавляем путь к картинке. Вносим изменения, которые отмечены на скриншоте ниже

    ’);»>

    Но есть один нюанс. При нажатии на такую картинку видеоряд сразу не запустится, просто произойдет загрузка самого ролика. Чтобы пользователю повторно не пришлось нажимать на него (он может заподозрить подвох) нужно в код, представленный выше, вставить команду автозапуска «autoplay=0» , в то место, которое указано на скриншоте выше (подчеркнуто красной полосой).

    В результате мы получаем готовый ролик, который будет запускаться, как настоящее видео, а загружаться как обычная картинка:

    Вот таким образом мы смогли немного ускорить загрузку страницы с видео. Если эта информация была для вас полезно, то ставьте лайк, делитесь с друзьями.

    Почему нельзя вставлять видео YouTube через iframe или как ускорить загрузку страниц сайта

    При создании сайта под заказ или просто для своего проекта возникает проблема со скоростью загрузки видео. Часто Google PageSpeed Insights на данную проблему не реагирует, но при загрузке в браузере скорость загрузки страницы заметно падает. Я сейчас говорю именно о видео. О тех видео, которые мы берем с сервиса Youtube. В этой статье я рассмотрю способ, который действительно ускорит загрузку страницы, на которой находится много вставок видео с Youtube.

    Тему скорости загрузки страницы я раньше уже затрагивал в следующих статьях и видео:

    Чтобы сравнить скорость загрузки страницы, перейдите по следующим кнопкам:

    Обычная вставкаЗагрузка при клике

    Как это использовать и результаты экспериментов

    Вначале я хотел просто рассказать о способе, который позволяет ускорить загрузку видео, которые веб-мастера берут с сервиса YouTube. Потому что, изначально сервис YouTube предлагает использовать для вставки видео именно iframe. Но, как в любой ситуации, всегда можно найти еще лучшее решение.

    Затем я решил просто сравнить количество HTTP запросов на странице, где нет вставок iframe, со страницей, где я для примера вставил несколько видеороликов. Я понимал, что этот способ действительно уменьшает время загрузки страницы, но был приятно удивлен, когда увидел, что загрузка уменьшается в десятки раз.

    Об этом эксперименте с видеороликами вы можете прочитать ниже. Я часто пользуюсь своими же статьями, которые написал довольно давно, поэтому для удобства я приведу скрипты, стили и разметку, которая необходима для вставки видео этим способом. Чтобы когда вы зайдете на данную статью второй раз (из закладок, например), могли сразу воспользоваться необходимыми материалами.

    Блок «СКОПИРОВАЛ-ВСТАВИЛ»

    Автор этого кода Alexis Ulrich (ссылка на оригинал в конце статьи). А сейчас, собственно, сам код с небольшими пояснениями.

    1 этап. HTML разметка

    ВАЖНО: в атрибут id необходимо вставить идентификатор вашего видео на YouTube. Если не знаете, где оно находится то смотрите видео инструкцию к этой статье ниже.

    2 этап. CSS стили

    Скачать изображение кнопки «Play» можно здесь — скачать кнопку «Play» .

    3 этап. Javascript

    [ВИДЕО] Как использовать данный способ ускорения загрузки страниц на своих проектах?

    Возможно, для кого-то не до конца ясно, куда необходимо вставить тот или иной участок кода. В небольшом видео я показал, как пользоваться материалами данной статьи на практике.

    Эксперимент со скоростью загрузки страницы на практике

    Ниже я описал 2 небольших эксперимента со скоростью загрузки страницы в зависимости от способа загрузки видео YouTube. Обратите внимание, насколько сильно отличаются цифры. Все тесты я проводил в браузере Chrome (версия 52.0.2743.116 m).

    Для тестов я создал две страницы:

    • Страница #1 — здесь загрузка реализована тем способом, о котором рассказано в статье. То есть видео загружается только при клике.
    • Страница #2 — на этой странице я вставил видео обычным способом — через тег iFrame.

    На протяжении двух тестов на страницах будут лишь добавляться видео.

    ТЕСТ #1 — Количество видео на странице: 1

    Подробное изображение со всеми запросами можно посмотреть по ссылкам:

    Как видно из скриншота, на первой странице время загрузки меньше половины секунды. Оно и понятно, ведь на второй странице вдвое больше запросов. Даже на странице с одним видео заметна существенная разница. Если проанализировать запросы, то можно заметить, что на первой странице лишь 7 запросов, в то время как на второй их 15.

    Но что же произойдет, если будет не одно видео, а несколько? Смотрите результаты второго эксперимента далее…

    ТЕСТ #2 — Количество видео на странице: 5

    Количество запросов для каждой из страниц:

    Здесь разница колоссальная. Как во времени загрузки, так и по количеству запросов.

    Я думаю становится понятно, что чем большее количество видео используется на странице, тем дольше будет осуществляться загрузка страницы.

    Также обязательно изучите плагин lazyYT.js. Он отлично подходит для решения этой задачи. Демо можно посмотреть здесь.

    Скорость загрузки страниц — это постоянно больной вопрос. Многие пишут о том, что этот вопрос остро стоит именно в наше время. Но изучая литературу по созданию сайтов, которая написана в начале 2000-х, я сделал для себя вывод: даже в то время, когда страница загружалась примерно 10 секунд, о скорости загрузки беспокоились точно также, а может даже сильнее. Причина — приходилось отказываться от графической информации и других медиа на странице.

    Способ вставки видео с YouTube, который мы рассмотрели в этой статье, действительно позволяет ускорить загрузку страниц сайта. Это видно даже на глаз. Поэтому попробуйте один раз применить это на своем сайте, и вы поймете все прелести данного способа.

    К сожалению, прочитав статью, многие веб-мастера разочаруются. Возможно, они ждали именно плагина для какой-либо CMS (WordPress, Joomla и т.д). Ведь намного проще установить один плагин и наслаждаться результатом. Но увы, действительно оптимизированные вещи делаются зачастую вручную. Поэтому данный способ отлично подойдет для лендингов. Но кто запрещает на основе этого JS кода написать свой плагин для WordPress, например? 😉

    Оптимизируем видео из YouTube и Vimeo на страницах сайта

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

    В заметке я разберу, каким образом встраиваемое видео замедляет загрузку сайта и как с этим можно бороться. А также будут разобраны плагины к CMS, которые могут помочь в решение этой задачи.

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

    Для того чтобы встроить видео из YouTube на страницу своего сайта достаточно всего лишь загрузить видео на YouTube и выбрать «Поделиться».

    Рис. 1. Как вставить видео на сайт.

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

    Рис. 2. Встраивание видео с YouTube.

    В итоге вы получаете небольшой кусочек кода, который вам нужно вставить на вашу страницу:

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

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

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

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

    Рис. 3. Страница видео-отзывов на PhillyDentistry.com

    Например, для страницы с видео-отзывами на сайте PhillDentistry.com были заметны существенные проблемы с загрузкой по мере того, как количество видео-отзывов росло.

    Отображение статического «баннера» на месте видео с YouTube

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

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

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

    Рис. 4. Результаты Webpagetest после оптимизации страницы.

    Рис. 5. Оптимизация страницы с видео-отзывами PhillyDentistry.com

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

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

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

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

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

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

    Готовые решения для CMS

    Выше был рассмотрен возможный вариант решения проблемы, если владелец сайта понимает Javascript в достаточной степени, чтобы применить это решение у себя на сайте.

    Это может оказаться не так просто на сайтах с различными популярными CMS, но, как правило, для них существуют отдельные плагины, которые также помогают ускорить страницы с большим количеством видео.

    Ниже мы рассмотрим 4 плагина для WordPress, которые позволяют загружать видео из YouTube по принципу lazy-load, то есть, не блокируя отображение остальных элементов страницы.

    Плагин Lazy Load for Videos

    Этот плагин ускоряет страницы, заменяя встроенное видео на кликабельную картинку с превью этого видео.

    Плагин a3 Lazy Load

    Плагин позволяет загружать в режиме lazy-load изображения и видео на сайте. Можно также исключить изображения и видео из действия плагина по их имени класса. Плагин совместим с WooCommerce.

    Плагин Lazy Load XT

    Этот плагин позволяет загружать в режиме lazy-load изображения, видео из YouTube или Vimeo и содержимое iframe-ов. Легкий и быстрый плагин.

    Плагин WP YouTube Lyte

    Этот плагин вместо полноценных видео внедряет на сайт «легкие» элементы, которые запускают проигрыватель видео, если кликнуть по ним.

    В заключение отметим еще раз, что стандартный способ внедрения видео из YouTubе через iframe негативно сказывается на скорости загрузки страницы. Проблема возрастает многократно, если на странице представлены несколько видео.

    Для решения этой проблемы можно воспользоваться приведенным решением на Javascript. Если вы используете какую-либо популярную CMS, стоит поискать соответствующие плагины для нее, аналогичные 4-м плагинам для WordPress, которые упомянуты выше.

    Website-create.ru

    Если Вы столкнулись с вопросом добавления видео ролика на страницы Вашего сайта или блога, но не знаете, как это сделать, то этот урок для Вас! В данном уроке мы рассмотрим 3 альтернативных способа добавления видео на сайт, и Вы сможете выбрать тот, который понравится Вам больше.

    Интернет развивается с каждым днем все больше и больше. Сегодня пользователи хотят не только читать тексты, но также и лицезреть различные графические элементы, разные интерактивные примочки и еще смотреть видео прямо с веб страниц. Во многих случаях это создает дополнительное удобство для пользователя (например, когда он может посмотреть видео-инструкцию) или просто делает его пребывание на веб ресурсе более увлекательным.

    Так или иначе, будь то полезное видео с уроком или инструкцией, демонстрационное видео какого-либо продукта или развлекательное видео, призванное скрасить досуг пользователя, рано или поздно появляется необходимость внедрения этого видео в веб страницу.

    Есть несколько способов сделать это. Сегодня мы рассмотрим 3 разных способа, которые помогут Вам справиться с этой задачей. Какой из них выбрать – решать Вам. Итак, поехали…

    Как вставить видео на сайт

    Для того, чтобы тестировать все наши примеры, я создам html-файл, а также подключу к нему кое-какие стили. Ниже приведен код этого файла и код таблицы стилей, которая подключена к html-документу. Также все эти файлы Вы можете найти в исходниках к уроку. Объяснять этот код я здесь не буду, так как он достаточно простой, и я думаю, что Вы и сами в нем прекрасно разберетесь, однако, если что-то будет непонятно, то Вы всегда можете написать в комментариях свой вопрос, и я на него обязательно отвечу.

    Итак, код html-файла:

    Это просто html5 файл, который содержит в себе несколько заголовков. Далее под каждым из них мы будет размещать соответствующий код.

    Я также прописала некоторые стили для этой странички. Они хранятся в файле «style.css», который лежит в том же каталоге, что и html-файл. Содержимое файла «style.css» выглядит следующим образом:

    Если открыть наш html-файл в браузере, то сейчас он будет выглядеть так:

    Подготовка закончена, давайте перейдем к самой вставке видео на веб страницу.

    Первый способ, который мы рассмотрим – это вставка видео при помощи сервиса Youtube.

    1. Первое что нам нужно – это иметь какой-то видео-ролик, который мы хотим вставить. Допустим, что он у нас есть и хранится на нашем локальном компьютере.

    Теперь переходим на сайт www.youtube.com. Здесь нам нужно нажать на кнопку «Войти», расположенную в верхнем правом углу. После этого нужно произвести вход при помощи Вашего аккаунта Google. Если вдруг у Вас его еще нет, то сначала нужно его завести.

    2. После того, как Вы вошли в сервис под своим аккаунтом, нажмите на кнопку «Добавить видео». Сервис предложит Вам выбрать файл для загрузки, и Вы можете выбрать нужный файл, который хранится у Вас на компьютере.

    После того, как Вы выбрали нужный файл, он начнет загружаться. Нужно подождать немного, пока он полностью не загрузится.

    После того, как видео загрузилось полностью, Вы можете перейти по его ссылке (ее вы можете увидеть вверху, сразу после сообщения о том, что загрузка завершена).

    Когда Вы перейдете по данной ссылке, то увидите Ваше видео, размещённое на сервисе Youtube.

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

    Теперь Вы можете увидеть html-код, который понадобится нам для вставки. Здесь также можно задать и некоторые другие параметры, такие как: размер видео, показывать ли похожие видео после окончания просмотра и режим конфиденциальности.

    Когда Вы настроите все параметры, то можете скопировать код и вставить его в Ваш html-файл. Я вставлю код в файл под соответствующим заголовком следующим образом:

    И теперь, если мы посмотрим работу нашего html-файла в браузере, то увидим, что видео вставилось и его можно просмотреть (посмотреть код в действии Вы можете нажав на иконку «Демо» в начале статьи).

    Здесь, я думаю, все понятно. Давайте перейдем к следующему способу.

    Вставляем видео при помощи скрипта плеера.

    Можно вставить видео и не загружая его на какой-либо видеосервис. Если по какой-то причине Вы не хотите загружать видео на сервис, то можно воспользоваться скриптом плеера.

    Итак, у Вас должен быть видеоролик, который Вы будете загружать. Допустим, что он хранится в какой-то папке на Вашем сайте. Я сохраню видеофайл в папке с именем «video».

    Теперь нам нужен сам плеер. На данный момент существует множество бесплатных плееров, с помощью которых можно вставить видео на сайт. Давайте воспользуемся плеером Flowplayer. Это бесплатный видеоплеер для веб, который разработан специально для владельцев сайтов.

    1. Скачайте файлы плеера себе на компьютер нажав вот на эту ссылку: FlowPlayer

    2. После того, как Вы скачали файлы плеера на свой компьютер, нужно их разархивировать в какую-либо папку на Вашем сайте. Я создала папку «flowplay» и разархивировала файлы туда.

    3. Теперь перейдем в html-файл и займемся кодом.
    Первое, что нам нужно сделать это подключить javascript-файл плеера к нашему html-файлу. Для этого внутри тега head, сразу после подключения таблицы стилей пропишите следующий код:

    Если Вы размещаете файл в другой папке, то обратите внимание, чтобы путь к файлу был прописан правильно.

    4. Теперь перейдем в тело нашего файла и разместим сам плеер с проигрываемым файлом. Я размещу его прямо под соответствующим заголовком, предварительно поместив в тег div, который выровняю по центру.

    Здесь Вам нужно будет проверить пути до файлов и прописать свои. Делая это будьте внимательны.

    Также здесь выставлены настройки, которые не дают видео запускаться автоматически, однако разрешают его загрузку. Если Вы хотите, чтобы видео запускалось автоматически, то после пути к файлу «flowplayer-3.2.2.swf» следует убрать запятую, закрыть круглую скобку и поставить «;» (без кавычек), а все остальное, что находится после этого и до закрывающего тега «/script» удалить.

    Таким образом, если мы проверим страницу в браузере, то увидим, что теперь у нас 2 видео: одно загружается с сервиса youtube, а другое хранится у нас на сайте и загружается при помощи плеера.

    Имейте в виду, что видео, загружаемое плеером должно иметь формат .mp4 или .flv.

    Давайте опробуем еще один способ и попробуем загрузить тот же самый ролик, который хранится у нас на сервере, но только при помощи новых возможностей HTML5.

    1. Найдите третий заголовок и прямо под ним пропишите следующий код:

    Если вы откроете страницу в браузере, то увидите, что Ваше видео добавилось под третьим заголовком. Вот так просто! Всего одной строчкой.

    Не забудьте проверить путь к видеофайлу, чтобы он соответствовал тому, где Вы его расположили.

    Параметр «controls» добавляет панель управления для видео.

    Если Вы хотите, чтобы Ваше видео воспроизводилось сразу после загрузки страницы, то нужно добавить параметр «autoplay».

    Этот способ отвечает новым стандартам html5 и, я думаю, заинтересует разработчиков, желающих уже сегодня внедрять стандарты будущего.

    Однако, здесь есть свои «подводные камни», например, разная поддержка браузерами разных форматов мультимедиа. Данный пример будет замечательно работать во всех новых браузерах, но не в браузере Опера. Чтобы этот код заработал в Опере мы должны конвертировать видео файл в формат «Ogg Theora» и немного поменять код, чтобы дать браузеру альтернативный выбор.

    Конвертировать файл можно с помощью сервиса online-convert.com/ . После конвертации сохраните полученный файл в папку «video», а код для вставки видео поменяйте на следующий:

    Теперь пример будет работать и в браузере Опера.

    Однако, есть еще одна загвоздка, касающаяся старых браузеров, которые не понимают html5-теги. К сожалению, переход к новым стандартам также требует и умения находить обходные решения.

    Если для браузера незнаком какой-то тег, то он его просто игнорирует, но при этом не игнорирует содержимое внутри неизвестного ему элемента. Следовательно, мы можем добавить обходное решение прямо в наш тег для вставки видео. Код при этом может выглядеть вот так:

    С таким кодом новые версии браузеров успешно обработают наш элемент «video», а если вдруг пользователь откроет страницу при помощи старого браузера, то незнакомый тег «video» будет проигнорирован, но тег «iframe» будет успешно обработан и видео подгрузится с Youtube.

    Пожалуй, на этом буду заканчивать. Напоминаю, что все исходные материалы Вы можете скачать, щелкнув по иконке «Исходники» в начале статьи, а посмотреть работу всех трех примеров можно щелкнув по иконке «Демо» там же.

    Оставляйте свои комментарии и делитесь этой статьей с друзьями при помощи кнопок социальных сетей. Буду Вам очень признательна.

    Также подписывайтесь на обновления блога. Впереди много всего интересного и полезного по теме создания веб сайтов.

    Желаю Вам хорошего настроения и успехов в Вашей работе!

    Ускорение сайтов: оптимизация подключения видео с YouTube

    к.э.н. Лавлинский Н. Е., технический директор ООО «Метод Лаб»

    Самым популярным и востребованным видом контента сегодня является видео. Подавляющее большинство видеороликов представлены в виде включаемых элементов какого-либо видеохостинга. Лидером среди видеохостингов является YouTube, который предоставляет свой стандартный виджет плеера в виде iframe для размещения на страницах сайта. Выбор этого метода размещения обычно оправдан и оптимален, так как позволяет достичь корректной работы видеоплеера на любых устройствах и скоростях интернет-каналов.

    Но, как часто бывает, достоинства решения не приходят одни. За удобство и отсутствием проблем приходится платить загрузкой большого количества кода и дополнительными подключениями браузера.

    Ускорение виджетов YouTube

    Сначала разберемся с сутью проблемы: при загрузке страницы мы, помимо необходимых для самой страницы элементов, грузим большое количество JS-кода YouTube (460 Кб в сжатом виде, 1,5 Мб в распакованном). Даже если этот код грузится в асинхронном режиме, мы получаем торможение при отрисовке страницы из-за загрузки CPU и заполненности канала при загрузке кода. Если учитывать мобильные устройства, такое количество JS-кода может серьезно затормозить сайт.

    При этом видео не требуется проигрывать сразу же при посещении страницы. Как правило, перед этим видео есть сопроводительный текст, другие элементы, требующие внимания. Получается, что загрузку тяжеловесного плеера можно отложить до момента начала просмотра этого видео. Логично привязать момент загрузки плеера к клику по картинке-заставке для видеоролика. Задержка загрузки плеера не будет критичной для пользователя, потому что он готов к задержке из-за буферизации самого видео.

    Реализация

    Для реализации отложенной загрузки можно использовать YouTube JS API или jQuery-плагин отложенной загрузки lazyYT.

    Использование YouTube JS API позволяет полностью контролировать поведение видео-плеера на странице, но требует довольно сложных манипуляций для использования на сайте.

    Второй вариант с lazyYT намного проще в реализации. Для использования нужно скачать и подключить плагин на странице (js- и css-код) с видео (также требуется jQuery).

    Далее, вместо получаемого кода iframe вставляем такой элемент:

    Параметры, которые требуются для создания плеера передаются в виде атрибутов тега div вида «data-». Например, data-youtube-id – это идентификатор ролика в YouTube, data-parameters – это параметры плеера.

    Этот слой получит картинку-миниатюру для видео с YouTube и покажет в виде фона блока. По клику на картинку загрузится обычный плеер и начнётся воспроизведение видео.

    Использование такого несложного приёма позволит значительно повысить ощущение скорости сайта у пользователей. Особенно актуально при включении большого количества роликов на одной странице.

    К недостаткам указанного решения можно отнести нестабильное поведение YouTube по отношению к миниатюрам видео (заставкам). Плагин, в зависимости от размеров слоя, пытается взять качественную версию картинки, которая может отсутствовать на YouTube. В этом случае на месте заставки мы увидим неказистую заглушку, растянутую до размеров блока. Решить эту проблему можно небольшой модификацией плагина и передавать ему свой адрес картинки (и убрать таким образом необходимость соединения с YouTube до начала воспроизведения).

    За профессиональным ускорением сайтов обращайтесь к нам.

    Как добавить видео на сайт, чтобы не пострадала скорость загрузки страницы

    На примере WordPress:
    1. страница без ролика:

    2. страница с роликом:

    Нашел несколько вариантов оптимизации встраивания ютуб. Интересует мнение SEO-гуру какой вариант будет предпочтительней с точки зрения SEO.

    Вариант 1.
    Вставка видео обеспечивается кодом

    где ХХХХ — идентификатор видео на ютубе.

    И на страницу надо добавить скрипт

    Ну и надо еще добавить некоторые стили CSS (не буду уже тут приводить). Таким образом фактически видео загружается только при клике на PLAY, что не влияет на скорость отрисовки страницы и создает лишь один дополнительный запрос. Вот результат:

    Вариант 2.
    Плагин для WordPress https://ru.wordpress.org/plugins/wp-youtube-lyte/
    Фактически он делает то же, что и предыдущий вариант, но и добавляет к видео ютуб микроразметку v > Результаты чуть хуже чем в предыдущем варианте, но зато получаем и разметку videoObject microdata. Результат:

    Учитывая всё это, сформулирую вопросы:

    1. Какой вариант вы считаете более предпочтительным?

    2. Важна ли для SEO микроразметка videoObject microdata? Автор плагина утверждает, что она способствует тому, что в выдаче Гугла возле ссылки на страницу в поиске будет отображаться скриншот видео, что повысит CTR страницы в поиске.
    Но насколько я понимаю, такая микроразметка при исходном варианте вставке видео через стандартный код ютуб (iframe) отсутствует, соответственно надо ли оно?

    3. Поскольку загрузка и проигрывание видео инициируются лишь при клике на нем, а у мобильных браузеров нет функции автовоспроизведения, то мобильным пользователям понадобится дважды кликнуть на видос, чтобы он запустился. Не думаю что это большая проблема (тем более перед видео это можно указать), но как кто думает на этот счет?

    Оптимизация видео из YouTube и Vimeo

    В связи с популярность видео-роликов в интернете, многие сервисы (например, YouTube и Vimeo) дают пользователям возможность размещать видео на своих сайтах. Это очень удобно, но существует одна серьезная проблема: такое размещение часто становится причиной, увеличивающей время загрузки страницы.

    Давайте разберем, почему встраиваемое видео вызывает замедление загрузки сайта, и рассмотрим варианты борьбы с этой проблемой, а также плагины к CMS, помогающие решить эту задачу.

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

    Процесс размещения видео из YouTube на странице сайта очень прост: нужно просто открыть видео на YouTube и нажать «Поделиться».

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

    В результате Вы получите кусочек кода, который необходимо вставить на страницу Вашего сайта:

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

    Встраивание нескольких видео

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

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

    Статический «баннер» на месте видео с YouTube

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

    Делается это с помощью следующего Javascript-кода:

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

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

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

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

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

    После вставляем в шаблон страницы код, который находит все внедренные тэги, заменяя их на миниатюры видео.

    Браузеры Safari и Chrome на устройствах iOS и Android блокируют автоматический запуск внедренного видео в целях предотвращения скачивания больших объемов информации по мобильному Интернету. Поэтому данные браузеры проигрывают HTML5 видео только по запросу пользователя.

    Готовые решения для CMS

    Описанный вариант решения проблемы подходит, если владелец сайта достаточно знает Javascript, чтобы использовать это решение.

    Однако изложенный выше алгоритм действий не так легко применить на сайтах с различными популярными CMS, для них существуют иные плагины, способствующие ускорению работы страницы с большим количеством внедренного видео.

    Рассмотрим 4 плагина для WordPress, позволяющие загружать видео из YouTube по принципу lazy-load, а именно, не блокируя отображение других составляющих страницы.

    Плагин Lazy Load for Videos

    Данный плагин производит замену встроенного видео на кликабельную картинку, содержащую превью видео, тем самым ускоряя работу страницы.

    Плагин a3 Lazy Load

    Данный плагин совместим с WooCommerce и дает возможность загрузки изображений/видео на сайте в режиме lazy-load, а также позволяет исключать изображения/видео из действия плагина по имени класса.

    Плагин Lazy Load XT

    Быстрый легкий плагин, позволяющий загрузку изображений и видео (а также содержимого iframe-ов) из YouTube или Vimeo в режиме lazy-load.

    Плагин WP YouTube Lyte

    Плагин, внедряющий на сайт «легкие» элементы вместо полноценных видео. Речь идет об элементах, запускающих проигрыватель видео при клике по ним.

    Очевидно, что стандартный путь внедрения на сайт YouTubе-видео с использованием iframe значительно замедляет скорость загрузки страницы, а при размещении нескольких видео влияние данной проблемы возрастает в разы.

    Решение этой задачи лежит в использовании предложенного Javascript-кода либо подходящих плагинов для CMS, аналогичных приведенным 4-м плагинам для WordPress.

    Професиональный верстальщик — фрилансер

    Как сделать отложенную загрузку видео?

    Зачем делать отложенную загрузку видео?

    Когда вы вставляете видео с Yputube, Vimeo, Facebook и других видеохостингов на свои странички – вы замедляете скорость её загрузки и отображения.

    Поэтому каждое встроенное видео должно быть с отложенной загркузкой – подгружаться только после того, как вся страница загрузилась и отобразиласт пользователю.

    Когда вы делаете отложенную загрузку видеофайлов вы даёте возможность браузеру загрузить более необходимые для отрисовки страницы файлы, увеличиваете скорость сайта в целом. Проблема не в самом видео, а больше замедляете загрузку блокирующий отрисовку javascript, вы можете увидеть это например в GMetrix или Chrome DevToools

    Как добавить отложенную загрузку видео

    Для этого нам понадобится небольшой и очень простой javascript. Я покажу вам метод, который я использую чаще всего. Для начала разберем html:

    Это код видео из ютуба с двумя небольшими изменениями
    Первое – убрана ссылка на видео в атрибудет src=””
    второе – я добавил ссылку на видео в атрибут data-src
    data-src=”//www.youtube.com/embed/OMOVFvcNfvE”

    Ну а теперь javascript:

    Как использовать отложенную загрузку

    1. Возьмите код дял вставки любого видео, которое вам нравится
    2. Измените немного код как указано выше
    3. Добавьте скрипт на вашу страничку и вставьте видео

    Эта штука будет работать для большинства сайтов и не нужны никакие специальные библиотеки

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

    Быстрый заказ

    Я фронт-енд разработчик / верстальщик / программист с небольшим уклоном в сателлитостроение / поисковую оптимизацию. Получаю удовольствие от создания чистых, функциональных и оптиммизированных сайтов. Использую последние технические решения HTML5, CSS3, javascript / jQuery. Прекрасно ориентируюсь в WordPress

    Текущий статус: Частично свободен к работе

    Ссылка на основную публикацию