Для сайта формат видео – Правила создания рекламных материалов для Видеосети Яндекса — Требования к рекламным материалам — Рекламные технологии Яндекса — Вебджем.рф

Содержание

Как правильно оптимизировать видео для сайта 🎥

5 июля 2019

728

Время чтения ≈ 7 минут

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

Однако, размещая видео, пользователи нередко сталкиваются с проблемой неподходящего размера или формата. Видеоролики могут занимать слишком много места, а также воспроизводиться далеко не всеми типами браузеров и устройств. На самом деле, решить эту проблему совсем несложно. Сжать видео для сайта буквально «в пару кликов» помогут простые рекомендации, которые мы дадим в этой статье.

Зачем оптимизировать видео

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

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

Размер и формат видео

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

Чтобы не тратить драгоценное дисковое пространство на сервере и сохранить хорошую скорость, обычно видео размещается на специализированных сторонних ресурсах, например, на YouTube или Vimeo. На самом же ресурсе ставится лишь ссылка на них. При этом большую роль играет размер видео и его формат. Большие файлы повышают общее время загрузки страницы, а некоторые сторонние ресурсы могут вообще отказаться загружать их.

Хотите размещать видео именно на своём ресурсе? С виртуальным сервером от Eternalhost для вашего видео всегда хватит места.

Чтобы у пользователей не возникло проблем с воспроизведением видеофайла, он должен быть представлен в формате, который поддерживается большинством устройств, браузеров и операционных систем. На сегодняшний день самые распространенные типы форматирования — MP4 (h364) и WebM (VP8).

Чем конвертировать видеофайлы

Основные понятия

Специальные программы для сжатия видео называются конвертерами или кодировщиками. Их можно использовать в автоматическом (с рекомендуемыми параметрами) или ручном режиме. Преимущество самостоятельного сжатия заключается в том, что можно точно контролировать и размер, и качество ролика.

Чтобы самостоятельно конвертировать видеоконтент с помощью конвертеров, нужно знать некоторые параметры, которые придется задавать при обработке ролика.

Кодеки — программы, преобразующие данные для хранения и передачи медиаинформации. Чаще всего их работа заключается в устранении избыточных кадров.
Ключевые кадры хранят измененное изображение и являются базовыми для последующих кадров. Интервал между ними определяет окончательный размер видеофайла. Чем их больше, тем больше файл и выше его качество.
Артефакты — куски изображения, остающиеся при неправильном обновлении ключевого кадра.
Битрейт — объем данных видеопотока в секунду или его скорость. Может быть постоянным или зависеть от количества действий в ролике.

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

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

Практические рекомендации по оптимизации

Если видеофайл планируется размещать на собственной странице в фоновом режиме, желательно добиться как можно меньшего размера при приемлемом качестве. Рекомендуемые параметры — 720р с частотой 25 кадров и битрейтом 750к или 1250к. Огрехи изображения можно сгладить, наложив на него специальный слой, скрывающий артефакты.

Как сделать фоновый ролик

Для ролика на главной странице продолжительность лучше ограничить 30−40 секундами или сделать видео зацикленным.
Действие на экране должно быть плавным и неперегруженным движениями, чтобы посетитель страницы не отвлекался от основной информации.
Если у видео будет сопроводительный текст, то он должен быть хорошо заметен и легко читаем.
Желательно, чтобы фоновый ролик появлялся постепенно, не был зациклен до бесконечности (это быстро надоедает) и имел кнопку паузы.

Вывод

Качественное и правильно оптимизированное видео может стать одним из самых эффективных инструментов продвижения интернет-ресурса. Подобный формат контента набирает популярность у пользователей с каждым годом, а рейтинг роликов на YouTube влияет на ранжирование сайта в поисковиках.

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

Даже оптимизированное видео не даст нужного результата, если сайту не хватает мощностей. С VPS от Eternalhost проблема места и скорости решена — видео можно смело размещать у себя.

Оцените материал:

[Всего голосов: 1 Средний: 4/5]

Как оптимизировать видео для сайта – База знаний Timeweb Community

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

