Video player for foreign language teaching sites

Some time ago I developed a number of plug-ins for the javascript-video player MedialElement , now I put them in open access. These plug-ins extend the functionality of the player in such a way that it can be used to watch videos teaching foreign languages. Of course, without my plug-ins, no one bothers to view the training videos in this player, but these plug-ins make the process of viewing and studying more comfortable.

For the standard to which I sought to develop, the player was taken http://www.yabla.com (I will not hide, initially it was planned to clone the entire resource, but the project did not start). This player has the following features:

1. Timeline navigation is carried out not up to a second, but up to a sentence. A person who learns the language from videos often has to scroll the video back in order to listen to the illegible phrase several times and it is much more convenient to move to the beginning of the phrase with one click, rather than search for it with a few clicks.
2. Each phrase can be looped to listen to it many times.
3. The breakdown of the timeline into phrases does not require any special preparation from the editor: the timings data is selected from the standard srt-file with captions.
4. Titles in all available languages ​​are displayed under the video (can be hidden if desired). This feature allows, for example, to show the user the captions in the original language of the video and in the user's native language. Clicking a word in the credits pauses the video and shows the user the translation of the word that was clicked.
5. The timer shows not only the time from the beginning of the video, but also the number of the phrase and the total number of phrases in the video.
6. The speed of the movie can be slowed or accelerated.
7. The transition between phrases is possible not only by clicking on the timeline, but also with the help of hot keys Ctrl + left / right arrows. Other shortcuts: space - loop the phrase / remove the loop, Ctrl + up / down arrows - change the speed of the movie.

To demonstrate the work of the project, I made a small website: lang.kece.ru (all the videos on it were borrowed from other resources), the player itself with installed plugins can be seen, for example, here: lang.kece.ru/ru/series/introducing-artifical -intelligence / video / course-welcome . In principle, with a slight refinement, plug-ins can be used not only to watch training videos, but also to watch full-fledged movies / TV shows. The revision is needed because if the video phrases are more than 20-30, then the timeline turns into a mess of small blocks with phrases and navigation with the help of mouse clicks becomes almost useless, but in this case it helps the use of hot keys.
')
Only plugins were tested in modern browsers. MedialElement is an HTML5 player, so if there are video files in the appropriate formats, video display is available almost everywhere: Windows, Mac, Linux, iOS, Android. Installing plug-ins like Flash is not required. You can find out which video formats are supported by modern browsers, for example, here: www.w3schools.com/html/html5_video.asp . In short, files in two formats: MP4 (MPEG 4 with H264 codec for video and AAC codec for audio) and WebM (VP8 codec for video and Vorbis for audio) will cover all modern browsers and devices.

Installation of the player and plug-ins is standard and is described in detail in the documentation for MediaElement: mediaelementjs.com . First you need to connect the necessary js-files:

<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> 

Then insert the video in the right place on the page:

 <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> 

In the settings, specify which plugins to use and initialize the player:

 <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> 

That's all.

Plugins are available in the repository: github.com/romka/mediaelementjs-language-learning-plugins . Forks and pull requests are welcome!

PS
If you are interested in the idea of ​​implementing a project like yabla.com, I will be glad to discuss it. In such projects, a high-quality technical component (content delivery speed, convenience of the frontend, etc.), of course, plays an important role, but it is much more important to have an effective language teaching method, interesting scenarios and well-recorded videos.