Воспроизведение видео в Интернете: рекомендации по доставке видео (часть 2)

В своем предыдущем посте я исследовал тенденции видео в Интернете сегодня, используя данные из HTTP-архива. Я обнаружил, что многие веб-сайты обслуживают один и тот же видеоконтент на мобильных и настольных компьютерах, и что многие видеопотоки доставляются с битрейтом, который слишком высок для воспроизведения на скоростях 3G. Мы также обнаружили, что веб-сайты могут автоматически загружать видео на мобильные устройства, что наносит ущерб тарифным планам клиентов, сроку службы батареи для видео, которые могут никогда не воспроизводиться.

TL;DR : в этом посте мы рассмотрим методы оптимизации скорости и доставки видео вашим клиентам, а также предоставим список из 9 лучших практик, которые помогут вам доставить ваши видеоресурсы.

Показатели воспроизведения видео

Сегодня используются 3 основные метрики воспроизведения видео:

1. Время запуска видео
2. Видео останавливается
3. Качество видео

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

Видео Запуск

Когда пользователь нажимает кнопку воспроизведения на видео, он ожидает, что сможет быстро просмотреть видео. По данным Conviva (лидер в области анализа показателей видео), в первом квартале 2018 года 14% видео так и не воспроизводились (это 2,4 миллиарда видео) после того, как пользователь нажал кнопку воспроизведения.

2,3% видео (400 млн видеозапросов) не удалось воспроизвести после того, как пользователь нажал кнопку воспроизведения. 11,54% (2 млрд воспроизведений) были прекращены пользователем после нажатия кнопки воспроизведения. Давайте попробуем разобраться, что может быть причиной этих проблем.

Ошибка воспроизведения видео

На сбой воспроизведения видео приходилось 2,3% всех воспроизведений видео. Что могло привести к этому? В данных HTTP-архива мы видим, что 0,3% всех видеозапросов приводят к HTTP-ответу 4xx или 5xx, поэтому некоторый процент не работает из-за неверных URL-адресов или неправильных настроек сервера. Еще одна потенциальная проблема (которая не наблюдается в данных HTTP-архива) — это видео, которые блокируются геолокацией (блокируются на основе местоположения зрителя и лицензии провайдера на отображение видео в этом регионе).

Отказ от воспроизведения видео

В отчете Conviva говорится, что 11,5% всех воспроизведений видео будут воспроизводиться, но клиент отказался от воспроизведения до того, как видео начало воспроизводиться. Проблема здесь в том, что видео не доставляется клиенту достаточно быстро, и он сдается. Есть много исследований мобильного Интернета, в которых длительные задержки вызывают отказ от веб-страниц, и похоже, что такой же эффект происходит и при воспроизведении видео.

Исследования Akamai показывают, что зрители будут ждать 2 секунды, но каждую последующую секунду 5,8% зрителей бросают видео.

Так что же приводит к проблемам с воспроизведением видео? Как правило, файлы большего размера загружаются дольше, поэтому воспроизведение будет задерживаться. Давайте рассмотрим несколько способов, которыми можно ускорить воспроизведение видео. Чтобы уменьшить количество видеороликов, заброшенных при запуске, мы должны как можно лучше «ужать» эти файлы, чтобы они загружались (и начинались воспроизведение) быстро.

MP4: предварительная загрузка видео

Чтобы обеспечить быстрое воспроизведение в Интернете, одним из вариантов является предварительная загрузка видео на устройство заранее. Таким образом, когда ваш клиент нажимает «воспроизвести», видео уже загружено, и воспроизведение будет быстрым. HTML предлагает атрибут предварительной загрузки с 3 возможными вариантами: auto , metadata и none .

preload = auto

Когда ваше видео доставляется с preload="auto" , браузер загружает весь видеофайл и сохраняет его локально. Это позволяет значительно повысить производительность запуска видео, поскольку видео доступно локально на устройстве, и никакие сетевые помехи не замедлят запуск.