По прогнозам к 2020 году 80% всего потребительского интернет-трафика будут составлять видеоролики. Чуть меньше половины пользователей (43%) хотели бы получать еще больше контента в видеоформате. Да и самим маркетологам выгодно использовать видео: по статистике, 4 из 5 пользователей принимают решение о покупке на основе просмотренного видео.

Наконец, компании, которые используют видео в рекламе, имеют на 27% выше CTR и на 34% выше уровень конверсии.

В общем, есть множество причин использовать видео — в том числе и на своем сайте.

Однако тут встает вопрос об оптимизации: как использовать видео не во вред своему сайту? Об этом и будет моя статья.

Выбираем формат

Для платформ YouTube и Vimeo стандартными форматами являются MP4 и WebM.

MP4 поддерживают все браузеры, в то время как WebM сейчас поддерживают только Chrome и Firefox.

Видео в формате WebM, как правило, весят меньше, чем MP4 файлы, однако видео MP4 смотрятся чуть лучше на портативных девайсах.

Далее оптимизация разделяется на два пути:

I Оптимизация видео для сайта

II Оптимизация сайта под видео

Рассмотрим оба.

I Оптимизация видео

1 Уменьшение веса видеофайла

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

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

2 Конвертация в поддерживаемые HTML5 форматы

Используйте онлайн-конвертер для того, чтобы переконвертировать видео в форматы MP4 или WebM.

3 Удаление звука (если он не используется)

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

II Оптимизация сайта под видео

1 Точный размер видео

Обязательно укажите в HTML или CSS размеры видео по вертикали и горизонтали — так браузеру будет проще определиться с пропускной способностью.

2 Загрузка видео после загрузки страницы

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

3 Мобильные пользователи

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

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

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

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


@media screen and (max-width: 650px) {
   #hero-video {
   display: none;
   }
}

Советы по SEO

Наконец, можно дать несколько советов, которые касаются SEO.

Да, сейчас есть популярные площадки для размещения видео — тот же YouTube — однако если вы хотите продвинуть свой сайт в Google, размещать видео нужно на своем сайте. Потому что если вы разместите видео на YouTube и дадите ссылку на свой сайт, то поисковые системы отдадут предпочтение YouTube — и в результате кто-то, кто ищет вашу компанию в Google, попадет на YouTube, а не на ваш сайт.

Другие советы кратко:

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

Заключение

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

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

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

10 рекомендаций по использованию фонового видео на сайте

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

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

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

Так как нам избежать ошибок и сделать все правильно? Легко, просто следуйте этим 10 советам.

Сжимайте видео, насколько это возможно

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

Чтобы избежать этого, надо сжать видео до минимального приемлемого для нас битрейта. Есть соблазн использовать высококачественное видео в разрешении 1080p, чтобы повысить четкость и красоту, но это совершенно не стоит компромисса с увеличением времени загрузки и прерываемым стримингом.

Вам стоит использовать видео 720p с низкой частотой кадров (24-25 кадров в секунду) и протестировать несколько разных битрейтов от 750k до 1250k. Также есть несколько хаков, которые помогут скрыть низкое качество видео, но о них чуть позже.

Используйте наложение для скрытия артефактов

Если вас не радует качество вашего видео, или же у видео, устраивающего вас качества, есть проблемы с плавностью, вам стоит попробовать добавить слой-наложение к видео, что поможет замаскировать его качество. Это легко делается путем добавления абсолютно спозиционированного div сразу после видео или с использованием псевдо-элемента ::after в контейнере видео.

Вам надо применить к этому элементу свойство CSS pointer-events: none;, чтобы он не препятствовал управлению проигрыванием видео.

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

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

Ограничивайте общий размер и длину видео

Низкий битрейт помогает обеспечить плавность воспроизведения видео без пауз для буферизации, но нельзя забывать о том, что пользователи приходят на сайт не для того, чтобы смотреть фоновое видео. Не стоит рассчитывать на то, что они будут рады скачать 20 мегабайт двухминутного видео.

