Формат для видео для сайта


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.

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

prgssr.ru

Видеофон для сайта | htmlhook.ru

По сути, видео — это последовательная визуализация кадров. Видео как фон для сайта стал развиваться в течении 2014 года. Обычно видео в интернете информация. Сайты с фоновым видео имеют особое внимание. Видео для фона сайта можно сделать скриптами или ведеотегом HTML5. В этой статье примеры и советы, что нужно учитывать чтобы правильно сделать видео как фон веб-страницы.

Оглавление:
  1. Советы
  2. Скачать видео для фона
  3. Применить видео для фона
  4. На гребле волны

Озеро Самарцы - Отдых в Крыму для всей семьи!Адрес: Крым, Белогорский район, с. ЗуяТел: +7(978)1176627 http://samartsy.ru/

Советы

Читайте также: Создать мультимедийный интерфейс

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

Обычно для фонового видео установлено значение “auto-play”. Как только пользователь откроет веб-сайт, видео должно воспроизводится автоматически. По умолчанию лучше отключить звук, давая пользователю возможность включить его при необходимости.

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

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

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

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

Важно думать о балансе между качеством и весом видео для любого устройства.

К началу

Скачать видео для фона

Если Вы решили придать новый вид своему сайту, использовать на сайте видео вместо фона, вот три ресурса которые Я рекомендую:

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

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

Положительные аспекты видео для фона на вашем сайте.

Плюсы видео для фона

  • Человек устроен таким образом, чтобы обращать внимание на видео.
  • Как и любое творчество, видеофон должен придать вашему сайту современный дизайн.
  • Сила видео, инструмент который помогает преподнести пользователю стиль бренда.
  • Веб-сайтам предлагающие продукты или услуги, видео может быть использовано как реклама.

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

Минусы видео для фона

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

Применить видео для фона

Давайте посмотрим на некоторые примеры использования видео для фона и посмотрим как это работает.

На гребле волны

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

На главной странице сайта применить видео в качестве фона

Еще два примера, как использовать видео для фона сайта:

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

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

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

htmlhook.ru

Как сделать видеоплеер для сайта Без Плагинов за 5 минут?

Доброго времени суток всем читателям – Sozdaiblog.ru!

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

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

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

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

Именно такая ситуация возникла у моего читателя. Чтобы решить эту задачу я согласился ему помочь.

Как и в предыдущей статье всё разрешилось при помощи одного из тегов, позаимствованных у HTML5.

Его публичное имя — <video>.

Итак.

 

Как работает тег <video>.

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

 

<video controls> <source src="1.mp4" type="video/mp4" /> <source src="1.ogg" type="video/ogg" /> <source src="1.webm" type="video/webm" /> </video>

 

 

 

ДЕМО

 

Теперь давайте разберёмся, что и как используется в данном коде.

Для начала сразу скажу, что не все браузеры могут читать одинаковые форматы видео. Поэтому в вышеупомянутом коде присутствуют сразу три формата одного и того же ролика.  Делается это для того, чтобы Ваше видео могло проигрываться во всех современных браузерах. Основными стандартами которых являются mp4; ogg; webm.

 

Таблица совместимости форматов.

Browser .mp4 .webm .ogg
Mozzila Firefox 3.6
Opera 10.63
Google Chrome 8.0
Apple Safari 5.0.3 (with QuickTime)
Microsoft IE 9 Beta

 

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

Так же в данном коде присутствует атрибут «controls». Он подключает  панель управления  видеоплеером.

Ну и соответственно width и height, которые отвечают за размер окна воспроизведения.

На атрибут type можете не обращать особого внимания, так как он присутствует в коде, лишь в помощь браузерам для правильного сопоставления форматов.

Если Вам потребуется автозапуск видеоплеера при попадании посетителя на Веб-страницу, то для этого необходимо рядом с атрибутом  «controls» через пробел дописать «autoplay».

В принципе, здесь можно поставить точку, все основные моменты разобраны. Единственное, что Вам, возможно, потребуется сделать – это в файл .htaccess добавить следующий код:

 

AddType video/ogg .ogg AddType video/mp4 .mp4 AddType video/webm .webm

 

Это нужно для Вашего сервера.

В завершении этого поста мне снова захотелось порадовать Вас сладкой плюшкой.

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

 

 

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

 

P. S.

Для конвертирования видео Вы можете использовать любой онлайн сервис. Лично мне понравился — Video Converter. Не пугайтесь что он не русскоязычный, там есть выбор перевода.