Однако preload="auto" следует использовать только в том случае, если существует высокая вероятность того, что видео будет просмотрено. Если видео просто находится на вашей веб-странице и загружается каждый раз, это добавит большой штраф за передачу данных для ваших мобильных пользователей, а также увеличит затраты на ваш сервер / CDN для доставки всего видео всем вашим пользователям.

На этом веб-сайте есть раздел «Видеогалерея» с несколькими видеороликами. Каждое видео в этом разделе имеет предварительную загрузку, установленную на auto , и мы можем визуализировать их загрузку в водопаде WebPageTest в виде зеленых горизонтальных линий:

Существует раздел под названием «Видеогалерея», и файлы для этого небольшого раздела веб-сайта составляют 14,6 млн (83%) загрузки страницы. Вероятность того, что одно (из многих) видео будет воспроизведено, вероятно, довольно низка, поэтому использование preload="auto" только генерирует большой трафик данных для сайта.

В этом случае маловероятно, что хотя бы одно из этих видео будет просмотрено, а ведь все они скачиваются полностью, добавляя на мобильный сайт 14,8 МБ контента (83% контента на странице). Для видео с высокой вероятностью воспроизведения (возможно, >90% просмотров страниц приводят к воспроизведению видео) — предзагрузка всего видео — очень хорошая идея. Но для видео, которые вряд ли будут воспроизводиться, preload="auto" вызовет только дополнительный поток контента через ваши серверы и на мобильные (и настольные) устройства ваших клиентов.

preload="metadata"

При использовании атрибута preload="metadata" загружается начальный сегмент видео. Это позволяет игроку узнать размер видеоокна и, возможно, загрузить одну или две секунды видео для немедленного воспроизведения. Браузер просто делает 206 (частичный запрос) видеоконтента. Благодаря сохранению небольшого количества видеоданных на устройстве время запуска видео сокращается без существенного влияния на объем передаваемых данных.

В Chrome метаданные являются выбором по умолчанию, если атрибут не выбран.

Примечание . Это все равно может привести к загрузке большого количества видео, если видео большое.

Например, на мобильном веб-сайте с видео, установленным по адресу preload="metadata" , мы видим только один запрос на видео:

И запрос является частичной загрузкой, но он все равно приводит к загрузке 2,7 МБ видео, потому что полное видео имеет разрешение 1080p, длину 150 с и размер 97 МБ (мы поговорим об оптимизации размера видео в следующих разделах).

Итак, я бы рекомендовал использовать preload="metadata" только тогда, когда существует достаточно высокая вероятность того, что видео будет просмотрено вашими пользователями, или если видео маленькое.

preload="none"

Самый экономичный вариант загрузки видео, так как при загрузке страницы видеофайлы не загружаются. Это потенциально добавит задержку в воспроизведении, но приведет к более быстрой начальной загрузке страницы. Для сайтов с большим количеством видео на одной странице может иметь смысл добавить постер в окно видео и не загружать какое-либо видео до тех пор, пока оно не будет загружено. явно запрошенным конечным пользователем. Все видеоролики YouTube, встроенные в веб-сайты, никогда не загружают какой-либо видеоконтент, пока не будет нажата кнопка воспроизведения, по сути, они ведут себя так, как если бы preload="none" .

Рекомендации по предварительной загрузке: используйте preload preload="auto" только в том случае, если существует высокая вероятность того, что видео будет просмотрено. В общем, использование preload="metadata" обеспечивает хороший баланс между использованием данных и временем запуска, но следует отслеживать чрезмерное использование данных.

Советы по воспроизведению видео MP4

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

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

Аудио

Видеофайлы разбиты на разные «потоки», наиболее распространенным из которых является видеопоток. Второй наиболее распространенный поток — это звуковая дорожка, которая синхронизируется с видео. В некоторых приложениях для воспроизведения видео аудиопоток доставляется отдельно; это позволяет беспрепятственно доставлять сообщения на разных языках.

