Extension:TimedMediaHandler/VideoJS Player/ja



VideoJS Player は、ウィキメディアのプロジェクト群における MediaWiki 向けの動画プレーヤーです.

VideoJSをベースに、モバイル端末や HTML5 に対応した、現代風の高速なユーザーインターフェイスを実装しています.

使用法


音声のみと映像の双方に対応したプレーヤーです. このページで双方のプレーヤーを例示してご覧いただけます. ひとたび起動すると、映像に連動する操作用バーが眼に留まるでしょう.



操作部の機能は、左から右へ下記の通り.


 * VideoJS play pause control.png 再生と停止
 * VideoJS volume control.png 音量調整
 * 再生している位置
 * 再生する残り時間
 * VideoJS subtitle control.png 字幕の言語および書式の設定
 * VideoJS resolution control.png 画質設定
 * VideoJS picture-in-picture control.png ピクチャー イン ピクチャー に切替
 * VideoJS fullscreen control.png 全画面表示
 * VideoJS file description control.png ファイルについての説明



マウスとキーボードの操作

 * サムネイル上の再生アイコンをクリックすると、メディアファイルの再生を開始します.
 * サムネイルを右クリックすると、コンテキストメニューを開きます.
 * プレーヤーのウィンドウ内をクリックすることで再生と停止を行えます.
 * プレーヤーのウィンドウをダブルクリックすると全画面表示への移行や解除ができます.
 * キーボードから下記の操作が可能です.
 * [K]キー、[Space]キー : メディアの再生 / 停止
 * [F]キー : 全画面表示 / 解除
 * [M]キー : 消音
 * このプレーヤーは [Tab]、[Enter] および [Space]キーを使用することで、キーボードからすべての機能にアクセスできます.



理由
Wikimedia が2010年以降使用していたプレーヤーはいくつかの重大な劣化が生じているため、当方で改善を進めています.


 * いまや閲覧者の多数を占めるモバイル端末で、正常に動作しません.
 * 他所において広範囲に使用されているものではありません.
 * HTML5 の動画が標準化される前に作成されたものです.
 * 独自の字幕システムを使用しています.
 * Internet Explorer 6 に対応し、当時の JavaScript の標準仕様で作成されています.
 * 独自の JavaScript スタックを開発する以前に作成されました.
 * 2011年以来、ほとんど整備されていませんでした.



既知の問題点

 * ウィキの仕様が切り替えられている時期、数日に渡り、いくつかのページにおいて旧式と新型のプレーヤーが併存する状態を見かけるかもしれません. これはキャッシュが原因であると予想されます.  これには対応やバグレポートは必要ありません.
 * 字幕はいくつかのファイルで失敗する可能性があります. 字幕内における wikicode マークアップ機能のサポートを休止しました.  これらの字幕を修正することが望まれています(T224258).
 * 文字起こしをする場合、音声表示はインラインではなく、ダイアログを開きます. この変更は意図であり、将来的には音声の文字起こしを表示できるようになります.  T246035をご覧ください.

ビデオプレーヤーはまだ開発中ですが、何か問題を見つけた場合は、議論ページで報告するか、Phabricatorにファイルしてください.

開発者
Developers working on features that use the Video.js player will need to initialize and configure it appropriately. 開発者の皆さんで、Video.js プレーヤーを使用する機能に取り組む場合は適切に初期化して構成してください. 一般的な使い方を以下に紹介します.



基本的な環境設定
HTML 要素として、JSではなく   を提供できます：



Ogv.js 対応の高度な設定
OGG もしくは WebM ファイル類を異なるプラットフォーム間で再生する必要があるときは（どちらもコモンズで頻繁に出会うファイル形式） Video.js用のプラグイン Ogv.jsrを採用する方法があり、これも TimedMediaHandler に同梱されています. 設定例：