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]キー

消音
このプレーヤーは [Tab]、[Enter] および [Space]キーを使用することで、キーボードからすべての機能にアクセスできます。

既知の問題点

字幕はいくつかのファイルで失敗する可能性があります。 2022年に、字幕内におけるウィキコードマークアップ機能のサポートを終了しました。これらの字幕を修正することが望まれています(T224258)。
文字起こしをする場合、音声表示はインラインではなく、ダイアログを開きます。この変更は意図であり、将来的には音声の文字起こしを表示できるようになります。 T246035 を参照してください。

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

開発者

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

基本的な環境設定

これは古いため再加工が必要で、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>

Ogv.js 対応の高度な設定

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

var player;

// ResourceLoaderに適切なモジュールを読み込み
mw.loader.using( 'ext.tmh.videojs-ogvjs' ).then( function () {
    // 必要に応じて ogvjs を読み込み：その成果として、
    // 必要なコードを全て読み込みました
    return mw.OgvJsSupport.loadIfNeeded();
} ).then( function () {
    player = videojs( 'my-player-id', {
        controls: true,
        autoplay: false,
        poster: 'https://path/to/my/image',
        sources: [ /* ソースの配列 */ ],
        
        // Ogv.js 固有の設定
        ogvjs: {
            base: mw.OgvJsSupport.basePath()
        }
    } );
} );