Суббота, 02 марта 2013 17:14

Как добавить субтитры в видеоролик.

Оцените материал

(2 голосов)

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

Мне очень помог JW Player – простой и многофункциональный плеер для размещения видео на сайте, способный воспроизводить видео различных форматов (mp4, flv, webm). Но самое главное, что в нем есть возможность добавлять субтитры в видеоролики. Процесс размещения субтитров я покажу на примере одного из роликов с YouTube. Для правильного воспроизведения ролика важно, чтобы ссылка на ролик была скопирована из адресной строки браузера.

Итак, сначала скачиваем JW Player с официального сайта. Получаем zip-архив с 2 вариантами плеера: Flash и HTML5. Я буду использовать плеер, основанный на Flash.

Создадим новую папку и скопируем в нее 2 файла из скачанного и распакованного архива: jwplayer.js и jwplayer.flash.swf. Создадим в ней страничку, например, index.html. Теперь нужно подключить jwplayer.js к нашей веб-страничке, а также создать блок (<div>) в нем будет размещаться плеер. Я присвоил ему идентификатор videocont. На данный момент html-код нашей странички выглядит так:

HTML

<!doctype html>
  <html lang="ru">
   <head>
     <meta charset="utf-8" />
	 <title>Знакомство с PHP.</title>
	 <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
    <link rel="stylesheet" type="text/css" href="/css/template.css" media="all" />
    <script type="text/javascript" src="/jwplayer.js"></script>
   </head>
   <body>
    <h1>Знакомство с PHP.</h1>
	<div id="videocont"></div>
   </body>
  </html>

Теперь самое время создать файл с субтитрами. Это будет обычный текстовый файл, который нужно сохранить в кодировке UTF-8 для правильного отображения символов из различных языков. Существует несколько форматов описания субтитров: WebVTT , SRT или DFXP. Я выбрал формат WebVTT, рекомендованный разработчиками плеера. Замечу, что при добавлении субтитров, можно изменять их цвет, фон и размер шрифта.

	WEBVTT
	00:00:00 --> 00:00:05
	PHP для начинающих
	00:00:10 --> 00:00:25
	Знакомство с PHP на практике
	00:00:51 --> 00:01:00
	Что такое PHP

Создав 3 записи с субтитрами, я сохранил файл с именем my_subt.vtt. Теперь в код нашей странички можно добавить подключение видеоролика и файла с субтитрами. Непосредственно после блока с id=”videocont” добавим следующий код:

JavaScript

<script type="text/javascript">
  jwplayer("videocont").setup({
	width: 400,
	height: 319,
	playlist: [{
	  captions:[{file: 'my_subt.vtt'}],
  	  file: "http://www.youtube.com/watch?v=kY5P9sZqFas"		
          }]
  });
 </script>

Код подключения плеера прост и не требует описания, уточню только то, что captions – путь к файлу с субтитрами (файлов может быть несколько), а file – путь к видеоролику.

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

включаем отображение субтитров в ролике

Демо

Добавление субтитров в видеоролики – это только одна из возможностей JW Player. Подробнее ознакомиться с этим плеером можно на официальном сайте этого приложения.

Прочитано 15887 раз

Опубликовано в HTML-верстка

Теги

Другие материалы в этой категории: « Несколько правил html-верстки шаблона почтовой рассылки Размещаем стилизованную карту Google на своем сайте »

	string(1) "1"
====string(1) "1"
====int(1)
====string(1) "1"
====bool(true)

Наверх