Если ваше видео воспроизводится без звука (например, зацикленный GIF или фоновое видео), удаление аудиопотока из видео — это быстрый и простой способ уменьшить размер файла. В одном примере фонового видео полный файл составлял 5,3 МБ, но звуковая дорожка (которую никогда не слышно) составляла почти 300 КБ (5% файла). байт.

42% файлов MP4, найденных в HTTP-архиве, не имеют аудиопотока.

Рекомендация . Удалите звуковые дорожки из видео, которые воспроизводятся без звука.

Кодирование видео

При кодировании видео есть варианты снижения качества видео (количество пикселей на кадр или кадров в секунду). Уменьшить видео высокого качества, чтобы оно подходило для Интернета, легко, и, как правило, это не влияет на качество, предоставляемое вашим конечным пользователям. Эта статья недостаточно длинна для подробного обсуждения всех различных методов сжатия, доступных для видео. В кодировщиках x264 и x265 есть термин, называемый актером постоянной скорости (CRF). Использование CRF 23-28, как правило, дает хороший компромисс между сжатием и качеством и является отличным первым стартом в области сжатия видео.

Размер видео

На размер видео могут влиять многие параметры: длина, ширина и высота (вероятно, сюда можно включить и звук).

Продолжительность видео

Длина видео, как правило, не является функцией, которую веб-разработчик может настроить. Если видео будет воспроизводиться в течение трех минут, оно будет воспроизводиться в течение трех минут. В случаях, когда видео очень длинное, такие инструменты, как preload="none" или потоковая передача видео, могут разрешить первоначальную загрузку меньшего объема данных, чтобы сократить время загрузки страницы.

Размеры видео

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

То же самое относится и к видео. Веб-сайту с 30-мегабайтным фоновым видео размером 2560×1226 будет трудно загрузить видео на мобильные устройства (вероятно, и на настольные компьютеры!). Изменение размера видео резко уменьшает размер файлов и может даже позволить обслуживать три или четыре разных фоновых видео:

Сейчас, к сожалению, браузеры не поддерживают медиазапросы для видео в HTML, а это значит, что это просто не работает:

 <video preload="auto" autoplay muted controls source src="large.mp4" </video>

Поэтому нам нужно создать небольшую JS-оболочку для доставки видео, которые мы хотим, на разные размеры экрана. Но прежде чем мы отправимся туда…

Загрузка видео, но скрытие его от просмотра

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

Видео с качеством Retina

У вас могут быть разные видео для разной плотности экрана устройства. Это может привести к увеличению времени загрузки видео вашим мобильным клиентам. Возможно, вы захотите запретить воспроизведение видео Retina на устройствах с меньшим экраном или на устройствах с ограниченной пропускной способностью сети, возвращаясь к видео стандартного качества для этих устройств. Такие инструменты, как Network Information API, могут предоставить вам информацию о пропускной способности сети и помочь вам решить, какое качество видео вы хотите предоставить своим клиентам.

Загрузка различных типов видео в зависимости от размера устройства и качества сети

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

• Не воспроизводить видео на экранах ниже 500 пикселей;
• Поставлять небольшие ролики для экранов 500-1400;
• Доставляйте видео большего размера на все остальные устройства.

 <html><body> <div> </div> <div></div> <script> //get screen width and pixel ratio var width = screen.width; var dpr = window.devicePixelRatio; //initialise 2 videos — //“small” is 960 pixels wide (2.6 MB), large is 1920 pixels wide (10 MB) var smallVideo="https://res.cloudinary.com/dougsillars/video/upload/w_960/v1534228645/30s4kbbb_oblsgc.mp4"; var bigVideo = "https://res.cloudinary.com/dougsillars/video/upload/w_1920/v1534228645/30s4kbbb_oblsgc.mp4"; //TODO add logic on adding retina videos if (width<500){ console.log("this is a very small screen, no video will be requested"); } else if (width< 1400){ console.log("let's call this mobile sized"); var videoTag = "\<video preload=\"auto\" width=\"100%\" autoplay muted controls src=\"" +smallVideo +"\"/\>"; console.log(videoTag); document.getElementById('video').innerHTML = videoTag; document.getElementById('text').innerHTML = "This is a small video."; } else{ var videoTag = "\<video preload=\"auto\" width=\"100%\" autoplay muted controls src=\"" +bigVideo +"\"/\>"; document.getElementById('video').innerHTML = videoTag; document.getElementById('text').innerHTML = "This is a big video."; } </script> </html></body>