Всегда ограничивайте длину вашего видео в рамках 30–40 секунд, а лучше еще более короткий момент, бесшовно закольцованный и выглядящий как длинное видео, но размером не больше 1–2 мегабайт. Немного рекламы: вы можете найти несколько неплохих закольцованных видео на BG Stock, этот видеосток я создал специально для использования видео в качестве фона на сайтах (впрочем, хватает и других видеостоков).

Избегайте чрезмерного движения

Ключевое слово в сочетании “фоновое видео” — “фоновое”. Видео играет вспомогательную роль по отношению к контенту сайта и мы должны обеспечить, чтобы оно не перетягивало внимание на себя. Фоновые видео должны быть ненавязчивыми и плавными, чтобы не отвлекать пользователей от того, для чего они пришли на сайт. А, значит, надо избегать быстрого или чрезмерного панорамирования, трясущейся/нестабилизированной съемки и внезапного обрыва видео.

Обеспечьте достаточный контраст для текста на переднем плане

Если на фоне видео есть текст, важно, чтобы он был читаемым. Если цвет текста сталкивается с видео, надо добавить наложение, чтобы выделить текст или же добавить тексту тень или фоновый цвет.

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

Обеспечьте заполнение фоном всего контейнера

В CSS3 есть отличное и широко известное свойство background-size и одно из его возможных значений cover позволяет фоновому изображению занимать столько пространства, чтобы закрывать весь элемент, ни больше и ни меньше, сохраняя при этом оригинальное соотношение сторон.

И есть менее известное свойство object-fit, позволяющее проделывать тот же трюк с элементами DOM, что является отличным способом обеспечить заполнение нашим видео контейнера. К сожалению, поддержка в браузерах этого свойства пока недостаточна (привет, IE!), поэтому приходиться использовать полифилл или JavaScript для достижения такого поведения.

Самый простой вариант: jQuery плагин jQuery Background Video (написанный автором этой статьи — Энгусом Расселом), который берет все эти заботы на себя, а также делает несколько других полезных вещей. Это не единственный плагин jQuery для фонового видео.

Адаптируйте для разных устройств

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

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

Как вы это сделаете зависит от вас — вы можете спрятать видео на маленьких экранах с помощью медиа-запроса или удалив видео для всех устройств iOS/Android, после проверки пользовательского агента с JavaScript. Плагин jQuery Background Video делает это по умолчанию.

Не зацикливайте видео навсегда

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

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

Вышеупомянутый плагин jQuery Background Video позволяет настроить остановку воспроизведения видео через указанное время.

Добавьте кнопку паузы

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

Мы можем легко добавить кнопку паузы с помощью JavaScript — а в jQuery Background Video эта кнопка добавляется по умолчанию и вам надо лишь определиться с ее размещением и стилями.

Предусмотрите затухание

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

Мы можем сделать это, добавив изображение в качестве фона для элемента, содержащего <video> и задав видео прозрачность 0 по умолчанию (1 при начале воспроизведения), а также добавив CSS-переход свойства прозрачности. Это тоже есть в плагине jQuery Background Video.

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

Правила создания рекламных материалов для Видеосети Яндекса — Требования к рекламным материалам — Рекламные технологии Яндекса

1. Требования к видео материалам в Яндекс.Дисплее
2. Требования к видео материалам в Яндекс.Директе

Требования к видео материалам в Яндекс.Дисплее

При создании рекламных макетов необходимо строго следовать техническим требованиям Яндекса, описанным ниже. Готовые материалы нужно присылать не позднее, чем за семь рабочих дней до старта рекламной кампании. В случае, если материалы присылаются позднее, Яндекс не гарантирует корректный и своевременный запуск рекламной кампании.
Для размещения рекламы информационной продукции, подлежащей классификации в соответствии с требованиями ФЗ «О защите детей от информации, причиняющей вред их здоровью и развитию» от 29.12.2010 № 436, в макете обязательно должна указываться категория данной информационной продукции.
При размещении рекламных материалов Яндекс вправе предъявить дополнительные требования к рекламным материалам, не предусмотренные настоящим документом. В частности, в случае использования нестандартных рекламных возможностей или графических решений.

