Честно говоря, довольно долго совсем не задумывался о вставке видео в посты на блоге — казалось бы, всё вопросы предельно упрощены, загружаешь ролик на YouTube или Яндекс.Видео (я предпочитаю второе, поскольку там нет временных ограничений), немного ждешь обработки и получаешь html-код для вставки. Но вот опубликовал давеча видео с РТ-Коня и столкнулся сразу с двумя вопросами.
Во-первых, видеоролик такой длительности — а там получилось 76 минут, — неизбежно получается очень большой. В данном случае, даже очень ускоренно сохраненный в iMovie в мобильном варианте (450*255 пикселов), он получился размером в 550 мегабайт. Если бы я ориентировался на 640×360, то пришлось бы придумывать, куда девать 950 мегабайт одним куском. Немало, правда? При этом он неизбежно получается некачественным, хотя изначально снимался в FullHD.
Во-вторых, он теряет аудиторию. Мне сразу начали жаловаться, что его невозможно посмотреть в iPad, что не у всех хорошая скорость до Яндекс.Видео — короче, нехорошо.
Впрочем, оказалось, что технологии, снабдив нас возможностями снимать тяжелые ролики, не забыли придумать и способы эти ролики показывать. Так что, после некоторых изысканий, я нашел вполне неплохое решение, которое позволит в подобных случаях угодить практически всем пользователям.
Как легко догадаться, решение состоит в использовании возможностей HTML5, а конкретно тега
На сегодня именно этот тег 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», вводите желаемое имя итогового файла и оставляете плагин работать.
Если вы поклонник командной строки, то к вашим услугам кросс-платформенный конвертер ffmpeg2theora.
Итак, у вас есть ogv-файл. Теперь надо получить аналогичный в MP4.
Самое простое — воспользоваться бесплатной кросс-платформенной программой под названием Handbrake. Указываете ей исходный файл, из боковой панели выбираете нужный профиль, не забудьте поставить галочку в поле «Web-optimized» и нажимаете на старт. Опять-таки — если вы специалист, можете покопаться в настройках кодеков, но в большинстве случаев дефолтные настройки работают прекрасно.
В результате у вас имеется два ролика, помимо исходного. Почти все готово. Почти — потому что мы чуть не забыли о пользователях Internet Explorer, браузер которых в принципе не поймет тега
Если размер роликов таков, что вы не можете их просто залить на видеосервис — а мы с этого и начали,-то я бы трижды подумал перед попыткой загрузить их на shared-хостинг, где лежит ваш блог, и даже на собственный сервер. Видео с РТ-Коня за два дня посмотрели 1500 человек, а размер файла, напомню, 550 мегабайт. Посчитайте сами — кроме пол-терабайта трафика, стоит учесть нагрузку на сервер, которая вполне ощутима даже для выделенного сервера. Я бы посоветовал для таких случаев посмотреть в сторону сервисов облачного хранения — например, на Amazon S3, куда я собираюсь положить сконвертированные файлы этого ролика. Они умеют держать такую нагрузку и обходятся довольно дешево.
Однако будем считать, что файлы загружены, пути к ним имеются и теперь уж точно все готово. Осталась ерунда — написать следующий код:
Всё работает довольно просто. Дело в том, что, встретив тег
Я собираюсь именно таким способом за следующие пару дней все же переконвертировать видео с РТ-Коня и выложить — так что заодно и проверим, как оно работает под действительно немалой нагрузкой.
