Flv и субтитры

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

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

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

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

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

Ссылка на видео файл

На данном этапе предполагается, что вы сами в состоянии узнать ссылку на нужный вам фал (обычно верный знак нужной ссылки — это расширение .flv в конце адреса).
Я для примера взял видео файл с таким адресом:
http://content.longtailvideo.com/videos/flvplayer.flv

Создаем субтитры

Я нашел только один онлайновый сервис, подходящий в данной ситуации (хотя, возможно, и существуют какие-то другие подобные инструменты) — Subtitle Horse.
После того, как заходишь на сайт, сразу же предлагается ввести адрес ролика, для которого мы хотим создать субтитры. Вставляем нашу ссылку (1) и переходим непосредственно к делу (2):

Рисунок 1

После чего появится следующее окно:

Рисунок 2

Принцип прост. Слева вы можете просматривать ролик (можно так же прокручивать ролик к нужным местам) (1), останавливая его в нужные моменты (там, где нужно будет вставлять текстовую фразу). После того, как поставите паузу, ниже пишите текст (перевод, или, допустим, все это можно использовать для вставки своих комментариев в видео). Как можно увидеть, там есть примитивные средства форматирования текста (жирность, выравнивание), которыми можно воспользоваться при необходимости (2). Когда все готово, жмем кнопку «Create» (3).

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

В итоге у меня получилась следующая картина:

Рисунок 3

После того, как все готово, нам нужно будет сохранить результат работы у себя на компьютере. Для этого идем в меню File — Export.

Рисунок 4

Рисунок 5

В закладке «Timed Text» (1) будет находиться текст, который нам нужен (2). Его нужно скопировать и сохранить в текстовом файле (в кодировке utf8) с расширением *.xml. Так как этот файл будет размещаться в интернете, назван он должен быть соответствующе, с использованием латинских символов и без пробелов. Я, к примеру, назвал файл именем — «my_subtitle.xml«.

Теперь мы готовы перейти к следующему этапу.

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

Размещаем на сайте и «скрещиваем»…

Итак, мы имеем ссылку на видео (http://content.longtailvideo.com/videos/flvplayer.flv) и файл с субтитрами к нему («my_subtitle.xml«).

Онлайн плеер, который умеет проигрывать видео с такими субтитрами, называется «JW FLV Media Player«. Предполагается, что вы уже имели опыт работы с ним или с чем-то подобным. Если нет, то можно почитать здесь, как его устанавливать на свой сайт и указывать ему, что он должен проигрывать.

Если вы закачали необходимые файлы для проигрывателя на свой сайт и так же закачали файл субтитров, на странице, где будет размещен видеоролик, нужно будет прописать код, аналогичный следующему (сам видео-файл подгружаем с другого сайта, остальные сопутствующие файлы в данном случае лежат в той же директории, где и html файл, содержимое которого показано ниже):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Тэст субтитров</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<script type='text/javascript' src='swfobject.js'></script>
 
<div id='mediaspace'>Этот текст будет заменен роликом</div>
 
<script type='text/javascript'>
  //Указываем расположение плеера и его ширину и высоту
  var so = new SWFObject('player.swf','mpl','400','319','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  //Указание месторасположения файла с субтитрами
  so.addVariable('captions','my_subtitle.xml');
  //Путь к видео-файлу
  so.addVariable('file','http://content.longtailvideo.com/videos/flvplayer.flv');
  //Отмечаем, что хотим использовать плагин субтитров
  so.addVariable('plugins','captions-1');
  //Вписываем окно плеера в div с id "mediaspace"
  so.write('mediaspace');
</script>

</body>
</html>

Вот пример того, как это работает.

После всех этих операций видео должно проигрываться с субтитрами!

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

Подводные камни

Собственно, пока я спотыкался только об один…

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

[ Скачать архив с примером ] (55 КБ)

Автор

  • Илья

    маленькое замечание:

    >нельзя будет легко откорректировать титры при необходимости (ведь они уже будут намертво замурованы в видео),

    вот тут не совсем верно. если делать софтовые сабы (ass) и сводить их с видео после редактирования, то потом можно отредактировать саб и свести еще раз.

    кстати, на самом ютубе видел видео с субтитрами (накладывающимися), такой вариант смотрел?

  • Это ясно, просто под «свести еще раз» и кроется же дополнительные телодвижения (кодировать его в flv, заливать заново на сайт). Здесь же достаточно поправить файл субтитров и обновить только его на сайте. Специально стараюсь в некоторых моментах поверхностными фразами выражаться, так как в противном случае есть опасность (у меня, по крайней мере) слишком часто отходить от темы уточняя нюансы 🙂

    На ютубе да, есть. В моем случае просто была задача сделать субтитры для очень большого количества роликов (около 150 штук) размещенных на другом сервисе и каждый из которых выходит далеко за пределы 10 минут. Из-за этих 10 минут вообще часто ютуб не получается использовать. Но если ролик короткий и размещается все равно в итоге на ютубе, то конечно вариант сделать субтитры прямо там более целесообразный.
    Мне кстати потом понадобилось сделать и обычные AVI версии этих роликов с «вшитыми» субтитрами (для записи на диски и т.п.), помог тот же Subtitle Horse, вкинул в импорт ему содержимое xml файла сделанный ранее, а потом экспортировал с помощью него же в SRT. Файл SRT уже можно просто положить рядом с AVI файлом (многие плеера сами подхватывают эти субтитры, если у них такое же имя как у avi файла) или вшить их в видео в любом обычном видео редакторе (как я понимаю srt примерно то же самое, что ass только вид с боку), удобно, в общем.

    Спасибо за комментарий (и замечание), приятно, когда вот так сразу и по делу 🙂

  • Илья

    >Это ясно, просто под “свести еще раз” и кроется же дополнительные телодвижения

    не столько телодвижения, сколько время и потеря качества видео

    >для очень большого количества роликов (около 150 штук) размещенных на другом сервисе и каждый из которых выходит далеко за пределы 10 минут

    тогда, наверное, без вариантов

    >как я понимаю srt примерно то же самое, что ass только вид с боку

    srt — старый формат, был до ass. в отличии от него, ass умеет стили, позиционирование текста, эффекты и проч. что-то ближе к css

  • А вытащить субтитры из Youtube видео как-нибудь можно?

  • А можно я скопирую ваш пост к себе в блог ? На правах копи-паста. Ссылку на dev.ezoterik.info конечно поставлю..

  • Спасибо за статью. Обошел почти все поисковики. Потратил не один час, прежде чем нашел. Материал — эксклюзив. По крайней мере на русском языке 🙂 Мне помогло — не хватало софта, где можно сами титры делать. Онлайн вариант тоже подходит. С кнопочками сразу не разберешься, но уже сейчас видно (я сделал только три титра пока), что все реально.

  • kararo, можно.

    Анатолий, спасибо, стараюсь писать о том, о чем сам не нашел внятной информации (от того правда редко получается писать что-либо…)

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

  • mongol

    у меня почему-то крокозябры вместо русского выводит, может кто знает почему?

  • mongol, по идее, это может быть из-за того, что файл с субтитрами сохранен не в кодировке UTF-8.

  • Андрей

    а я в movie maker по деревенски субтитры делал)))

  • Goshil

    Спасибо тебе, ил человек, доброе дело делаешь — полезную очень инфу публикуешь. Спасибо ещё раз!

  • Sbloner

    Привет. Оч полузная статейка. Только мне ни как не удается запустить видео с других сайтов кроме ютуба. (((
    Дальше кросдомена этот плеер не проходит.

  • Roman Petrov

    Именно то, что искал! Спасибо!