Если возникнут вопросы, пожалуйста, задавайте!

На сегодня это всё. До следующей встречи…

 

С уважением, Денис Черников!

Интересное по теме:

Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:

sozdaiblog.ru

Автоматическая конвертация видео для сайта

По данной схеме возможно автоматически конвертировать видео файлы в воспроизводимые в браузере форматы ogv, mp4, webm:

  • создание базы данных видео файлов

  • настройка скрипта

  • настройка запуска по расписанию (cron)

Создание базы данных видео файлов

video-scheme.sql -- Таблица с исходными видео файлами CREATE TABLE `videos` ( `id` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT, `name` VARCHAR(64) NOT NULL DEFAULT '', -- название `filename` VARCHAR(255) NOT NULL DEFAULT '', -- относительный путь к исходному файлу `thumbnail` VARCHAR(255) NOT NULL DEFAULT '', -- картинка предпросмотра (создается) `datetime` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, -- дата PRIMARY KEY (`id`), UNIQUE KEY `idx_filename` (`filename`) ) ENGINE=INNODB;   -- Таблица с перекодированными видео CREATE TABLE `convert_videos` ( `id` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT, `video_id` INT(11) UNSIGNED NOT NULL, -- внешний ключ на videos `format` ENUM('ogv','mp4','webm') NOT NULL, -- формат `filename` VARCHAR(255) NOT NULL, -- относительный путь к сконвертированному файлу PRIMARY KEY (`id`), UNIQUE KEY `idx_video_format` (`video_id`,`format`) ) ENGINE=INNODB;   -- Таблица с логом перекодирования CREATE TABLE `convert_log` ( `id` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT, `datetime` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, `action` ENUM('init','ffmpeg','other') NOT NULL, `format` ENUM('-','ogv','mp4','webm','thumbnail') NOT NULL DEFAULT '-', `src` VARCHAR(255) NOT NULL DEFAULT '', `code` SMALLINT(5) NOT NULL DEFAULT '0', `message` VARCHAR(32) NOT NULL DEFAULT '', PRIMARY KEY (`id`) ) ENGINE=INNODB;

Bash-скрипт для конвертации

video-converting.sh #!/bin/bash srcDir='/path/to/video/src/' destDir='/path/to/webserver/root/' destOffset='data/video/' maxDaysLeft=30   videoFormats='mp4 ogv webm'     # action - код логирования (в т.ч. для уровня) # message - текст # code - результат (0 - как правило, успех)   function log() {   addslashes "$1" action=$addslashes   addslashes "$2" format=$addslashes   addslashes "$3" src=$addslashes   addslashes "$4" message=$addslashes   addslashes "$5" code=$addslashes   query="INSERT INTO convert_log (action, format, src, message, code) VALUES ('$action', '$format', '$src', '$message', '$code')" mysql -u$dbuser -p$dbpass -h$dbhost $dbname -e "$query" }   function getVideoInfo() { videoId=$1 query="SELECT filename FROM videos WHERE id = $videoId" filename=`mysql -s -N -u$dbuser -p$dbpass -h$dbhost $dbname -e "$query"` md5 $filename }   function convertVideo() { videoId=$1 format=$2   getVideoInfo $videoId   if [ -f "$destDir$destOffset$md5.$format" ]; then log "other" "$format" "$filename" "File already exists" 1 return fi   # различные параметры кодирования # -b - видеобитрэйт # - ab - аудиобитрэйт # - threads - количество потоков # - qscale - качество (1 - макс, 255 - мин) # -y - перезапись видео case "$format" in "ogv") echo y | ffmpeg -i "$srcDir$filename" -mbd rd -flags +ilme+ildct -trellis 2 -cmp 2 -subcmp 2 -g 300 -b 2500k -ab 192k -threads 8 -y "$destDir$destOffset$md5.$format" ;; "mp4") echo y | ffmpeg -i "$srcDir$filename" -mbd rd -flags +ilme+ildct -trellis 2 -cmp 2 -subcmp 2 -g 300 -b 2500k -ab 192k -threads 8 -vcodec libx264 -y "$destDir$destOffset~$md5.$format" qt-faststart "$destDir$destOffset~$md5.$format" "$destDir$destOffset$md5.$format" rm -f "$destDir$destOffset~$md5.$format" ;; *) echo y | ffmpeg -i "$srcDir$filename" -mbd rd -flags +ilme+ildct -trellis 2 -cmp 2 -subcmp 2 -g 300 -qscale 1 -ab 192k -threads 8 -y "$destDir$destOffset$md5.$format" ;; esac   result=$? if [ "$result" != "0" ]; then rm "$destDir$destOffset$md5.$format" else query="INSERT INTO convert_videos (video_id, format, filename) VALUES ($videoId, '$format', '$destOffset$md5.$format')" mysql -s -N -u$dbuser -p$dbpass -h$dbhost $dbname -e "$query" fi log "ffmpeg" "$format" "$filename" "Make video" "$result" }   function makeThumbnail() { # ffmpeg -i ../data/video-src/intro.avi 2>&1 | grep -o -P "(?<=Duration: ).*?(?=,)" # ffmpeg -i ../data/video-src/intro.avi -vf "thumbnail" -frames:v 1 thumb.png videoId=$1   getVideoInfo $videoId   echo y | ffmpeg -i "$srcDir$filename" -qscale 1 -ss 00:00:5.000 -f image2 -vframes 1 -y "$destDir$destOffset$md5.jpg" result=$? if [ "$result" != "0" ]; then rm "$destDir$destOffset$md5.jpg" else query="UPDATE videos SET thumbnail = '$destOffset$md5.jpg' WHERE id = $videoId" mysql -s -N -u$dbuser -p$dbpass -h$dbhost $dbname -e "$query" fi log "ffmpeg" "thumbnail" "$filename" "Make thumbnail $filename" "$result" }   # EXECUTION START cd $(dirname $(readlink -f $0)) source bash-lib/common.sh source bash-lib/db_config.sh amIAlone if [ $? = "1" ]; then echo 'Script is already running' exit 1 fi   if [ ! -d "$srcDir" ]; then log "init" "-" "-" "Can not open source dir $srcDir" 1 exit 2 fi   if [ ! -d "$destDir$destOffset" ]; then log "init" "-" "-" "Can not open dest dir $destDir$destOffset" 1 exit 2 fi   # Thumbnails query="SELECT id FROM videos WHERE thumbnail = '' AND datetime >= ADDDATE(NOW(), INTERVAL -$maxDaysLeft DAY) LIMIT 10 " videoIds=`mysql -s -N -u$dbuser -p$dbpass -h$dbhost $dbname -e "$query"`   if [ -n "videoIds" ]; then for videoId in $videoIds; do makeThumbnail "$videoId" done fi   # получаем для каждого формата имя файла, который еще не был сконвертирован for format in $videoFormats; do query="SELECT id FROM videos WHERE id NOT IN ( SELECT videos.id FROM videos JOIN convert_videos ON (videos.id = convert_videos.video_id) WHERE format = '$format' ) AND datetime >= ADDDATE(NOW(), INTERVAL -$maxDaysLeft DAY) LIMIT 10 " videoIds=`mysql -s -N -u$dbuser -p$dbpass -h$dbhost $dbname -e "$query"` if [ -n "videoIds" ]; then for videoId in $videoIds; do convertVideo "$videoId" "$format" done fi done bash-lib/common.sh function addslashes() { addslashes=`echo "$1" | sed "s/'/\\\\'/g"` }   function md5() { md5=`echo -n "$1" | /usr/bin/md5sum | cut -f1 -d" "` }   # проверка на наличие уже запущенной копии function amIAlone() { lock_file=`pwd`"/.tv_lock" do_exit() { RETURN_VALUE=$? rm -f "$lock_file" exit $RETURN_VALUE } lockfile -r 0 "$lock_file" || return 1 trap do_exit EXIT return 0 } bash-lib/common.sh dbname='data_base_name' dbuser='db_user' dbpass='db_password' dbhost='db_host'

Настройка скрипта

bash-lib/common.sh - параметры подключения к БД.

video-converting.sh:

Параметр Описание
srcDir абсолютный путь к исходным файлам с видео
destDir абсолютный путь к конечным файлам с видео
destOffset относительный путь - будет записан в БД и выводиться на сайте
maxDaysLeft количество дней, в течение которых данный файл будет обрабатываться
videoFormats конечные видео-форматы

Запуск по расписанию

Данный скрипт возможно повесить на cron:

*/2 * * * * /path/to/script/video-converting.sh > /dev/null 2>&1

Не следует беспокоиться об одновременном запуске нескольких копий - в скрипте есть проверка.

pushorigin.ru

Поддерживаемые форматы аудио и видео

175

Веб-программирование --- HTML5 --- Поддерживаемые форматы аудио и видео

