Видеопроигрыватель для сайтов обучающих иностранным языкам

Некоторое время назад я разработал ряд плагинов для javascript-видеопроигрывателя MedialElement ^[1], сейчас выложил их в открытый доступ. Эти плагины расширяют функциональность плейера таким образом, что он может быть использован для просмотра видеороликов обучающих иностранным языкам. Разумеется, и без моих плагинов никто не мешает просматривать обучающие видео в этом проигрывателе, но эти плагины делают процесс просмотра и изучения более комфортным.

За эталон, к которому я стремился при разработке, был взят проигрыватель http://www.yabla.com ^[2] (не буду скрывать, изначально планировалось склонировать ресурс целиком, но проект не завёлся). Этот проигрыватель обладает следующими особенностями:

1. навигация по таймлайну осуществляется не с точностью до секунды, а с точностью до предложения. Человеку, изучающему язык по видеороликам, часто приходится проматывать видео назад, чтобы несколько раз переслушать неразборчивую фразу и гораздо удобнее одним кликом переместиться к началу фразы, а не искать её начало несколькими кликами.
2. Каждая фраза может быть зациклена, чтобы прослушать её многократно.
3. Разбивка таймлайна на фразы не требует от редактора какой-то особой подготовки: данные о таймингах выбираются из стандартного srt-файла с титрами.
4. Титры на всех доступных языках выводятся под видеороликом (при желании могут быть скрыты). Эта особенность позволяет, например, показывать пользователю титры на языке оригинала видео и на родном языке пользователя. Клик по слову в титрах ставит видео на паузу и показывает пользователю перевод слова, по которому сделан щелчок.
5. Таймер показывает не только время от начала видеоролика, но также номер фразы и общее число фраз в ролике.
6. Скорость проигрывания ролика может быть замедлена или ускорена.
7. Переход между фразами возможен не только кликом по таймлайну, но и при помощи хоткеев Ctrl + стрелки влево/вправо. Другие горячие клавиши: пробел — зациклить фразу/снять зацикливание, Ctrl + стрелки вверх/вниз — изменение скорости ролика.

Для демонстрации работы проекта я сделал небольшой сайт: lang.kece.ru/ ^[3] (все видеоролики на нем позаимствованы с других ресурсов), сам проигрыватель с установленными плагинами можно увидеть, например, тут: lang.kece.ru/ru/series/introducing-artifical-intelligence/video/course-welcome ^[4]. В принципе, при небольшой доработке, плагины могут быть использованы не только с целью просмотра обучающих роликов, но и с целью просмотра полноценных фильмов/сериалов. Доработка понадобится потому, что если в видео фраз больше чем 20-30, то таймлайн превращается в кашу из мелких блоков с фразами и навигация при помощи кликов мышью становится почти бесполезной, но в таком случае выручает использование горячих клавиш.

Тестировались плагины только в современных браузерах. MedialElement — это HTML5-проигрыватель, по этому, при наличии видео-файлов в соответствующих форматах, отображение видео доступно практически везде: Windows, Mac, Linux, iOS, Android. Установка плагинов типа Flash не требуется. О том, какие форматы видео поддерживаются современными браузерами можно узнать, например, тут: www.w3schools.com/html/html5_video.asp ^[5]. Если коротко, то файлы в двух форматах: MP4 (MPEG 4 с кодеком H264 для видео и кодеком AAC для аудио) и WebM (кодек VP8 для видео и Vorbis для аудио) покроют все современные браузеры и устройства.

Установка проигрывателя и плагинов стандартна и подробно описана в документации к MediaElement: mediaelementjs.com/ ^[6]. Сначала нужно подключить необходимые js-файлы:

<script src="/scripts/mediaelementsjs/build/mediaelement-and-player.js"></script>
<script src="/scripts/mediaelementsjs/plugins/trackprogress/js/mep-feature-trackprogress.js"></script>
<script src="/scripts/mediaelementsjs/plugins/timecaption/js/mep-feature-timecaption.js"></script>
<script src="/scripts/mediaelementsjs/plugins/doublesubtitles/js/mep-feature-doublesubtitles.js"></script>
<script src="/scripts/mediaelementsjs/plugins/dictionary/js/mep-dictionary.js"></script>
<script src="/scripts/mediaelementsjs/plugins/nextprev/js/mep-nextprev.js"></script>
<script src="/scripts/mediaelementsjs/plugins/speed/js/mep-feature-speed.js"></script>

Затем в нужном месте страницы вставить видеоролик:

<video id="player1" width="720" height="405" type="video/mp4" poster="/path/to/poster-image.png" controls>
    <source src="/path/to/video.mp4" type="video/mp4" title="Video title">
    <source src="/path/to/video.webm" type="video/webm" title="Video title">
    <track kind="subtitles" src="/path/to/subtitles/en.srt" srclang="en" />
    <track kind="subtitles" src="/path/to/subtitles/ru.srt" srclang="ru" />
</video>

В настройках указать какие плагины использовать и инициализировать проигрыватель:

<script>
  var video_options = {
    features: ['playpause', 'timecaption', 'duration2', 'trackprogress', 'prev', 'repeat', 'next', 'volume', 'doublesubtitles', 'dictionary', 'speedupdown'],

    // some other settings, more details here: mediaelementjs.com/#options
  }
</script>
<script>
   var player = new MediaElementPlayer('#player1', video_options);
</script>

Вот и всё.

Доступны плагины в репозитории: github.com/romka/mediaelementjs-language-learning-plugins ^[7]. Форки и пулл-реквесты приветствуются!

P.S.
Если вас заинтересовала идея реализации проекта подобного yabla.com, буду рад её обсудить. В подобных проектах качественная техническая составляющая (скорость отдачи контента, удобство фронтенда и т.д), конечно, играет важную роль, но на порядки более важно наличие эффективной методики преподавания языка, интересных сценариев и качественно записанных видеороликов.

Автор: rrromka

Источник ^[8]