Этот скрипт делит экраны пользователя на три варианта:

1. При разрешении менее 500 пикселей видео не отображается.
2. Между 500 и 1400 у нас есть меньшее видео.
3. Для экранов шириной более 1400 пикселей у нас есть видео большего размера.

На нашей странице есть адаптивное видео двух разных размеров: один для мобильных устройств, а другой для экранов настольных компьютеров. Мобильные пользователи получают отличное качество видео, но размер файла составляет всего 2,6 МБ по сравнению с 10 МБ для настольного компьютера.

Анимированные GIF-файлы

Анимированные GIF-файлы — это большие файлы. Хотя и aGIF, и видеофайлы сжимают данные по ширине и высоте, только видеофайлы имеют сжатие (часто по большей) временной оси. aGIF — это, по сути, быстрое «пролистывание» статических GIF-изображений. Это отсутствие сжатия добавляет значительный объем данных. К счастью, можно заменить aGIF зацикленным видео, что может сэкономить МБ данных для каждого запроса.

 <video loop autoplay muted playsinline src="pseudoGif.mp4">

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

 <picture> <source type="video/mp4" loop autoplay> <source type="image/webp"> <src="animated.gif"> </picture>

В этом случае Safari будет воспроизводить анимированный GIF, а Chrome (и другие браузеры, поддерживающие WebP) будет воспроизводить анимированный WebP с откатом к анимированному GIF. Подробнее об этом подходе можно прочитать в отличном посте Колина Бенделла.

Сторонние видео

Один из самых простых способов добавить видео на свой веб-сайт — просто скопировать/вставить код из службы обмена видео и разместить его на своем сайте. Однако, как и при добавлении третьих лиц на ваш сайт, вы должны быть бдительны в отношении того, какой контент добавляется на вашу страницу и как это повлияет на загрузку страницы. Многие из этих виджетов «просто вставьте это в свой HTML» добавляют 100 КБ JavaScript. Другие загрузят весь фильм (например, preload="auto" ), а некоторые сделают и то, и другое.

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

Потоковая передача

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

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

Изучив 1065 файлов манифеста, доставленных на мобильные устройства из HTTP-архива, мы обнаружили, что 59% видео имеют начальный битрейт ниже 1,2 МБ/с и, скорее всего, начнут потоковую передачу без особых задержек при скорости передачи данных 1,6 МБ/с 3G. 11 % используют битрейт от 1,2 до 1,6 МБ/с, что может замедлить запуск в 3G, а 30 % имеют битрейт выше 1,6 МБ/с и не могут воспроизводить с таким битрейтом при подключении 3G. Основываясь на этих данных, кажется, что ~ 41% всех видео не сможет поддерживать первоначальный битрейт на мобильных устройствах, что увеличивает задержку запуска и, возможно, увеличивает количество остановок во время воспроизведения.

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

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

Мы можем визуализировать это, создав видеоманифесты с разным начальным битрейтом. Мы тестируем 3 разных сценария: начиная с самого низкого (215 Кбит/с), среднего (600 Кбит/с) и самого высокого битрейта (2,6 Мбит/с).

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

