Матвей Земсков

Заметки веб-мастера

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

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

Оцените материал
(0 голосов)

При размещении на своем сайте видеороликов, например, с 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. Подробнее ознакомиться с этим плеером можно на официальном сайте этого приложения.

Прочитано 6294 раз
Добавить комментарий

Комментарии   

 
0 # Татьяна 11.03.2015 22:05
Здравствуйте! Большое спасибо за статью. Скажите, пожалуйста, а сложно ли реализовать кликабельные субтитры? Например, при клике на слово в субтитрах в маленьком окошке или в другом месте на странице выскакивает какая-либо подсказка.

Это делается с помощью JS или как-то редактируется файл vtt ? Или еще каким-то другим образом?
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 16.03.2015 17:50
Пожалуйста, Татьяна! На сколько я понял из API плеера (http://support.jwplayer.com/customer/portal/topics/564475-javascript-api/articles), возможности взаимодействия с субтитрами не предусмотрено.
Ответить | Ответить с цитатой | Цитировать
 
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: