В статье подробно разберем самые актуальные ошибки, которые могут произойти в обработке видео на сайте. Помимо расходов, вы также должны учитывать пользовательский опыт. Чем тяжелее страница, тем дольше она загружается, и тем больше вероятность того, что посетители покинут ваш сайт. Кроме того, скорость загрузки страниц является важным фактором в SEO-рейтинге.
В свете всего этого, видео-это явно что-то, что нужно серьезно воспринимать и получать правильно. Тем не менее, транскодирование видео является сложной задачей, в комплекте с номенклатурой, незнакомой разработчикам, такими как кодеки, битрейт и адаптивная потоковая передача битрейта. Неудивительно, что ошибки изобилуют при представлении видео в интернете.
Десять общих видео проблем
Cloudinary эффективно решает многие распространенные проблемы с видео. Если вы еще не используете нашу платформу, ознакомьтесь с приведенными ниже 10 ежедневными проблемами, связанными с видео, и предлагаемыми нами решениями.
1. Неправильное разрешение
Вероятно, самая распространенная ошибка при доставке видео заключается в том, что они представлены в слишком высоком разрешении. Как и в случае с изображениями, это трата пропускной способности, чтобы доставить больше пикселей, чем может отобразить браузер, и полагаться на изменение размера на стороне браузера.
Однако кодирование видео отнимает много времени, а эффективные инструменты очень малы. Как правило, разработчики просто ссылаются на видео в video теге на странице.
2. Неправильный видеокодек
Как и #1 выше, разработчики незнакомые с видео, просто разместили бы его на странице. Часто этот подход приводит к не оптимизированному кодеку, снова тратя байты.
Вместо этого подумайте о кодек, как вы бы форматы изображений. В зависимости от того, является ли это файл JPEG, PNG, GIF или TIFF, сетевое изображение будет иметь значительно разный вес, где независимо от формата файла, он будет выглядеть почти одинаково.
3. Слишком высокий битрейт видео
Битрейт-это количество бит, которое требуется для кодирования одной секунды видео. Чтобы вычислить битрейт, умножьте общее число пикселей в кадре на число кадров в секунду, а затем умножьте результат на число байт на пиксель. Так же, как и настройка качества для изображений, слишком высокая настройка приведет к тяжелому файлу без воспринимаемой разницы в визуальной точности.
Вот что нужно сделать: поскольку ваш битрейт является функцией разрешения, точно определите разрешение, которое вам нужно, а затем найдите множитель битрейта, где приводит к желаемой визуальной точности. Впоследствии, перепрофилируйте этот множитель при кодировании в разных разрешениях. А еще лучше, автоматизируйте эту задачу на Cloudinary.
4. Нет адаптивной потоковой передачи битрейта
Вы заметили в последнее время изменение качества—иногда зернистый и прерывистый вместо четкого и гладкого видео—в Netflix и YouTube. Если это так, вы стали свидетелями адаптивной потоковой передачи битрейта в действии. Это практика кодирования видео с несколькими скоростями или разрешениями и позволяет видео плееру определить наиболее подходящий для посетителей в зависимости от их размера экрана и доступности полосы пропускания. Вместо буферизации или загрузки видео, где слишком велико для отображения, посетители получают правильное разрешение или битрейт, которые игрок адаптирует, если условия сети изменятся в середине потока.
5. Нет современных видеокодеков
Доступны кодеки, которые являются более современными и эффективными,и поэтому, чтобы оптимизировать производительность вашего сайта, рассмотрите их в качестве альтернативы кодировки. Этот сценарий аналогичен форматам изображений WebP, JPEG 2000 и JPEG XR, которые более эффективны, чем старый режим ожидания JPG, но не поддерживаются повсеместно. К счастью, это легко воспользоваться преимуществами этих современных кодеков без необходимости добавлять условную логику, чтобы выяснить, какой из них представить какому посетителю. Более подробная информация в #6 ниже.
6. Нет нескольких вариантов кодека
В предыдущем сообщении Cloudinary показано, как оптимизировать видео, выбрав правильный кодек. Самое интересное в видеоплеере HTML5 заключается в том, что вы можете указать несколько вариантов видео, а затем он будет воспроизводить первый, который он знает как играть. Это упрощает представление нескольких кодеков и позволяет браузеру выбрать наиболее эффективный для воспроизведения.
7. Неверный битрейт для контента
Вы сталкивались со сценой действия или футбольной игрой с изменчивым контентом? Это происходит, когда битрейт установлен слишком низко, чтобы учитывать все движения в сцене. Способ, которым кодеки сжимают видео контент, заключается в обмене информацией о пикселях между кадрами. В сценах действия, где вещи перемещаются вокруг много, существует едва ли какая-то общая информация по кадрам. В этих случаях рассмотрите возможность уменьшения разрешения видео при сохранении более высокого, чем обычно.
8. Нет приглушения автоматического воспроизведения видео
Современные браузеры не воспроизводят видео автоматически, если они не отключены. Несмотря на то, что Chrome выпустил требование о глушении в апреле 2018 года, видеобаннеры по-прежнему остаются статичными сегодня. Итак, для hero-фоновых видео или тех, которые вы хотите воспроизводить автоматически при загрузке страницы, добавьте muted атрибут в теге video, например:
HTML
Код
<video autoplay muted> ... </video>
Кроме того, чтобы обеспечить автоматическое воспроизведение видео на мобильных устройствах, добавьте playsinlineатрибут:
Код
<video autoplay muted playsinline> ... </video>
9. Тяжелый видеоплеер вместо видеоплеера HTML5
Специализированные видео плееры требуют загрузки пользователями. Эти плееры являются плагинами с впечатляющими возможностями, такими как поддержка адаптивной потоковой передачи и 360 видео, событий аналитики, интерактивных горячих точек и других.
Однако для видеороликов hero-background или небольших видеоклипов короткой формы специализированные видео плееры являются избыточными и совершенно ненужными, что приводит к потере пропускной способности из-за требования загрузки. Видеоплейер HTML5 на самом деле достаточно многофункционален, чтобы он мог обслуживать потребности большинства видеоматериалов в интернете.
10. Анимированные GIF вместо видео
Анимированные GIF-файлы, что являются короткими, часто забавными видеоклипами, которые не могут добавлять контекстные неподвижные изображения, увлекательны. GIF-это удивительный формат—фактически, это самый первый веб-дружественный формат изображения. Однако он стареет и не идет в ногу со временем: последнее обновление было 30 лет назад. Кроме того, GIF-файлы могут быть очень большими, несколько мегабайт для небольшого клипа.
В заключение:
Теперь вы узнали о наиболее распространенных проблемах, связанных с видео, в Интернете, с которыми мы ежедневно сталкиваемся в Cloudinary, и о способах их решения.
Cloudinary может динамически преобразовывать все загруженные видео в любой размер, формат, кодек и качество, что позволяет легко тестировать различные параметры и определять те, которые лучше всего соответствуют вашему веб-сайту и ожиданиям пользователей.
В этой статье мы объясним основные причины отклонения YouTube части контента. Это происходит после того, как мы загрузили файл на YouTube и когда они обработали его самостоятельно. По возможности мы предлагаем исправление или ссылку на любые документы поддержки YouTube, которые могут иметь отношение к делу.