При запуске с самым высоким битрейтом (тестирование на 3G-соединении со скоростью 1,6 Мбит/с) плеер быстро понимает, что воспроизведение не может происходить, и переключается на видео с самым низким битрейтом (215 Кбит/с). Видео начинает воспроизводиться на 17-й секунде. Существует 6-секундная задержка, а качество видео такое же низкое, как и в первом тесте.

Использование видео среднего качества допускает небольшой компромисс: видео начинает воспроизводиться с 13 с (на 2 секунды медленнее), но с самого начала имеет высокое качество — и нет перехода от пиксельного видео к более высокому качеству.

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

Результаты WebPageTest: начальный видеопоток низкий, средний и высокий (сверху вниз). Видео запускается быстрее всего с самым низким качеством видео. Важно отметить, что начальное видео высокого качества с 17-й секунды имеет такое же качество, что и низкое качество, начальное с 11-й секунды.

Потоковое вещание: продолжение воспроизведения

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

 #EXT-X-STREAM-INF:BANDWIDTH=912912,PROGRAM-ID=1,CODECS="avc1.42c01e,mp4a.40.2",RESOLUTION=640x360,SUBTITLES="subs" video/600k.m3u8

В информационной строке сообщается, что этот поток имеет битрейт 913 KBPS и разрешение 640x360. Если мы посмотрим на URL-адрес, на который указывает эта строка, мы увидим, что он ссылается на видео размером 600 КБ. Проверка видеофайлов показывает, что видео имеет битрейт 600 КБ/с, а манифест завышает битрейт.

Завышение битрейта видео

• PRO
  Завышение битрейта гарантирует, что когда игрок выбирает поток, видео будет загружаться быстрее, чем ожидалось, а буфер будет заполняться быстрее, чем ожидалось, что снижает вероятность зависания.
• ПРОТИВ
  При завышении битрейта передаваемое видео будет иметь более низкое качество. Если мы посмотрим на весь список заявленных и фактических битрейтов:

Для пользователей с подключением 1,6 Мбит/с проигрыватель выберет битрейт 913 кбит/с, обслуживая видео клиента со скоростью 600 кбит/с. Однако, если бы битрейт был сообщен точно, использовался бы битрейт 950 КБ/с, и, вероятно, он бы транслировался без проблем. Хотя варианты здесь предотвращают зависания, они также снижают качество видео, доставляемого потребителю.

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

Протестируйте видео Neilsen в браузере и посмотрите, сможете ли вы заставить его прыгать вперед и назад.

Заключение

В этом посте мы рассмотрели несколько способов оптимизации видео, которые вы размещаете на своих веб-сайтах. Следуя рекомендациям, показанным в этом посте:

1. preload="auto"
   Используйте только в том случае, если существует высокая вероятность того, что это видео посмотрят ваши клиенты.
2. preload="metadata"
   По умолчанию в Chrome, но может привести к загрузке больших видеофайлов. Используйте с осторожностью.
3. Бесшумные видео (повторяющиеся GIF-файлы или фоновые видео)
   Вырезать звуковой канал
4. Размеры видео
   Рассмотрите возможность доставки видео разного размера на мобильные устройства вместо настольных компьютеров. Видео будет меньше, загружаться быстрее, и ваши пользователи вряд ли увидят разницу (нагрузка на ваш сервер тоже снизится!)
5. Сжатие видео
   Не забудьте сжать видео, чтобы обеспечить его доставку
6. Не «скрывать» видео
   Если видео не будет отображаться — не скачивайте его.
7. Регулярно проверяйте сторонние видео.
8. Потоковое
   Начните с потока более низкого качества, чтобы обеспечить быстрый запуск. (Для более продолжительных видео используйте средний битрейт для лучшего качества при запуске)
9. Потоковое
   Можно быть консервативным в отношении битрейта, чтобы предотвратить зависание, но если зайти слишком далеко, потоки будут доставлять видео более низкого качества.

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