Как вставить видео в блог

Честно говоря, довольно долго совсем не задумывался о вставке видео в посты на блоге — казалось бы, всё вопросы предельно упрощены, загружаешь ролик на YouTube или Яндекс.Видео (я предпочитаю второе, поскольку там нет временных ограничений), немного ждешь обработки и получаешь html-код для вставки. Но вот опубликовал давеча видео с РТ-Коня и столкнулся сразу с двумя вопросами.

Во-первых, видеоролик такой длительности — а там получилось 76 минут, — неизбежно получается очень большой. В данном случае, даже очень ускоренно сохраненный в iMovie в мобильном варианте (450*255 пикселов), он получился размером в 550 мегабайт. Если бы я ориентировался на 640×360, то пришлось бы придумывать, куда девать 950 мегабайт одним куском. Немало, правда? При этом он неизбежно получается некачественным, хотя изначально снимался в FullHD.

Во-вторых, он теряет аудиторию. Мне сразу начали жаловаться, что его невозможно посмотреть в iPad, что не у всех хорошая скорость до Яндекс.Видео — короче, нехорошо.

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

Как легко догадаться, решение состоит в использовании возможностей HTML5, а конкретно тега <video>. Для тех, кто не очень в курсе, поясню — стандарт HTML5, который, правда, еще не стандарт, но его элементы начинают поддерживаться браузерами, позволяет вставлять видеоролик в страницу так же легко, как и картинку — достаточно указать конструкцию вида <video src=»path/to/file» controls/> и файл будет вставлен, снабжен встроенным в браузер плеером и так далее.

На сегодня именно этот тег HTML5 поддерживается в Safari, Google Chrome, Firefox, Opera, а также встроенными браузерами на iPhone/iPad и Android. Internet Explorer пока такого чуда не умеет (обещает уметь в IE9), но это полбеды. Вторая половина беды заключается в том, что Safari, Chrome и мобильные браузеры требуют, чтобы в src тега был указан файл, закодированный в стандарте H.264 с аудиокодеком AAC, а Firefox и Opera требуют использовать видеокодек Theora и аудиокодек Vorbis, которые хороши тем, что open-source и не требуют лицензирования, в отличие от H.264. И, если Chrome, как самый молодой, имеет поддержку обоих стандартов, то это исключение. Так что вебмастерам, желающим угодить совершенно всем своим пользователям, стоит понимать, что это желание выльется в необходимость кодировать и хранить два варианта ролика (как минимум). Если вас это не пугает, то давайте разбираться дальше.

Особых технических сложностей в процессе нет. Предположим, у вас есть видеофайл в каком-то общепринятом формате. Вначале сконвертируем его в OGG (это контейнер, содержащий файл формата Theora/Vorbis). Очень просто это сделать… в Firefox. Для него есть замечательное расширение Firefogg, которое прямо в окне браузера позволяет перекодировать ролик.

Возможностей для настройки там масса, можете покопаться, но умолчальные достаточно хороши и я бы посоветовал их не менять — если только вы хорошо разбираетесь в кодеках и знаете, что делаете. Выбираете исходный файл, нажимаете «Save OGG», вводите желаемое имя итогового файла и оставляете плагин работать.

Firefogg%20-%20Make%20Ogg%20Video%20in%20your%20Browser-5

Если вы поклонник командной строки, то к вашим услугам кросс-платформенный конвертер ffmpeg2theora.

Итак, у вас есть ogv-файл. Теперь надо получить аналогичный в MP4.

Самое простое — воспользоваться бесплатной кросс-платформенной программой под названием Handbrake. Указываете ей исходный файл, из боковой панели выбираете нужный профиль, не забудьте поставить галочку в поле «Web-optimized» и нажимаете на старт. Опять-таки — если вы специалист, можете покопаться в настройках кодеков, но в большинстве случаев дефолтные настройки работают прекрасно.

HandBrake

В результате у вас имеется два ролика, помимо исходного. Почти все готово. Почти — потому что мы чуть не забыли о пользователях Internet Explorer, браузер которых в принципе не поймет тега <video> и проигнорирует его. Чтобы их все же не обделить, советую воспользоваться любым из видеохостингов — раз уж их браузер не играет видео сам, они будут смотреть его через Flash. Загружаете ролик и берете оттуда код для вставки на сайт. Вот теперь готово опять почти всё — поскольку ролики надо куда-то загрузить.

Если размер роликов таков, что вы не можете их просто залить на видеосервис — а мы с этого и начали,-то я бы трижды подумал перед попыткой загрузить их на shared-хостинг, где лежит ваш блог, и даже на собственный сервер. Видео с РТ-Коня за два дня посмотрели 1500 человек, а размер файла, напомню, 550 мегабайт. Посчитайте сами — кроме пол-терабайта трафика, стоит учесть нагрузку на сервер, которая вполне ощутима даже для выделенного сервера. Я бы посоветовал для таких случаев посмотреть в сторону сервисов облачного хранения — например, на Amazon S3, куда я собираюсь положить сконвертированные файлы этого ролика. Они умеют держать такую нагрузку и обходятся довольно дешево.

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

