Видеопроигрыватель для сайтов обучающих иностранным языкам
Это устаревший пост, перенесённый из старой версии сайта. Ссылки, примеры кода и другая информация в нём, вероятнее всего, потеряли актуальность.
Некоторое время назад я разработал ряд плагинов для javascript-видеопроигрывателя MedialElement, сейчас выложил их в открытый доступ. Эти плагины расширяют функциональность плейера таким образом, что он может быть использован для просмотра видеороликов, обучающих иностранным языкам. Разумеется, и без моих плагинов никто не мешает просматривать обучающие видео в этом проигрывателе, но эти плагины делают процесс просмотра и изучения более комфортным.
За эталон, к которому я стремился при разработке, был взят проигрыватель http://www.yabla.com (не буду скрывать, изначально планировалось склонировать ресурс целиком, но проект не завёлся). Этот проигрыватель обладает следующими особенностями:
- навигация по таймлайну осуществляется не с точностью до секунды, а с точностью до предложения. Человеку, изучающему язык по видеороликам, часто приходится проматывать видео назад, чтобы несколько раз переслушать неразборчивую фразу и гораздо удобнее одним кликом переместиться к началу фразы, а не искать её начало несколькими кликами.
- Каждая фраза может быть зациклена, чтобы прослушать её многократно.
- Разбивка таймлайна на фразы не требует от редактора какой-то особой подготовки: данные о таймингах выбираются из стандартного srt-файла с титрами.
- Титры на всех доступных языках выводятся под видеороликом (при желании могут быть скрыты). Эта особенность позволяет, например, показывать пользователю титры на языке оригинала видео и на родном языке пользователя. Клик по слову в титрах ставит видео на паузу и показывает пользователю перевод слова, по которому сделан щелчок.
- Таймер показывает не только время от начала видеоролика, но также номер фразы и общее число фраз в ролике.
- Скорость проигрывания ролика может быть замедлена или ускорена.
- Переход между фразами возможен не только кликом по таймлайну, но и при помощи хоткеев Ctrl + стрелки влево/вправо. Другие горячие клавиши: пробел — зациклить фразу/снять зацикливание, Ctrl + стрелки вверх/вниз — изменение скорости ролика.
Для демонстрации работы проекта я сделал небольшой сайт: http://lang.kece.ru/ (все видеоролики на нем позаимствованы с других ресурсов), сам проигрыватель с установленными плагинами можно увидеть, например, тут: http://lang.kece.ru/ru/series/introducing-artifical-intelligence/video/course-welcome. В принципе, при небольшой доработке, плагины могут быть использованы не только с целью просмотра обучающих роликов, но и с целью просмотра полноценных фильмов/сериалов. Доработка понадобится потому, что если в видео фраз больше чем 20-30, то таймлайн превращается в кашу из мелких блоков с фразами и навигация при помощи кликов мышью становится почти бесполезной, но в таком случае выручает использование горячих клавиш.
Тестировались плагины только в современных браузерах. MedialElement — это HTML5-проигрыватель, по этому, при наличии видео-файлов в соответствующих форматах, отображение видео доступно практически везде: Windows, Mac, Linux, iOS, Android. Установка плагинов типа Flash не требуется. О том, какие форматы видео поддерживаются современными браузерами можно узнать, например, тут: http://www.w3schools.com/html/html5_video.asp. Если коротко, то файлы в двух форматах: MP4 (MPEG 4 с кодеком H264 для видео и кодеком AAC для аудио) и WebM (кодек VP8 для видео и Vorbis для аудио) покроют все современные браузеры и устройства.
Установка проигрывателя и плагинов стандартна и подробно описана в документации к MediaElement: http://mediaelementjs.com/. Сначала нужно подключить необходимые 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>
Вот и всё.
Доступны плагины в репозитории: https://github.com/romka/mediaelementjs-language-learning-plugins.
P.S. Если вас заинтересовала идея реализации проекта подобного yabla.com, буду рад её обсудить. В проектах такого уровня качественная техническая составляющая (скорость отдачи контента, удобство фронтенда и т.д), конечно, играет важную роль, но на порядки более важно наличие эффективной методики преподавания языка, интересных сценариев и качественно записанных видеороликов.