Как вставить видео на сайт так, чтобы при загрузке страницы пользователю не приходилось ждать по 2-3 минуты, чтобы оно загрузилось. видео хочется вставить на задний фон в формате 1080p-720p. Может как-то сжать его, или сделать по кадровую загрузку. Пример сайта, где видео загружается почти сразу, но качество не очень. http://uclubusinesssociety.com/
Отслеживать
Antonio112009
задан 11 дек 2017 в 4:02
Antonio112009 Antonio112009
2,631 1 1 золотой знак 18 18 серебряных знаков 41 41 бронзовый знак
Если видео должно сразу проигрываться при заходе на страницу, то никак — только сжимать и надеяться, что у пользователя быстрый интернет. ffmpeg Вам в помощь, для экспериментов со сжатием.
11 дек 2017 в 5:29
11 дек 2017 в 5:30
Не всегда, видео с Youtube не будут сами запускаться на мобильных устройствах.
11 дек 2017 в 5:31
11 дек 2017 в 5:33
Как я и сказал в ответе. Размер видео важен, но он на втором месте. Даже если видео весит 10 мегабайт (что крайне маловероятно при вашем качестве) если оно будет грузиться с сервера в Лос Анджелесе без CDN это займет пару минут. Вне зависимости от вашего интернет канала.
Снимал это видео 10 лет
11 дек 2017 в 5:36
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Если вы желаете, чтобы видео загружалось одновременно с загрузкой текущей веб-страницы, то вы можете применить мета предварительной загрузки preload, например:
Если же вы желаете, чтобы ваше видео загружалось при открытии/загрузке какой-то другой веб-страницы (не текущей), например на которую указывает навигация главной веб-страницы веб-сайта, то на текущей веб-странице вы можете применить следующие мета — спецификация W3:
preconnect. Этот мета указывают браузеру ссылки, которые могут быть использованы для извлечения указанного ресурса, например:
prefetch. Этот мета указывают браузеру ссылки, которые браузер пользователя должен извлечь для выдачи более быстрого ответа после запроса ресурса, например:
prerender. Этот мета указывают браузеру ссылки, которые браузер пользователя должен получить и выполнить для выдачи более быстрого ответа после запроса ресурса, например:
Этот список дан в порядке приоритета возможного требования видео ресурса. Таким образом вам надо самостоятельно решить насколько велика вероятность того, что пользователь может использовать ваше видео. Чем ниже приоритетный элемент вы указываете, тем меньше требуется браузеру времени для предварительного соединения с вашим видео. Также для указания возможности использования видео, вы можете использовать подсказку-атрибут pr (смотрите документацию W3).
Источник: ru.stackoverflow.com
Почему нельзя вставлять видео YouTube через iframe или как ускорить загрузку страниц сайта
35% аудитории рунета не используют компьютер для интернета
Что делать если айфон начал глючить
Более подробно про это исследование вы можете почитать на habr.com.
Понимаете сейчас, как важно для пользователей сделать быструю загрузку страниц. Мобильный интернет, какой бы он быстрый не был, сейчас еще не на таком уровне, как на компьютерах.
Сравнение скорости загрузки
Чтобы сравнить скорость загрузки страницы, перейдите по следующим кнопкам:
Обычная вставкаЗагрузка при клике
Как это использовать и результаты экспериментов
Вначале я хотел просто рассказать о способе, который позволяет ускорить загрузку видео, которые веб-мастера берут с сервиса YouTube. Потому что, изначально сервис YouTube предлагает использовать для вставки видео именно iframe. Но, как в любой ситуации, всегда можно найти еще лучшее решение.
Затем я решил просто сравнить количество HTTP запросов на странице, где нет вставок iframe, со страницей, где я для примера вставил несколько видеороликов. Я понимал, что этот способ действительно уменьшает время загрузки страницы, но был приятно удивлен, когда увидел, что загрузка уменьшается в десятки раз.
Об этом эксперименте с видеороликами вы можете прочитать ниже. Я часто пользуюсь своими же статьями, которые написал довольно давно, поэтому для удобства я приведу скрипты, стили и разметку, которая необходима для вставки видео этим способом. Чтобы когда вы зайдете на данную статью второй раз (из закладок, например), могли сразу воспользоваться необходимыми материалами.
Блок «СКОПИРОВАЛ-ВСТАВИЛ»
Автор этого кода Alexis Ulrich (ссылка на оригинал в конце статьи). А сейчас, собственно, сам код с небольшими пояснениями.
1 этап. HTML разметка
ВАЖНО: в атрибут id необходимо вставить идентификатор вашего видео на YouTube. Если не знаете, где оно находится то смотрите видео инструкцию к этой статье ниже.
2 этап. CSS стили
Скачать изображение кнопки «Play» можно здесь — скачать кнопку «Play» .
.youtube < background-position: center; background-repeat: no-repeat; position: relative; display: inline-block; overflow: hidden; transition: all 200ms ease-out; cursor: pointer; >.youtube .play < background: url(‘../img/youtube-play-btn.png’) no-repeat; /*ВАЖНО: здесь укажите адрес до изображения*/ background-position: 0 -50px; -webkit-background-size: 100% auto; background-size: 100% auto; position: absolute; height: 50px; width: 69px; transition: none; top:0; left:0; right:0; bottom:0; margin:auto; >.youtube:hover .play
3 этап. Javascript
JAVASCRIPT КОД
‘use strict’; function r(f) r(function() < if (!document.getElementsByClassName) < // Поддержка IE8 var getElementsByClassName = function(node, classname) < var a = []; var re = new RegExp(‘(^| )’+classname+'( |$)’); var els = node.getElementsByTagName(«*»); for(var i=0,j=els.length; i < j; i++) if(re.test(els[i].className))a.push(els[i]); return a; >var videos = getElementsByClassName(document.body,»youtube»); > else < var videos = document.getElementsByClassName(«youtube»); >var nb_videos = videos.length; for (var i=0; i < nb_videos; i++) < // Находим постер для видео, зная ID нашего видео videos[i].style.backgroundImage = ‘url(http://i.ytimg.com/vi/’ + videos[i].id + ‘/sddefault.jpg)’; // Размещаем над постером кнопку Play, чтобы создать эффект плеера var play = document.createElement(«div»); play.setAttribute(«class»,»play»); videos[i].appendChild(play); videos[i].onclick = function() < // Создаем iFrame и сразу начинаем проигрывать видео, т.е. атрибут autoplay у видео в значении 1 var iframe = document.createElement(«iframe»); var iframe_url = «https://www.youtube.com/embed/» + this.id + «?autoplay=1; if (this.getAttribute(«data-params»)) iframe_url+=’data-params»); iframe.setAttribute(«src»,iframe_url); iframe.setAttribute(«frameborder»,’0′); // Высота и ширина iFrame будет как у элемента-родителя iframe.style.width = this.style.width; iframe.style.height = this.style.height; // Заменяем начальное изображение (постер) на iFrame this.parentNode.replaceChild(iframe, this); >> >);
Позиции сайта не растут в Яндекс и Google?
Закажите полный разбор сайта по SEO + консультацию
Сделайте аудит своего сайта самостоятельно с помощью сервиса
[ВИДЕО] Как использовать данный способ ускорения загрузки страниц на своих проектах?
Возможно, для кого-то не до конца ясно, куда необходимо вставить тот или иной участок кода. В небольшом видео я показал, как пользоваться материалами данной статьи на практике.
Эксперимент со скоростью загрузки страницы на практике
Ниже я описал 2 небольших эксперимента со скоростью загрузки страницы в зависимости от способа загрузки видео YouTube. Обратите внимание, насколько сильно отличаются цифры. Все тесты я проводил в браузере Chrome (версия 52.0.2743.116 m).
Для тестов я создал две страницы:
- Страница #1 — здесь загрузка реализована тем способом, о котором рассказано в статье. То есть видео загружается только при клике.
- Страница #2 — на этой странице я вставил видео обычным способом — через тег iFrame.
На протяжении двух тестов на страницах будут лишь добавляться видео.
ТЕСТ #1 — Количество видео на странице: 1
Подробное изображение со всеми запросами можно посмотреть по ссылкам:
- Скриншот запросов страницы #1
- Скриншот запросов страницы #2
Как видно из скриншота, на первой странице время загрузки меньше половины секунды. Оно и понятно, ведь на второй странице вдвое больше запросов. Даже на странице с одним видео заметна существенная разница. Если проанализировать запросы, то можно заметить, что на первой странице лишь 7 запросов, в то время как на второй их 15.
Но что же произойдет, если будет не одно видео, а несколько? Смотрите результаты второго эксперимента далее.
ТЕСТ #2 — Количество видео на странице: 5
Количество запросов для каждой из страниц:
- Скриншот запросов страницы #1
- Скриншот запросов страницы #2
Здесь разница колоссальная. Как во времени загрузки, так и по количеству запросов.
Я думаю становится понятно, что чем большее количество видео используется на странице, тем дольше будет осуществляться загрузка страницы.
Технические ошибки не дают расти в SEO?
Закажите полный разбор сайта по SEO + консультацию
Сделайте аудит своего сайта самостоятельно с помощью сервиса
Вывод
Также обязательно изучите плагин lazyYT.js. Он отлично подходит для решения этой задачи. Демо можно посмотреть здесь.
Скорость загрузки страниц — это постоянно больной вопрос. Многие пишут о том, что этот вопрос остро стоит именно в наше время. Но изучая литературу по созданию сайтов, которая написана в начале 2000-х, я сделал для себя вывод: даже в то время, когда страница загружалась примерно 10 секунд, о скорости загрузки беспокоились точно также, а может даже сильнее. Причина — приходилось отказываться от графической информации и других медиа на странице.
Способ вставки видео с YouTube, который мы рассмотрели в этой статье, действительно позволяет ускорить загрузку страниц сайта. Это видно даже на глаз. Поэтому попробуйте один раз применить это на своем сайте, и вы поймете все прелести данного способа.
К сожалению, прочитав статью, многие веб-мастера разочаруются. Возможно, они ждали именно плагина для какой-либо CMS (WordPress, Joomla и т.д). Ведь намного проще установить один плагин и наслаждаться результатом. Но увы, действительно оптимизированные вещи делаются зачастую вручную. Поэтому данный способ отлично подойдет для лендингов. Но кто запрещает на основе этого JS кода написать свой плагин для WordPress, например?
Успехов!
С Уважением, Юрий Немец
Источник: sitehere.ru
Как сделать YouTube быстрее и быстрее загружать видео без задержек (включить ExoPlayer)
Как сделать Android YouTube быстрее, чтобы видео загружалось быстрее и без задержек. YouTube — одно из самых важных приложений в Play Store, которым пользуются миллионы людей по всему миру. YouTube быстро стал одним из самых важных сервисов и одним из самых важных веб-сайтов для обмена видео. Всего несколько лет назад YouTube был не чем иным, как сайтом, на котором каждый мог загружать видео и делиться ими со своими друзьями. Сегодня это крупнейший в мире сайт для обмена видео, куда самые важные компании и известные музыканты загружают видеоклипы.
Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)
YouTube получает миллиарды посещений каждый день, и большинство из них поступают от пользователей мобильных телефонов. Пару лет назад большинство посетителей использовали компьютеры, но с развитием технологий мобильные телефоны быстро заменяют компьютеры.
Лучший способ смотреть видео на телефоне Android — это установить и использовать приложение YouTube, которое можно найти в Play Store. Вы просто открываете приложение, ищете видео и воспроизводите его. Недавно обновилось приложение YouTube для Android. Обновление принесло длинный список улучшений, таких как повышение скорости, но главной особенностью стал новый дизайн материалов.
Несмотря на то, что обновление принесло оптимизацию скорости, приложение по-прежнему страдает от медленной скорости и проблем с загрузкой видео. Пользователи сообщают о повседневных проблемах с приложением YouTube для Android, но основные проблемы связаны с медленной скоростью и длительной загрузкой видео. Даже пользователи, у которых есть высокая скорость интернета, страдают от медленной загрузки видео. Хорошая новость заключается в том, что вы можете улучшить приложение YouTube на Android, чтобы сделать его быстрее, чтобы сайт открывался быстрее, а видео занимало меньше времени для загрузки и воспроизведения.
Как ускорить приложение YouTube для Android и ускорить загрузку видео с YouTube
В приложении YouTube есть небольшая функция под названием ExoPlayer. ExoPlayer — экспериментальный видеоплеер, который Google реализовал в последней версии приложения YouTube, но по какой-то причине он отключен. ExoPlayer заставляет видео загружаться намного быстрее, чем обычно. Чтобы активировать ExoPlayer в приложении YouTube, вам нужен только root-доступ.
- Загрузите файловый менеджер с корневым доступом, например ES File Manager или Root Explorer.
- Откройте файловый менеджер и перейдите по ссылке /data/data/com.google.android.youtube/shared_prefs. Найдите файл с названием youtube.xml.
- Отредактируйте файл youtube.xml с помощью текстового редактора. Найдите
и добавьте эти строки чуть ниже.
Сохраните файл и перезагрузите телефон. Откройте приложение YouTube и воспроизведите видео. Вы увидите, что видео загружаются намного быстрее. Это было очень простое решение и руководство, как заставить приложение YouTube на Android загружать видео намного быстрее.
Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)
Источник: androidelf.com