Clever Geek Handbook

外国語教育サイトのビデオプレーヤー

MediaElement言語学習プラグイン



少し前に、javascriptビデオプレーヤーMedialElementのプラグインを多数開発しましたが、今ではそれらを公開しています。 これらのプラグインは、プレーヤーの機能を拡張して、外国語を教えるビデオを見るために使用できるようにします。 もちろん、私のプラグインがなければ、このプレーヤーで誰もトレーニングビデオを観ることはありませんが、これらのプラグインは視聴と学習のプロセスをより快適にします。



プレイヤーhttp://www.yabla.comは、開発中に私が目指した標準として採用されました（非表示にしません。元々リソース全体を複製する予定でしたが、プロジェクトは開始されませんでした）。 このプレーヤーには次の機能があります。

  1. タイムラインナビゲーションは秒に対して正確ではありませんが、文に対して正確です。 動画から言語を学習する人は、判読できないフレーズを数回聞くためにビデオを巻き戻す必要があります。数クリックでフレーズの先頭を探すのではなく、ワンクリックでフレーズの先頭に移動する方がはるかに便利です。
  2. 各フレーズをループして繰り返し聞くことができます。
  3. タイムラインをフレーズに分解するには、エディターによる特別な準備は必要ありません。タイミングデータはキャプション付きの標準srtファイルから選択されます。
  4. 利用可能なすべての言語のキャプションがビデオの下に表示されます（必要に応じて非表示にできます）。 この機能により、たとえば、ビデオの元の言語とユーザーの母国語でキャプションをユーザーに表示できます。 クレジット内の単語をクリックすると、ビデオが一時停止し、クリックされた単語の翻訳がユーザーに表示されます。
  5. タイマーは、ビデオの開始からの時間だけでなく、ビデオ内のフレーズ番号とフレーズの合計数も示します。
  6. ビデオの速度は、減速または加速することができます。
  7. フレーズ間の遷移は、タイムラインをクリックするだけでなく、ホットキーCtrl +左/右矢印を使用しても可能です。 その他のホットキー：スペースバー-フレーズをループ/ループを元に戻す、Ctrl +上/下矢印-クリップの速度を変更します。




プロジェクトの動作を実証するために、私は小さなサイトを作成しました： lang.kece.ru （その上のすべてのビデオは他のリソースから借用されました） -インテリジェンス/ビデオ/もちろんようこそ 。 原則として、少し改良を加えたプラグインは、トレーニングビデオを表示する目的だけでなく、本格的な映画/テレビ番組を見る目的にも使用できます。 ビデオに20から30を超えるフレーズがある場合、タイムラインはフレーズを含む小さなブロックの混乱に変わり、マウスクリックの助けを借りたナビゲーションはほとんど役に立たなくなるため、修正が必要になりますが、この場合はホットキーの使用が役立ちます。



プラグインは、最新のブラウザーでのみテストされました。 MedialElementはHTML5プレーヤーであるため、適切な形式のビデオファイルがある場合、Windows、Mac、Linux、iOS、Androidのほぼすべての場所でビデオ表示を使用できます。 Flashなどのプラグインをインストールする必要はありません。 最新のブラウザでサポートされているビデオ形式は、たとえばwww.w3schools.com/html/html5_video.aspで確認できます。 つまり、2つの形式のファイル：MP4（ビデオ用のH264コーデックとオーディオ用のAACコーデックを備えたMPEG 4）および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 フォークとプルのリクエストは大歓迎です！



PS

yabla.comのようなプロジェクトの実装のアイデアに興味があれば、喜んで議論します。 このようなプロジェクトでは、もちろん、高品質の技術コンポーネント（コンテンツ配信の速度、フロントエンドの利便性など）が重要な役割を果たしますが、より重要なのは、言語、興味深いスクリプト、高品質の録画ビデオを教えるための効果的な方法論の存在です。


More articles:


All Articles