はじめに

Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart2です。
Video.jsの公式のガイドであるVideo.js Guidesを翻訳ツールを使いながら解説していきます。

前回はPlayerのサイズを変更する方法を紹介しました。今回はPlayerで使われるテキストの言語周りの設定を変更する方法を紹介します。

前回
Video.js完全マニュアル part10 〜Playerのサイズ設定〜

part1から読む人はこちら

この記事の対象者

Video.jsを利用する人
動画プレイヤーのUI操作をしたい人
動画再生関連のサービスを作りたい人

この記事の解説する章

Languages

言語設定

Video.jsで生成したPlayerでは、コントローラーをホバーさせた時に機能名が表示されます。以下の画像をご覧ください。

再生ボタンをホバーさせると、「Play」というテキストが表示されるのが分かります。
こちらのテキストは、デフォルトだと英語ですが、オプション指定等で言語変更したり、文言を変更することが可能です。

文言一覧

再生ボタンをホバーしたときは「Play」、音量ボタンをホバーしたら「Mute」と表示されます。
Video.jsで扱っている文言一覧は、以下のVideo.js公式のリポジトリで確認できます。

英語の文言一覧
 日本語の文言一覧

対応言語一覧

Video.jsで切り替えることが出来る言語は、以下のVideo.js公式のリポジトリで確認できます。

対応言語一覧

言語変更

対応言語読み込み

例えば日本語に言語変更したい場合、以下のようにVideo.jsが用意するスクリプトを読み込む必要があります。

以下は日本語の文言を読み込む場合です。

<script src="https://vjs.zencdn.net/7.20.3/lang/ja.js"></script>

フォーマット

<script src="https://vjs.zencdn.net/Video.jsのバージョン/lang/言語.js"></script>

上記のフォーマットでスクリプトを読み込むことで、指定言語に対応する文言を読み込むことが出来ました。

言語変更

以下のようにオプション、もしくは関数で変更することが出来ます。

オプション

const video1 = videojs('video1', {
    'language': 'ja',
});

関数

const video1 = videojs('video1'});
video1.language('ja');

ローカルでの文言変更

上記の方法ではVideo.jsのスクリプトを利用して英語以外の文言を読み込む方法を紹介しました。ですがスクリプトを読み込まずに、オプションや関数を利用して文言を変更する方法もあります。

Video.js全体の変更

videojs.addLanguage()関数を利用すれば、作成されるPlayer全てに指定の文言が適用されます。

videojs.addLanguage('ja', {
    {
        'Play': '再生！！！',
        'Mute': '停止！！！',
    }
})
const video1 = videojs('video1', {
    'language': 'ja',
});

また、上記の指定の場合現在の言語設定が日本以外の場合は設定した文言は適用されないので、オプション指定で日本語表示にしています。

注意

videojs.addLanguage()関数を利用しても、既に生成されているPlayerには適用されませんのでご注意ください。

// 先にvideo1を生成
const video1 = videojs('video1', {
    'language': 'ja',
});

// video1には適用されない
videojs.addLanguage('ja', {
    {
        'Play': '再生！！！',
        'Mute': '停止！！！',
    }
})

Player毎の文言変更

videojs.addLanguage()関数はPlayer全体の設定変更方法ですが、Player毎に設定変更をする方法もあります。

languagesオプションを指定することで、Player毎の文言変更が可能です。

const video1 = videojs('video1', {
    'languages': {
        'ja': {
            'Play': '再生！！！',
            'Mute': '停止！！！',
        },
        'en': {
            'Play': 'Play！！！',
            'Mute': 'Mute！！！',
        },
    },
});

Twitterもやってます