В рассмотренных ранее примерах использовались два популярных стандарта: MP3 для аудио и H.264 для видео. Этого достаточно для Chrome и Safari, но не для других браузеров.

По поводу войны мультимедийных форматов для HTML5 у веб-разработчиков имеется несколько сердитых вопросов. Таких как, действительно ли аудио и видео HTML5 находятся в состоянии безнадежной конфронтации и на ком лежит главная вина за это? Но на эти вопросы нет ясных и однозначных ответов. У каждого разработчика браузеров есть свои оправдания и объяснения, каким стандартам мультимедиа отдать предпочтение.

Небольшие разработчики, такие как Mozilla, создатели браузера Firefox и разработчики Opera, не желают платить непомерно высокую для них цену за лицензию на использование таких популярных стандартов, как MP3 для аудио или H.264 для видео (хотя поддержка этих стандартов включена в версии Firefox 24 и выше, после солидного спонсирования от Google ;). И их трудно винить за это, ведь они предоставляют свои продукты бесплатно.

У компаний покрупнее (таких как Microsoft, Google или Apple) имеются свои оправдания почему надо избегать нелицензированных стандартов. Они жалуются, что качество работы этих стандартов будет ниже (в настоящее время они не поддерживают аппаратное ускорение) и что они не так широко используются, как запатентованные стандарты, такие как, например, H.264, который используется в камкордерах, проигрывателях Blu-Ray и во многих других разных устройствах.

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

Знакомимся с форматами

Официальный стандарт HTML5 не требует, чтобы браузеры поддерживали какой-либо конкретный аудио- или видеоформат. (Ранние версии стандарта содержали такую рекомендацию, но в результате интенсивного лоббирования она была отменена.) Вследствие этого разработчики браузеров могут выбирать форматы, какие они хотят поддерживать, несмотря на то обстоятельство, что разные форматы органически несовместимы друг с другом. Список и краткое описание основных форматов, используемых в настоящее время, приведен в таблице:

Формат Описание Расширение файла MIME тип
MP3 Самый популярный аудиоформат в мире. Но стоимость лицензии делает его непрактичным для небольших разработчиков, наподобие Opera mp3 audio/mp3
Ogg Vorbis Открытый, бесплатный стандарт, предоставляющий высококачественное сжатое аудио, сравнимое с MP3 ogg audio/ogg
WAV Первоначальный формат для сырого цифрового аудио. Не использует сжатие, поэтому файлы невероятно большого объема и непригодны для большинства интернет-приложений wav audio/wav
H.264 Промышленный стандарт для кодирования видео, особенно при работе с видео высокой четкости. Применяется в бытовых устройствах (таких как проигрыватели и камкордеры Blu-Ray), на видеообменных сайтах (таких как YouTube и Vimeo) и в браузерных модулях расширения (таких как Flash и Silverlight) mp4 video/mp4
Ogg Theora Открытый, бесплатный стандарт для видео, созданный разработчиками аудиостандарта Vorbis. Качество и производительность ниже стандарта H.264, но достаточно высокие, чтобы удовлетворить потребности большинства пользователей ogv video/ogg
WebM Новейший бесплатный видеоформат, созданный Google на основе приобретенного ими VP8. Критики доказывают, что его качество еще не на уровне видео H.264 и он может содержать скрытые связи с другими патентами, что может вызвать лавину судебных исков в будущем. Тем не менее, WebM является наилучшим выбором для будущего открытого видео webm video/webm

В этой таблице также указаны рекомендуемые расширения файлов для мультимедиа. Чтобы осознать, почему это важно, нужно понимать, что для создания видеофайла в действительности применяются три разных стандарта. Первым, наиболее очевидным, стандартом является видеокодек, применяемый для сжатия видео в поток данных. В качестве примера можно назвать такие кодеки, как H.264, Theora и WebM.

Вторым является аудиокодек, который применяется для сжатия одной или нескольких аудиодорожек. Например, для видео в формате H.264 обычно используется звук в формате MP3, а для видео Theora - звук Vorbis. Наконец, формат контейнера применяется для упаковки видео и аудио вместе с описательной информацией и, необязательно, другими безделушками типа изображений и субтитров. Часто расширение файла обозначает формат контейнера, т.е. расширение mp4 означает контейнер типа MPEG-4, расширение ogv — контейнер Ogg и т.п.