Мультиролл, in-page видео, interstitial

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

In-page видео — рекламный ролик, который проигрывается на текстовых страницах сайтов Видеосети Яндекса, при условии отображения более 50% площади такого ролика на соответствующей странице.

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

Основные требования к мультироллу, in-page видео, interstitial:

Частота кадров: от 20 до 30 кадров/сек.
Соотношение сторон и разрешение:
— кодеки: h364, vp6f, vp8, theora
— рекомендуется соотношение сторон 16:9
— высота ролика не должна превышать его ширину
— минимальный размер по ширине 640 пикселей
— минимальный размер по высоте 240 пикселей
— количество видеопотоков: 1
Формат звука:
— кодеки: aac, mp3, vorbis
— минимальное качество 44 kHz, 16 bit, stereo
— количество звуковых дорожек: 0 или 1
Размер файла: до 60 Мб
Продолжительность видеоролика:
— максимальная длина ролика — 30 секунд
— рекомендуемая длина ролика — 15 секунд
Поддержка VPAID — уточняйте у вашего менеджера.
Возможно размещение мультиролла без ссылки на сайт рекламодателя.
Картинка для мультиролла с интерактивом:
— формат файла — jpg, png
— максимальный вес — 244 Кб
— размер файла — от 200×200 пикселей
Возможно добавление бегущей строки с общей длиной текста до 200 символов.

Если в видео используется текст, он должен соответствовать требованиям:
— Минимальный размер шрифта — 18 пикселей для разрешения 640 × 360. Для видео с другим расширением должно выдерживаться аналогичное соотношение размера шрифта и разрешения. При таком размере шрифта текст будет легко читаться даже в небольших рекламных блоках.
— Текст должен четко отображаться, легко читаться и размещаться на контрастном фоне, не должен сливаться с другими элементами дизайна.
— Текст должен быть набран простым, не тонким шрифтом из линий одинаковой ширины без засечек.
— Шрифт должен быть невытянутым, с соотношением высоты к ширине не больше чем 1,5:1.

Предупреждения, наложенные поверх других элементов дизайна, должны размещаться на специальной плашке для контрастности. Текст предупреждений должен быть набран простым рубленым шрифтом.

Требования к видео материалам в Яндекс.Директе

Требования к содержанию и оформлению видеоматериалов.

Технические требования к видеоматериалам:

Формат	MP4, WebM, MOV, QT, FLV, AVI
Размер	не более 100 Мб
Длительность для Видеообъявлений (CPC)	от 14,5 до 60 c Вы можете загрузить видеоролик длительностью до 60 с, но показаны будут только первые 15 с.
Длительность для Видеоаукциона (CPM)	от 6 до 60 с
Соотношение сторон	16:9
Минимальное разрешение	640×360 пикселей
Частота кадров	от 20 до 30 кадров/с
Видеокодеки	H.264, VP6 °F, VP8, Theora
Количество видеодорожек	1
Минимальное качество	44 кГц, 16 Кбит/c, стерео
Аудиокодеки	AAC, MP3, Vorbis
Количество аудиодорожек	не более 1

Какой бывает HTML5-стриминг (и почему mp4-стриминга не существует)

Нередко клиенты спрашивают, умеет ли наш сервер «mp4-стриминг в HTML5». В 99% случаев спрашивающий не понимает о чём говорит. В этом сложно винить клиентов: из-за путаницы с терминами, технической сложности и большого разнообразия вариантов стриминга запутаться очень легко.

В этой статье мы расскажем, какой бывает HTML5-стриминг, какие варианты хорошие, и почему, чёрт побери, нельзя говорить «mp4-стриминг».

▍Термины

HTML5-видео — это когда вы вставляете в веб-страницу тег <video> и указываете ему какой-то src. HTML5-стриминг — это то же HTML5-видео, но когда в src не готовый файл, а постоянно обновляющийся видеопоток. Ролик на Ютубе — это HTML5-видео, трансляция в Твитче — HTML5-стриминг.

