1

Как вставить видео на сайт так, чтобы при загрузке страницы пользователю не приходилось ждать по 2-3 минуты, чтобы оно загрузилось. видео хочется вставить на задний фон в формате 1080p-720p.

Может как-то сжать его, или сделать по кадровую загрузку...

Пример сайта, где видео загружается почти сразу, но качество не очень... http://uclubusinesssociety.com/

10
  • Если видео должно сразу проигрываться при заходе на страницу, то никак - только сжимать и надеяться, что у пользователя быстрый интернет. ffmpeg Вам в помощь, для экспериментов со сжатием.
    – Iceman
    11 дек 2017 в 5:29
  • @Iceman можно даже не сразу... но с задержкой в 1-3 секунды. Что если вставить видео с YouTube? это может решить проблему? 11 дек 2017 в 5:30
  • Не всегда, видео с Youtube не будут сами запускаться на мобильных устройствах. 11 дек 2017 в 5:31
  • @VasiliyRusin к этому я и веду) Варик только один - сжимать( 11 дек 2017 в 5:33
  • Как я и сказал в ответе. Размер видео важен, но он на втором месте. Даже если видео весит 10 мегабайт (что крайне маловероятно при вашем качестве) если оно будет грузиться с сервера в Лос Анджелесе без CDN это займет пару минут. Вне зависимости от вашего интернет канала. 11 дек 2017 в 5:36

2 ответа 2

2

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

<link rel=preload as=video href=...> 

Если же вы желаете, чтобы ваше видео загружалось при открытии/загрузке какой-то другой веб-страницы (не текущей), например на которую указывает навигация главной веб-страницы веб-сайта, то на текущей веб-странице вы можете применить следующие мета - спецификация W3:

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

<link rel=preconnect as=video href=...>

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

<link rel=prefetch as=video href=...>

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

<link rel=prerender as=video href=...> 

Этот список дан в порядке приоритета возможного требования видео ресурса. Таким образом вам надо самостоятельно решить насколько велика вероятность того, что пользователь может использовать ваше видео. Чем ниже приоритетный элемент вы указываете, тем меньше требуется браузеру времени для предварительного соединения с вашим видео. Также для указания возможности использования видео, вы можете использовать подсказку-атрибут pr (смотрите документацию W3).

0

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

2
  • Как реализовать этот CDN в коде? есть ли ссылки на ресурсы? 11 дек 2017 в 9:14
  • CDN (Content Delivery Network) это объект физический. Для начало нужно про него почитать. А затем найти подходящего вам CDN. Это делается в зависимости от необходимых вам критериев. 11 дек 2017 в 18:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.