Но не все так просто, т.к. формат контейнера поддерживает несколько разных аудио- и видеостандартов. Например, популярный контейнер Matroska (mkv) может содержать видео в формате H.264 или Theora. Чтобы не усложнять этот вопрос излишними подробностями, в приведенной таблице каждый видеоформат соотнесен с наиболее употребляемым для его упаковки контейнером, для которого также обеспечивается наиболее высокий уровень поддержки для Интернета.

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

Поддержка браузерами форматов мультимедиа

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

Поддержка браузерами аудиоформатов HTML5
IE Firefox Chrome Safari Opera Safari iOS Android
MP3 9 24 5 3.1 - 3 -
Ogg Vorbis - 3.6 5 - 10.5 - -
WAV - 3.6 8 3.1 10.5 - -
Поддержка браузерами видеоформатов HTML5
IE Firefox Chrome Safari Opera Safari iOS Android
H.264 9 24 5 3.1 - 4 2.3
Ogg Theora - 3.5 5 - 10.5 - -
WebM 9 (при установке кодеков) 4 6 - 10.6 - 2.3

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

Если вы хотите, чтобы видео проигрывалось на мобильных устройствах, примите за правило кодировать его в формате H.264 Baseline Profile (а не в формате High Profile). Для телефонов iPhone и под управлением операционной системы Android следует использовать размер 640x480, а для BlackBerry — 480x360. Многие программы кодирования имеют предварительные настройки, с помощью которых можно создать видео, оптимизированное для мобильных устройств.

Множество форматов: как понравиться всем браузерам

Что делать бедному веб-разработчику со всеми этими форматами? Горькая правда состоит в том, что ни один аудио- или видеоформат не будет работать на всех браузерах. Если вы хотите поддерживать все браузеры, а поддерживать их все вы должны, вам нужно запастись мультимедийными файлами в нескольких форматах. Кроме этого, вам, скорее всего, нужно будет организовать резервное решение Flash для посетителей, которые пользуются браузерами, не признающими HTML5, такими как, например, IE8.

К счастью, элементы <audio> и <video> поддерживают достаточно хорошую систему предоставления резервных решений, которая была хорошо отлажена новаторами веб-технологий. Но, к сожалению, война форматов означает, что содержимое нужно будет кодировать, по крайней мере, дважды, что является затратным процессом по времени, процессорным ресурсам и дисковому пространству.

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

Использовать Flash в качестве основного решения, а HTML5-решение в качестве резервного

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

Использовать HTML5 в качестве основного решения, а Flash-решение — в качестве резервного

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

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

Элемент <source>

Первым шагом в обеспечении поддержки нескольких форматов будет удаление атрибута src из элемента <video> или <audio> и замена его вложенным списком элементов <source>. Например:

<audio controls> <source src="mysong.mp3" type="audio/mp3"> <source src="mysong.ogg" type="audio/ogg"> </audio>

В данном случае элемент <audio> содержит два элемента <source>, каждый из которых указывает на отдельный аудиофайл. Из указанных файлов браузер выбирает первый, формат которого он поддерживает. В частности, Opera возьмет файл mysong.ogg, a Firefox, Safari и Chrome - файл mysong.mp3.

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

Этот же метод применяется и для элемента <video>. В следующем листинге показан пример указания видеосодержимого в двух разных форматах — H.264 и Theora:

<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogv" type="video/ogg"> </video>

В этом примере следует отметить одну новую особенность. При использовании разных видеоформатов файл в формате H.264 всегда должен быть в списке первым. В противном случае он не будет проигрываться на старых устройствах iPad под управлением iOS 3x. (Эта проблема была решена в операционной системе iOS 4, но размещение файла H.264 вверху списка ничем ничему не вредит.)

Так сколько же видеоформатов следует использовать? Чтобы прикрыть все тылы необходимо использовать форматы H.264 и Theora для основного решения HTML5 и Flash для резервного. Для лучшего качества видео формат Theora можно заменить форматом WebM. Или же можно совсем разойтись и включить все версии своего видео — H.264, Theora и WebM в указанном порядке. Версия WebM идет перед версией Theora для того, чтобы браузеры, которые поддерживают эти формата, выбрали видео лучшего качества.

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

Резервное решение Flash

Испокон веков все браузеры обрабатывают нераспознаваемые теги одинаково - игнорируют их. Например, если Internet Explorer 8 встречается открывающий тег элемента <video>, он с ветерком проносится мимо него, не затрудняясь ознакомиться с атрибутом src и другими параметрами этого элемента. Но при всем этом, браузеры не игнорируют содержимое внутри неизвестного им элемента, что является важной особенностью. Это означает, что в случае следующей разметки:

<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogv" type="video/ogg"> <p>Если вы видите эту надпись, значит ваш браузер не поддерживает видео HTML5.</p> </video>

браузеры, которые не понимают HTML5, ведут себя, как будто бы они видели вот эту разметку:

<p>Если вы видите эту надпись, значит ваш браузер не поддерживает видео HTML5.</p>

Эта особенность и лежит в основе бесшовного предоставления резервного решения для старых браузеров.

Теперь, после того как мы научились вставлять резервное содержимое, надо решить, какое именно содержимое вставлять. Одним из примеров плохого резервного содержимого будет текстовое сообщение, наподобие предыдущего "Если вы видите эту надпись, значит ваш браузер не поддерживает видео HTML5". Посетители веб-сайтов считают сообщения такого типа крайне невежливыми и, скорее всего, не возвратятся на сайт, приветствующий их таким образом.

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

В следующем листинге приведен пример использования в качестве резервной решения в элементе <video> проигрывателя Flowplayer:

<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogv" type="video/ogg"> <object data="flowplayer-3.2.7.swf" type="application/x-shockwave-flash"> <param name="movie" value="flowplayer-3.2.7.swf"> <param name="flashvars" value='config={"clip":"video.mp4"}'> </object> </video>

Если же требуется, наоборот, реализовать основное решение в виде Flash, а резервное — в виде HTML, нужно просто переставить строки из предыдущего примера. Начинаем с элемента <object>, в который вставляем элемент <video> непосредственно перед закрытием тега </object>:

<object data="flowplayer-3.2.7.swf" type="application/x-shockwave-flash"> <param name="movie" value="video.mp4"> <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogv" type="video/ogg"> </video> </object>

Обычно этот подход следует применять только в том случае, если нужно расширить существующий веб-сайт на основе Flash для поддержки устройств Apple, таких как iPad. Кстати, существует по крайней мере один проигрыватель на JavaScript со встроенной возможностью резервного решения HTML5. Называется он JW Player.

professorweb.ru

Live Video для сайта / Хабрахабр

Последнее время мне и моим коллегам часто задают вопрос «Как реализовать вещание живого видео с камеры на веб сайте ?». Многие, задающие этот вопрос, заблуждаются, считая, что это можно сделать только с помощью IP-камер. Нет, такое делается и на базе недорогих USB-камер. Спецы, которые знают «как», часто имеют другое заблуждение – зачем платить за дорогую IP-камеру, когда все можно реализовать на USB-камерах за 20-30$? А допустим камеру нужно установить на улице, в другом конце здания, длинной 70м. Много ли вы знаете USB-камер с корпусом стандарта IP66 и рабочей температурой -20С? А какой длины может быть USB-кабель? Согласно Wiki максимальная длина USB-кабеля (в экране) не должна превышать 5м. А как подключить камеру на расстоянии 70м (и это по прямой, без учета изгибов кабелевода)? Можно через каждые 5м ставить usb-hub с питанием. А сколько в деньгах потянет стоимость usb-удлинителей и активных usb-hub’ов с организацией питания для них? Согласитесь, это окупит даже не одну IP-камеру. Кто-то скажет «Я поставлю, в непосредственной близости от камеры, комп в ITX исполнении и нет проблем». Да, это вариант, но в итоге стоимость «комп + USB-камера» выйдет, в лучшем случае, равной стоимости IP-камеры. А обслуживание, а бесперебойное питание? А если камеры разнесены на сотни метров, а то и на километры, например пляжи Крыма? IP-камера однозначно выигрывает! Как же лучше «выкинуть» изображение камеры на сайт? Можно конечно отдавать изображение на пользователя прямо с IP-камеры. Но IP-камеры не рассчитаны на большое количество одновременных подключений и большинство из них после 5-6-го подключения начнут «умирать», вплоть до полного зависания. А если желающих посмотреть на пляж и море десятки, а то и сотни? Проблема решается при помощи медиасервера-посредника. Статей, описывающих такое решение достаточно много, например «Потоковое видео средствами ffserver & ffmpeg». Правда в этой статье описано решение для USB-камеры, но принцип работы подходит и для IP-камер. Но подобный подход требует хороших познаний в линуксе, а самое главное – высокопроизводительного, соответственно достаточно дорого, процессора. Простенький Intel Atom с задачей транскодирования real-time видео из M-JPEG в FLV, MPEG4 или H.264 вряд ли справится. А отдавать на сайт изображение в M-JPEG кодеке – это поток ~3-4Мбит/с при картинке 640х480 с 15 кадров/с. Какая исходящая пропускная способность канала потребуется, если смотреть будут десятки пользователей? Да и «прокачать» эти самые ~3-4Мбит/с не каждый пользователь в состоянии. Есть простое решение – дополнение (Add-On) для сетевых накопителей D-Link DNS-325 & DNS-345 под названием Webcam. Все «инструменты» в нем имеются, достаточно будет произвести простейшие действия, которые я опишу ниже. Проверял только на IP-камерах D-Link, но по идее и с другими работать должно. Начнем с установки Add-On’а. Брать тут http://dlink.ua/dns или тут http://dlink.vtverdohleb.org.ua/Add-On/. Перейдите в раздел «Management / Application Management / Add Ons» и установите Add-On, соответствующий вашей модели накопителя.