<video width="640" height="360" controls preload="none">
<source src="path/to/file.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
<source src="path/to/file.ogv" type='video/ogg; codecs="theora, vorbis"'></source>
<object width="640" height="360"><param name="video" value="http://static.video.yandex.ru/lite/gray7400/xxxxxxxx"/><param name="allowFullScreen" value="true"/><param name="scale" value="noscale"/><embed src="http://static.video.yandex.ru/lite/gray7400/xxxxxxxxx/" type="application/x-shockwave-flash" width="640" height="360" allowFullScreen="true" scale="noscale"> </embed></object>
</video>

Всё работает довольно просто. Дело в том, что, встретив тег <video>, браузер начинает искать внутри него источник, формат которого он умеет воспроизвести. Первый такой файл — он определяется по типу контейнера и кодекам, которые указаны в type и codecs тега source соответственно, — и воспроизводится, а остальные оставляются без проверки. Поэтому Safari и Chrome остановятся на первом файле (кстати, mp4 обязательно указывать первым, иначе может сломаться воспроизведение в iPhone), Firefox пропустит первый файл и найдет второй, а IE вообще не обратит внимания на незнакомые ему теги <video> и <content>, но увидит <object> и выведет флэш-плеер видеосервиса. Все довольны и счастливы.

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

20
Прокомментировать:

Пожалуйста, авторизуйтесь чтобы добавить комментарий.
9 Comment threads
11 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
9 Comment authors
GuestGuestjinstacmv Recent comment authors
  Subscribe  
новые выше старые выше популярные
Сообщать
Dmitriy Lyalyuev
Гость

А можно линк на видео РТ-Коня?

piramida777
Гость

круто, только пока youtube/etc поддерживают только «flash»-h.264/html5-h.264/(чистый-h.264-для-iPad-etc?) я лично не вижу смысла в Theore ;
да и сам http://www.youtube.com/html5 убивает тем что надо дождаться загрузки всего файла.. а в случае 100-500МБ это не у всех будет быстро.

Eugene Barbashin
Гость

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

piramida777
Гость

видимо зависит от браузеров 🙂 я пытался смотреть разный HTML5 всем что есть на компьютере Chrome/Firefox/Opera/Safari

можно в том же Хроме сразу перейти на середину/конец видео ?

Eugene Barbashin
Гость

А Вы уже пробовали публиковать html5 видео нормального разрешения на широкую аудиторию? Просто мы тут пробовали разные варианты в разрешения от 640х480 до fullhd и проявилась основная проблема: плеер в этом случае у каждого браузера свой и в большинстве своем они довольно примитивные, например есть проблемы с буферизацией. В итоге чуть похуже канал до сервера — и смотреть невозможно.
Youtube кодирует в html5 с существенно худшим качеством, что обеспечивает в среднем нормальный просмотр за счет меньшего потока, но этот вариант не интересен.
На самом деле, я с большой надеждой смотрю на html5 video (жаль, что streaming там, похоже, не будет), но многое зависит от авторов плееров в браузерах, IMHO пока для полноценного использования с видео нормального качества на широкую аудиторию оно не подходит, увы (мы попробовали и остались на flash/silverlight).

piramida777
Гость

ну и кстате да, качество «html5» на ютубе и это же видео если есть 480p/720p == заметно даже в маленьком окошке, не говоря про фулл-скрин

Участник

Пару замечаний. OGV-видео можно выложить на blip.tv, и они даже позволяют получать видео по ссылке (в частности, их RSS-ленты содержат прямые ссылки на видео-источники). Они же сами сконвертируют его в M4V. Многие OpenSource-блогеры выкладывают свои видеоролики именно там.Также замечу для пользователей WordPress, что при переключении с HTML-режима редактора на визивиг-режим, WP «теряет» тэг VIDEO, хоть он сразу после переключения и отображается в самом редакторе. Мои соавторы так один раз при вычитке моей заметки ролик потеряли 🙂

jin
Гость

А можно детальнее, как пользоваться Amazon S3 для хостинга видио (и не только) файлов? 😉

RuNation
Гость
RuNation

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

stacmv
Гость
stacmv

Как-то обидно за Internet Explorer.

Ладно, все считают его не лучшим браузером, но давайте будем справедливы — видео без IE может проигрывать уже более 10 лет!

Поддержка тега VIDEO (и многих других) была добавлена в версии 5.

Вот тут небольшая демонстрация: http://stacmv.net/video-tag-test.html (смотреть с помощью IE, да и HTML-код посмотрите, даже если нет IE у вас).

В сети, при желании, можно найти и более интересные демонстрации.

Guest
Гость
Guest
Guest
Гость
Guest

tinyvid.tv рулит