Тегу <video> неважно, как видеопоток формируется и передаётся, и сможет ли браузер его проиграть. Главное, чтобы в src была ссылка на какой-то видеопоток. Говоря техническим языком, спецификация ничего не говорит о том, какие протоколы, транспорты и кодеки поддерживаются в HTML5-видео.

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

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

Примеры протоколов: RTSP, RTMP, HTTP, HLS, IGMP.

Транспорт, или транспортный контейнер, или контейнер — это то, как сжатое видео упаковывается в байты для передачи от одного участника к другому (по какому-то протоколу).
Примеры контейнеров: MPEG-TS, RTMP, RTP.

Обратите внимание, что RTMP оказался и в протоколах, и в транспортах. Это потому, что в описании RTMP есть спецификация и того, что должны слать друг другу стороны, чтобы видео потекло (т. е. протокол), и того, как упаковывать видео (т. е. транспорт). Так бывает не всегда. Например в протоколе RTSP видео упаковывается в транспорт RTP.

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

Примеры кодеков: h364, aac, mp3.

Из-за того, что термин многозначный, возникает путаница с названиями. Например, H.264 — это стандарт того, как упаковать поток огромных сырых видеокадров в очень мало байтов, libx264 — это библиотека для сжатия по этому стандарту, а ещё есть одноимённый софт под Винду, который умеет декодировать h364 и проигрывать его на экране.

Итак, в спецификации HTML5 не описаны протоколы, транспорты и кодеки. Поэтому авторы браузеров сами выбирают, что поддерживать, а под «HTML5-стримингом» подразумевают разные вещи.

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

▍HLS

HLS — это h364-видео и aac- или mp3-аудио, упакованное в транспорт MPEG-TS. Поток разбивается на сегменты, описанные в m3u8-плейлистах, и раздается по HTTP. HLS поддерживает мультибитрейтные потоки, Live/VOD. Вариант очень простой, но в то же время имеет много деталей, из-за чего на разных устройствах работает по-разному.

Разработали HLS в Эппле, поэтому изначально он работал только в Сафари на iOS и MacOS. Даже Сафари на Windows не умел играть HLS (когда еще была версия под Win).

Тем не менее, сейчас HLS умеют проигрывать все телевизионные приставки и даже почти все устройства на Андроиде.

Но не всё гладко. Производители сторонних плееров плюнули на стандарт Эппла в части донесения разных аудиодорожек и добавили проигрывание всего что есть в обычном MPEG-TS: mpeg2 video, mpeg2 audio и т. п. Из-за этого приходится отдавать разные форматы плейлистов для разных плееров.

▍MPEG-DASH

MPEG-DASH — обычно это h364/h365-видео и aac-аудио, упакованное в транспорт mp4, или vp8/vp9, упакованное в WebM, хотя стандарт и не привязан к конкретным кодекам, протоколам и транспортам. Как и в HLS, поток может разбиваться на сегменты, но это необязательно. Вместо плейлистов — MPD-манифест в XML.

MPEG-DASH во многом похож на HLS. Возможно, он даже популярнее, ведь такие гиганты как Ютуб и Нетфликс уже несколько лет используют его как основной способ раздачи контента.

MPEG-DASH хорош тем, что в большинстве браузеров работает нативно, через MSE (о том, что это такое, — чуть ниже). Для него даже нет реализации на Флеше — это честный, бескомпромиссный HTML5.
Определенно, MPEG-DASH — самый настоящий HTML5-стриминг, за ним будущее.

▍MSE

Когда стало ясно, что Флеш всё-таки умрёт (после сотни ложных похорон), ребром встал вопрос о том, что придёт ему на смену. Хорошо было бы получить в браузерах возможность проигрывать видео по качеству и удобству близко к тому, что умеет Флеш (а он это делает всё-таки хорошо).