Сообщения «Сторонний Add-On…» не пугайтесь, нажмите Yes.

После завершения установки запустите Add-On кнопкой Start, перейдите в раздел Applications и откройте веб-интерфейс Webcam.

Но предварительно вам потребуется настроить соответствующим образом IP-камеру. Для примера приведу настройку IP-камеры D-Link DCS-2310L. Зайдите в раздел «Setup / Audio and Video» и добавьте новый или измените существующий профиль.

Главное требование – кодек только MPEG4, с другими работать не будет. Остальные настройки на собственное усмотрение, но я бы рекомендовал следующее: 1. «Frame size & View window area» не более 800х600. Работать будет, но скорость видеопотока будет великовата для сайта. 2. «Maximum frame rate» не более 15 кадров/с, а лучше 4-7 кадров/с. Причина такая же, как и в п.1. 3. «Video quality», для данной модели камеры, лучше выбрать «Constant bit rate» 1М, а можно и меньше. Этот показатель лучше подбирать по визуальному восприятию получаемой картинки. Но, чем меньше, тем лучше. Далее перейдите в раздел «Setup / Network Setup» и запомните название «RTSP / Access name for stream» для настроенного вами профиля. В моем случае профилю 2 соответствует «live2.sdp».

«Authentication & RTSP port» оставьте без изменений. Вернемся к настройке Webcam. В поле «Cam IP» введите IP-адрес вашей камеры, в поле «RTSP name» соответствующий «RTSP / Access name for stream». Включите галочку «Audio», если требуется передача видео со звуком. Но я бы «Audio» включать не рекомендовал, так как это даст существенную нагрузку на процессор накопителя, а для сайта главное картинка, а не звук. Нажмите «Submit». Если, по какой-то причине, добавление завершилось ошибкой, справа от «Camera 1» высветится сообщение, например «Error: Bad IP or RTSP URL». Если все прошло удачно вы увидите следующее:

Если требуется изменить IP камеры, RTSP name или разрешение картинки, нужно будет нажать «Delete» и ввести параметры заново. Если все ОК запустите вещание кнопкой «Start».

Вещание пошло, теперь нужно добавить html-код доступа к видео на страничку вашего сайта. Нажмите «Site code».

Предполагается, что ваш накопитель стоит внутри LAN-сети и не доступен извне. Поэтому в html-код подставляется внешний IP-адрес вашего маршрутизатора. Соответственно, что бы изображение увидели из Интернета, на маршрутизаторе нужно сделать «проброс порта» (Virtual Server или Port Forwarding). Протокол TCP, порт 8090. Как настраивается проброс рассказывать не буду, так как универсальной инструкции нет, у каждого производителя свой интерфейс настройки. К примеру так http://dlink.ru/ru/faq/246/1156.html В итоге получаем такую картинку

Как это реально работает можно увидеть на демо-страницеhttp://dlink.vtverdohleb.org.ua/webcam.html Правда не гарантирую, что страничка будет работать всегда, по каким-то, не зависящим от меня обстоятельствам, камеру возможно придется выключить. Но я постараюсь не выключать ее в течении месяца, после размещения статьи. Возможные проблемы: 1. Вещание работает на базе vlc-mozilla-plugin. Поэтому картинки не будет, если на компьютере не стоит VLC Player. Но поиски в гугле какой-то абсолютно универсальной системы ничего не дали. К примеру у меня на планшете, после установки VLC Player, видео пошло, а сайты с SWF flash не показывает. 2. Исходящая пропускная способность вашего канала ниже, чем суммарный поток на всех желающих. Ну тут варианты – увеличивать исходящую скорость канала или «давить» скорость видео потока за счет уменьшения кадров/с и уменьшением «Video quality / Constant bit rate» с ухудшением качества картинки. Увидеть кто смотрит и какая скорость потоков можно на странице статуса:http://ip-адрес_накопителя:8090/

