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

    MediaElement language learning plugins

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

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


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

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

    Установка проигрывателя и плагинов стандартна и подробно описана в документации к MediaElement: 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>
    


    Вот и всё.

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

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

    Подробнее
    Реклама
    Комментарии 5
    • 0
      Отличная идея, хотелось бы услышать чуть больше про реализацию. Какими алгоритмами вы выделяли предложения, где хранили эти данные и т.д. И еще, видна пикселизация в контролах Play, Next, Prev, Volume.
      • 0
        Какими алгоритмами вы выделяли предложения

        Предложения не выделяются автоматически, а берутся из файла титров (*.srt). Автоматическое распознавание речи задачка, конечно, интересная, но опыт того же Youtube показывает, что очень велика вероятность ошибок, а для обучающего проекта это неприемлемо.

        И еще, видна пикселизация в контролах Play, Next, Prev, Volume.

        Да, с графикой я пока не заморачивался: стандартные контролы проигрывателя были слишком маленькими и я просто увеличил картинки в графическом редакторе.
      • 0
        Есть еще один похожий проект. Онлайн-плеер со встроенным переводчиком субтитров — www.hamatata.com
        Перевод по клику мыши, несколько словарей для перевода, в том числе UrbanDictionary.
        Но нужно устанавливать расширение для браузера.
        • 0
          Очень интересная тема.
          Но я особо не понимал, почему люди зацикливаются на видео в целях изучения языка, когда по сути им нужно только аудио.
          Чаще всего обучающие ролики — это скучные рожицы, которые бубнят что-то в камеру.
          Да даже если ситуации интересные показаны, езда за рулем например, как в ролике englishtown, парень с девушкой едет и её пчела кусает, она выпрыгивает из машины —
          Мне кажется это не важно, что происходит в кадре. Учащемуся же важно только слышать звук и видеть текст.
          • 0
            С видео гораздо проще понять контекст звучащего текста, поэтому проще понять смысл и перевести…

          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.