Во Флеше давно появился очень удобный механизм для универсального проигрывания разных вариантов — appendBytes. Суть в том, что пользовательский код сам как хочет скачивает кадры сжатого видео, упаковывает в оговоренный контейнер (с Флешем это flv) и засовывает в видеопроигрыватель. Т. е. протокол и транспорт реализуются в пользовательском коде, запускаемом в браузере.

MSE (Media Sources Extensions) — это расширение спецификации HTML5, которое позволяет делать то же, что делает appendBytes во Флеше. К сожалению, MSE намного сложнее как в понимании, так и в реализации.

MPEG-DASH, созданный на его базе, ещё хитрее, поэтому работать с ними то ещё удовольствие: тонны XML, парсинг бинарных контейнеров в Яваскрипте, непродуманные на этапе дизайна вопросы нарезки на сегменты — всё как мы любим, всё что нужно для единой безглючной реализации во всех браузерах.

Интересно, что MSE работает не только с MPEG-DASH, но и с HLS. Существует реализация hls.js, которая скачивает HLS-плейлисты, скачивает MPEG-TS-сегменты, перепаковывает их в нужный для MSE формат и играет через MSE. Эппл даже сделала шаг в сторону совместимости с MPEG-DASH — использование mp4-контейнеров в HLS.

К концу 2017 года Флеш скорее всего умрёт окончательно, и уже сегодня можно смело начинать проект с MPEG-DASH.

▍WebRTC

Во Флеше была сделана годная попытка в одной технологии реализовать и риалтайм-общение, и массовый броадкастинг. К сожалению, в HTML5 так не вышло. Для просмотра трансляций у нас есть MSE, а для видеозвонков — WebRTC.

WebRTC — это SIP в браузере: способ организовать аудио- и видеоканал и канал данных между двумя браузерами при посредничестве сервера.

Технология не предназначена для стриминга, но в принципе может и его, так что было бы неправильно забыть про него. WebRTC тоже считается HTML5, потому что вроде как ничего кроме Яваскрипта в браузере не требует. Зато требует наличия последних версий обоих популярных браузеров, а с Эджем пока вообще не совместимо.

Путаницу в понимании WebRTC вносит его использование в торрент-доставке телевидения. Суть в том, что браузеры через WebRTC организуют сеть каналов данных, а дальше по этой сети раздаются HLS- или MSE-сегменты видео, а проигрывание происходит через Флеш или MSE. Т. е. WebRTC — для доставки, MSE — для проигрывания. Важно не путать это с использованием WebRTC для проигрывания видео.

▍Так что там с mp4-стримингом?

Любой современный браузер скорее всего сможет по протоколу HTTP запросить файл, упакованный в транспорт mp4 и содержащий внутри видео, сжатое кодеком h364/aac. И даже попытаться проиграть его. Это самый удобный, понятный и стандартный вариант проигрывания файлов. Лежит себе файлик на диске, nginx его отдает. Код, проигрывающий mp4 в браузерах достаточно хорош. Например, он умеет даже скачивать куски видео по необходимости (в отличие от Флеш-плеера, который скачивает видео целиком).

Вокруг h364 сложилось немало шумихи по поводу его «закрытости» и «несвободности». Так что есть «открытая» альтернатива, которую форсит Гугл — видеокодеки vp8 и vp9, упакованные в транспорт WebM. WebM — это подмножество транспорта mkv (a. k. a. Матрёшка), который очень похож на mp4 по сути, но отличается от него своей «бинарностью».

Именно отсюда растут ноги у такого явления как «mp4-стриминг», который устроен как WebM. Дело в том что в обычном mp4 в самом начале указывается размер всего контейнера. Поэтому, если мы хотим отдать по обычному mp4 прямой эфир, у нас ничего не получится. А чтобы всё-таки получилось и можно было создавать mp4 без фиксированного конца, придуман следующий ход: сначала пишется mp4 без кадров, а потом в конце подписываются блоками по несколько секунд фрагменты с кадрами. Это называется mp4 fragmented, или mp4 streaming.

По сути это никакой не стриминг, а костыль, позволяющий создать его видимость. Mp4 — отличный формат для скачивания видео, но негодный для стриминга, так что про него можно просто забыть и никогда не использовать термин «mp4-стриминг».