В следующей версии Webcam будет добавлена возможность работать с 5-ю камерами. Если у вас есть замечания и предложения по работе текущей версии просьба изложить их письменно на http://dlink.ua/dns или в комментариях на статью.

Предвосхищая комментарий «Да как же слабенький NAS может справиться с раздачей 5-ти камер на пару десятков пользователей?» привожу пример top

Как видите, вещание ffserver & ffmpeg потребляет всего 3% проца при 1-ой камере и 4-х пользователях на просмотре. А вообще D-Link DNS-325 & DNS-345 очень удачные аппараты, умеющие все, что предлагают конкурирующие устройства и даже больше. Кое-что из их функционала я уже описывал в предыдущих статьях:IPTV через Wi-Fi – проблема? Абсолютно не проблема!Что нам стоит АТС построить!

Удачного вам просмотра!

habrahabr.ru

Форматы Видео для YouTube | Как конвертировать видео для YouTube

Форматы, поддерживаемые YouTube

На YouTube можно выкладывать видеофайлы в следующих форматах

Оптимальным форматом видео для YouTube является MP4 с видеокодеком H.264 и аудиокодеком AAC, поскольку он позволяет получать видео хорошего качества при небольших размерах файлов.

Размер, разрешение и другие параметры

Несмотря на то что максимальный размер загружаемых на YouTube файлов практически неограничен, размер видео нужно обязательно принимать во внимание. Если вы попытаетесь загрузить слишком большой файл, то в лучшем случае вам придется очень долго ждать, а в худшем – файл просто не загрузится в результате обрыва интернет-соединения. Если размер вашего видео более 2 ГБ, перед загрузкой на YouTube рекомендуется его сжать.

Немаловажными являются и такие параметры, как разрешение и соотношение сторон видео. Проигрыватель YouTube имеет соотношение сторон 16:9. Если вы загрузите видео с другим соотношением сторон, оно будет проигрываться без искажений и не обрежется, плеер просто добавит к изображению черные полосы сверху и снизу или по краям. Чтобы изображение занимало окно плеера полностью, рекомендуется использовать одно из стандартных разрешений:

  • 1080p (1920 х 1080)
  • 720p (1280 х 720)
  • 480p (854 х 480)
  • 360p (640 х 360)
  • 240p (426 х 240)

Подготовка видео к загрузке

Если формат вашего ролика не поддерживается YouTube или вы хотите оптимизировать характеристики видео для загрузки на сайт, потребуется конвертация исходного файла в другой формат или с другими настройками. Для решения этой задачи отлично подойдет Конвертер Видео от Movavi. При помощи этой программы можно сохранить видео в одном из 180+ популярных медиаформатов: MP4, AVI, MOV, WMV, FLV и других. Кроме того, вы можете изменить разрешение и соотношение сторон вашего ролика, уменьшить его размер, а также вырезать из него нужный фрагмент.

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

Вам наверняка известно, что на YouTube нельзя загружать музыку и фотографии. Если вы хотите выложить песню, подкаст или другой аудиофайл, нужно преобразовать его в видео. Сделать это можно, например, в Видеоредакторе Movavi. Просто добавьте фото и музыку в программу с помощью кнопки Добавить файлы, и они автоматически будут помещены на Монтажный стол в нижней части интерфейса программы. Чтобы длительность показа изображения равнялась длине музыки, растяните изображение на видеодорожке до того места, где кончается звук, как показано на иллюстрации.

Фотографии можно выложить, воспользовавшись функцией создания слайд-шоу на YouTube. Однако в качестве аудиодорожки вы сможете использовать только одну из предложенных композиций; музыку с компьютера добавлять нельзя. Если вы не хотите ограничивать себя в выборе музыки и оформлении слайд-шоу, сделайте его в Видеоредакторе Movavi. Просто добавьте фото, подходящую музыку и украсьте ваше слайд-шоу переходами и титрами.

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

Обе упомянутые нами программы – видеоконвертер и видеоредактор – входят в состав пакета Movavi Video Suite для Windows. Также в Movavi Video Suite есть программы для записи видео с экрана и прожига дисков, медиаплеер и другие полезные приложения для обработки видео и музыки. Вы можете скачать бесплатную пробную версию программы с нашего сайта и оценить ее возможности.

www.movavi.ru


Смотрите также