Предположим, вам понравился какой-то видео файл на youtube (или в любой подобной системе, суть в том, что этот файл хранится в интернете в формате flv), и вы хотите его показать другим людям, разместив это видео на своем сайте или блоге, но, к сожалению, фильм не на русском языке. В этом случае может появиться потребность в его русификации, самый простой способ сделать это — создание субтитров для фильма.
Конечно, можно сделать такие субтитры почти в любом видео-редакторе, создав в итоге свой уникальный видео-файл. Но в этом методе есть ряд неудобств:
- нужно уметь пользоваться подобными видео-редакторами,
- нельзя будет легко откорректировать титры при необходимости (ведь они уже будут намертво замурованы в видео),
- так как на выходе вы получите свой модифицированный видео-файл, вам нужно будет дополнительно заботиться о том, где его хранить в интернете, чтоб иметь возможность показывать его на своем сайте, а если же хранить прямо на своем сайте, то это может угрожать нежелательным расходом трафика,
- при сохранении отредактированного видео его качество будет хуже оригинала.
Мне этот способ не подошел из-за последних трех минусов, поэтому пришлось искать другое решение, более гибкое и простое, которым я и хочу поделиться.
В общих словах, все выполнение этой задачи выглядит так: находим ссылку на нужный нам файл в flv формате, в специальном редакторе создаем субтитры (в виде отдельного текстового файла), размещаем у себя на сайте специальный плеер (в котором далее будем проигрывать видео с чужого сервера) и файл субтитров. Обо всем этом ниже, подробнее.
Ссылка на видео файл
На данном этапе предполагается, что вы сами в состоянии узнать ссылку на нужный вам фал (обычно верный знак нужной ссылки — это расширение .flv в конце адреса).
Я для примера взял видео файл с таким адресом:
http://content.longtailvideo.com/videos/flvplayer.flv
Создаем субтитры
Я нашел только один онлайновый сервис, подходящий в данной ситуации (хотя, возможно, и существуют какие-то другие подобные инструменты) — Subtitle Horse.
После того, как заходишь на сайт, сразу же предлагается ввести адрес ролика, для которого мы хотим создать субтитры. Вставляем нашу ссылку (1) и переходим непосредственно к делу (2):
После чего появится следующее окно:
Принцип прост. Слева вы можете просматривать ролик (можно так же прокручивать ролик к нужным местам) (1), останавливая его в нужные моменты (там, где нужно будет вставлять текстовую фразу). После того, как поставите паузу, ниже пишите текст (перевод, или, допустим, все это можно использовать для вставки своих комментариев в видео). Как можно увидеть, там есть примитивные средства форматирования текста (жирность, выравнивание), которыми можно воспользоваться при необходимости (2). Когда все готово, жмем кнопку «Create» (3).
В правой части (4) вы увидите созданную запись субтитров (как и в области просмотра видео). Теперь можно отмотать видео немного назад и в режиме просмотра посмотреть, как будет выглядеть текст на практике. Также всегда в правой части можно кликнуть на нужном фрагменте текста (тогда ролик автоматически промотается к соответствующему фрагменту) и отредактировать его, откорректировав текст, сместив его по времени или указав более продолжительное время, в течение которого текст должен оставаться на экране.
В итоге у меня получилась следующая картина:
После того, как все готово, нам нужно будет сохранить результат работы у себя на компьютере. Для этого идем в меню File — Export.
В закладке «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 КБ)