▍Выводы

Хорошие варианты HTML5-стриминга: MPEG-DASH и HLS. Они подходят и для мобильных устройств, и для ПК, и для приставок.
Флеш всё-таки умрет, и MSE уже сейчас занимает его место.
WebRTC — HTML5 технология, в первую очередь, для общения, а не для телевизионного вещания.
Не приносите в веб старые кодеки и не пытайтесь доставлять mp2video и mp2audio по HLS, даже если ваш плеер это умеет.
Никогда не говорите «mp4 стриминг». Пожалуйста.

Охватная видеореклама в Яндекс.Дисплее — Видеореклама — Реклама на Яндексе

Форматы рекламных материалов:

Мультиролл — рекламный ролик, который проигрывается до или после показа видеоконтента или прерывает показ этого контента на любой из площадок Видеосети Яндекса. Длительность показа рекламного видеоролика — до 30 (тридцати) секунд.

In-page видео — рекламный ролик, который проигрывается на текстовых страницах сайтов Видеосети Яндекса, при условии отображения более 50% площади такого ролика на соответствующей странице.

Interstitial — рекламный ролик, который проигрывается внутри мобильного приложения перед загрузкой контента мобильного приложения или при смене контента в открытом мобильном приложении

Формат размещаемых рекламных материалов определяется Яндексом в одностороннем порядке.

Рекламные материалы размещаются:
- на сайтах Медийной Сети Яндекса и сайтах партнеров Рекламной Сети Яндекса (РСЯ),
- в приложениях Медийной Сети Яндекса и партнеров Рекламной Сети Яндекса (РСЯ) для устройств смарт ТВ,
- в мобильных приложениях Медийной Сети Яндекса и партнеров Рекламной Сети Яндекса (РСЯ).
Динамическое размещение. Рекомендуемая частота настраивается по умолчанию RF=3 в день. Максимальный период для задания частоты — 14 календарных дней. Возможна настройка частоты по согласованию с рекламодателем.
Географический таргетинг — Россия.
Возможны настройки:
a. географический таргетинг на регионы России;
b. социально-демографический таргетинг;
c. аудиторные интересы;
d. поисковый ретаргетинг;
e. поведенческий ретаргетинг;
f. таргетинг по категориям пользователей;
g. Light TV viewers, Heavy TV viewers.
h. Таргетинг по устройствам и ПО на:
  – Компьютерах, смартфонах и планшетах;
  – Смартфонах и планшетах;
  – Смартфонах, планшетах и смарт ТВ;
  – Смарт ТВ;
  – Компьютерах и смарт ТВ;
i. Сегменты сервиса «Аудитории».
j. Мобильные Операционные системы (используется вместе с таргетингом по устройствам и ПО на: смартфонах и планшетах).
По согласованию с Яндексом возможно отключение показов в формате interstitial.
По согласованию с Яндексом возможно отключение показов в формате in-page видео.

Изменить формат видео для сайта, телефона, видеоплеера :: SYL.ru

Любому пользователю компьютера придется или уже приходилось изменить формат видео. Поскольку их существует большое количество, а на компьютере не всегда установлены программы, считывающие то или иное расширение, процедуры конвертирования не избежать практически никому. Интернет-сайты также предъявляют свои требования к качеству и формату загружаемых роликов. Любителям поделиться в сети отснятым материалом знания о том, как изменить формат видео, пригодятся не меньше, чем владельцам iPhone, так как это устройство открывает видео только в формате MP4 (и никаких AVI).

Но не стоит пугаться такого процесса, как конвертация. Большинство программ для этой процедуры обладают доступным и понятным интерфейсом. Чтобы не быть голословными, представим пару таких конвертеров.

Программа для изменения видео – первый вариант

Все чаще на рынке программных продуктов появляются российские разработки. Одним из подобных вариантов является конвертер «ВидеоМАСТЕР». Довольно мощный инструмент с большим функционалом помимо преобразования формата видео. Программа поддерживает конвертирование многих расширений, вплоть до очень редких. Функциональность ПО не ограничивается преобразованием форматов. Помимо этого, с помощью «ВидеоМАСТЕР» можно записывать DVD-диски, сделать FLV и SWF-видео для своего сайта или блога, редактировать определенные фрагменты записи, пользоваться функцией монтажа, накладывать логотипы субтитры. Но вернемся к конвертированию. Сам процесс начинается с добавления файла в программу довольно обычным путем: «Файл», «Открыть». После выбора ролика необходимо определиться, в какой формат преобразуется видео на выходе. Список доступных расширений находится в нижней панели программы. Из всплывающего меню форматов выбираете необходимый вам, в правом нижнем углу нажимаете пиктограмму «конвертировать», и начинается процесс преобразования. Не забывайте указать программе место сохранения нового видеоролика.

Изменить формат видео – вариант второй

Еще один представитель на рынке программного обеспечения для смены формата – Format Factory.

Распространяется эта программа бесплатно, что согревает душу и карман. Обладает несомненным плюсом в виде русскоязычного интерфейса. После установки занимает довольно небольшое место на жестком диске, что никак не влияет на полноту набора функций. При помощи этой программы можно выполнять такие действия, как изменить разрешение видео с любого на mp4, avi, rmvb, gif, wmv, mkv, mpg, vob, mov, flv, swf; преобразовывать фото (jpg, png, ico, bmp, tif, gif, pcx, tga). В Format Factory можно работать с аудиофайлами, монтажом видео. Алгоритм действий в программе такой же, как и в предыдущем варианте. То есть вы добавите видеофайл, выберете необходимое расширение, начнете конвертацию, указав место сохранения ролика на выходе.

Окно Format Factory не перегружено лишними пунктами меню и подменю, поэтому разобраться в том, как изменить формат видео в этой программе, будет довольно просто.

Заключение

Каждая из представленных программ обладает своими достоинствами и недостатками. Впрочем, последних не так много. Различие между первым и вторым ПО – набор функционала. «ВидеоМАСТЕР» – более мощная программа с широкими возможностями. Но если перед вами стоит вопрос о том, как изменить формат видео, и ничего более не интересует, то вполне можно обойтись Format Factory.

Для сайта формат видео – Правила создания рекламных материалов для Видеосети Яндекса — Требования к рекламным материалам — Рекламные технологии Яндекса

Как правильно оптимизировать видео для сайта 🎥

Зачем оптимизировать видео

Размер и формат видео

Чем конвертировать видеофайлы

Основные понятия

Популярные конвертеры видео

Практические рекомендации по оптимизации

Как сделать фоновый ролик

Рекомендации для YouTube

Вывод

Как оптимизировать видео для сайта – База знаний Timeweb Community

Выбираем формат

I Оптимизация видео

II Оптимизация сайта под видео

Советы по SEO

Заключение

10 рекомендаций по использованию фонового видео на сайте

Сжимайте видео, насколько это возможно

Используйте наложение для скрытия артефактов

Ограничивайте общий размер и длину видео

Избегайте чрезмерного движения

Обеспечьте достаточный контраст для текста на переднем плане

Обеспечьте заполнение фоном всего контейнера

Адаптируйте для разных устройств

Не зацикливайте видео навсегда

Добавьте кнопку паузы

Предусмотрите затухание

Правила создания рекламных материалов для Видеосети Яндекса — Требования к рекламным материалам — Рекламные технологии Яндекса

Требования к видео материалам в Яндекс.Дисплее

Требования к видео материалам в Яндекс.Директе

Какой бывает HTML5-стриминг (и почему mp4-стриминга не существует)

▍Термины

▍HLS

▍MPEG-DASH

▍MSE

▍WebRTC

▍Так что там с mp4-стримингом?

▍Выводы

Охватная видеореклама в Яндекс.Дисплее — Видеореклама — Реклама на Яндексе

Изменить формат видео для сайта, телефона, видеоплеера :: SYL.ru

Добавить комментарий Отменить ответ

Рубрики