Extension:TimedMediaHandler/VideoJS Player

This page is a translated version of the page Extension:TimedMediaHandler/VideoJS Player and the translation is 100% complete.

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

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

使用法

動画プレーヤーの例

字幕を表示しない音声プレーヤーの例

字幕付きの音声プレーヤーの例

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

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

再生と停止
音量調整
再生している位置
再生する残り時間
字幕の言語および書式の設定
画質設定
ピクチャーインピクチャーに切替
全画面表示
ファイルについての説明

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

サムネイル上の再生アイコンをクリックすると、メディアファイルの再生を開始します。
サムネイルを右クリックすると、コンテキストメニューを開きます。
プレーヤーのウィンドウ内をクリックすることで再生と停止を行えます。
プレーヤーのウィンドウをダブルクリックすると全画面表示への移行や解除ができます。
キーボードから下記の操作が可能です。
k / Space

メディアの再生 / 停止

f

全画面表示 / 解除

m

消音

c / s

字幕の表示 / 非表示を切り替え

< / >

再生速度の増減

← / →

5秒戻す / 早送りする

j / l

10秒戻す / 早送りする

Home / End

動画の冒頭 / 末尾に移動

, / .

一時停止中、1フレーム後退 / 前進
このプレーヤーは [Tab]、[Enter] および [Space]キーを使用することで、キーボードからすべての機能にアクセスできます。

既知の問題点

ビデオプレーヤーは現在も開発中ですが、何らかの問題を見つけた際は、議論ページで報告するかPhabricatorにファイルしてください。

開発者

VideoJSプレーヤーを使用するための機能を開発する際、プレーヤーの適切な初期化および設定が必要です。一般的な使い方を以下に紹介します。

基本的な環境設定

これは古いため再加工が必要で、videojs 再生に一貫したオプションと設定を適用するプレーヤーラッパーに適合させます。

// 最初の引数に文字列 ID または <video> 要素を指定可能
var player = videojs( 'my-player-id', {
    controls: true,
    autoplay: false,
    poster: "https://path/to/poster/image"
    sources: [ /* ソースファイルの配列、さまざまなサイズと形式 */ ]
} );

HTML ‎<video> 要素として、JSではなく sources を提供できます：

<video class="video-js">
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>