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

Question

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

Я добавил два видеоролика к this page (прокрутите вниз мимо красной машины), и вы можете посмотреть видео. Первый - 720p, но навсегда загружается.

Вот код, я использую:

<video autoplay="" class="video" loop="" muted=""> 
    <source src="/assets/video/Newport-beach-video.mp4" type="video/mp4" /> 
    Your browser does not support video. 
</video> 

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

Answer 1

Как говорится в Madness, хостинг видео - это специализированная область, и баланс качества и скорости является ключевым, как вы отметили.

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

Некоторые предложения в грубом порядке сложности/расходов для вашего случая:

• хост видео на Amazon S3, используя их CDN CloudFront, чтобы ускорить доставку (пример обсуждается в блоге здесь: https://aws.amazon.com/blogs/aws/using-amazon-cloudfront-for-video-streaming/)
• хоста видео на специализированном потоковом видео хостинга сайте, такие как Brightcove, Wistia и т.д. (пример указание: http://support.brightcove.com/en/video-cloud/docs/quick-video-publishing)
• Настройте свой собственный потоковый сервер для размещения своего видео (пример overveiw: http://www.wowza.com/uploads/wowza4/documents/WowzaStreamingEngine-Product-Overview_final.pdf)

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

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

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

Вы можете увидеть это в действии на YouTube, если вы посмотрите на статистику при воспроизведении видео в формате HTML5.

Используя один из хостинг-услуг будет скрывать всю эту сложность от вас, следовательно, их популярность ...