THEOplayer が持つ多言語対応機能をまとめてみた

THEOplayer が持つ多言語対応機能をまとめてみた

THEOplayer を使用する事でお手軽に多言語対応した動画配信を実現する事が出来ます
#THEOplayer
大前諒祐

大前諒祐

facebook logohatena logotwitter logo
Clock Icon2020.10.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、大前です。

今回は THEOplayer に関するエントリとなります。

動画配信をサービスとして提供するにあたり、より視聴者層を拡充するためにはサービスのグローバル対応を考慮していく必要があります。

今回は、動画プレイヤー製品である THEOplayer がサポートする多言語対応機能を紹介したいと思います。

THEOplayer が持つ多言語対応機能

THEOplayer 公式ブログ（Speak the Language: Multi Audio and Language Localisation）では、多言語に対応する機能として以下が紹介されています。

  • UI のローカライゼーション
  • 字幕対応
  • マルチオーディオ対応


以下、各要素をみていきます。

UI のローカライゼーション

グローバルに動画配信を行うにあたり、動画プレイヤーの UI も多言語対応が求められる要素の１つです。

日本人には日本語の UI を、英語圏のユーザには英語の UI を表示する事により、より良い視聴体験を届ける事が可能になります。

THEOplayer の UI はデフォルトで英語表記となっていますが、例えば日本語表記に変更したりする事が可能です。

以下サイトでデモが確認できますので、参照ください。


やってみた

では実際に THEOplayer の UI を英語から日本語表記に変更してみます。

前提として、THEOplayer でベースの SDK を生成しておきます。 SDK の作成方法について、以下を参考にしてください。


今回は HTML5 で SDK を作成し、以下の HTML をベースとして使用します。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>THEOplayer 2.X: Getting Started</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- THEOplayer library and css -->
    <script type="text/javascript" src="https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/THEOplayer.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/ui.css" />

</head>

<body>

    <div class="theoplayer-container video-js theoplayer-skin vjs-16-9"></div>

    <script>
        var element = document.querySelector(".theoplayer-container");
        var player = new THEOplayer.Player(element, {
            libraryLocation: "https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
        });

        // OPTIONAL CONFIGURATION

        // Customized video player parameters
        player.source = {
            sources: [{
                "src": "https://cdn.theoplayer.com/video/elephants-dream/playlist-single-audio.m3u8",
                "type": "application/x-mpegurl"
            }]

        };

        player.preload = 'auto';
    </script>
</body>

</html>


以下ドキュメントに UI の言語を変更する方法が記載されているので、こちらに従って設定を行います。 How to change the default UI language to other

HTML5 の場合、THEOplayer.Player() 内で言語情報を指定する必要があります。 また、Language JSON Links にて各言語の JSON が提供されているので、こちらを流用して設定が可能です。


今回は Code examples Web SDK に従い、UI 情報を追加しました。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>THEOplayer 2.X: Getting Started</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- THEOplayer library and css -->
    <script type="text/javascript" src="https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/THEOplayer.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/ui.css" />

</head>

<body>

    <div class="theoplayer-container video-js theoplayer-skin vjs-16-9"></div>

    <script>
        var element = document.querySelector(".theoplayer-container");
        var player = new THEOplayer.Player(element, {
            libraryLocation: "https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
            ui: {
                language: 'ja',
                languages: {
                    'ja':
                    {
                        "Play": "再生",
                        "Pause": "一時停止",
                        "Current Time": "現在の時間",
                        "Duration Time": "長さ",
                        "Remaining Time": "残りの時間",
                        "Stream Type": "ストリームの種類",
                        "LIVE": "ライブ",
                        "Loaded": "ロード済み",
                        "Progress": "進行状況",
                        "Fullscreen": "フルスクリーン",
                        "Non-Fullscreen": "フルスクリーン以外",
                        "Mute": "ミュート",
                        "Unmute": "ミュート解除",
                        "Playback Rate": "再生レート",
                        "Subtitles": "サブタイトル",
                        "subtitles off": "サブタイトル オフ",
                        "Captions": "キャプション",
                        "captions off": "キャプション オフ",
                        "Chapters": "チャプター",
                        "You aborted the media playback": "動画再生を中止しました",
                        "A network error caused the media download to fail part-way.": "ネットワーク エラーにより動画のダウンロードが途中で失敗しました",
                        "The media could not be loaded, either because the server or network failed or because the format is not supported.": "サーバーまたはネットワークのエラー、またはフォーマットがサポートされていないため、動画をロードできませんでした",
                        "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "破損の問題、またはお使いのブラウザがサポートしていない機能が動画に使用されていたため、動画の再生が中止されました",
                        "No compatible source was found for this media.": "この動画に対して互換性のあるソースが見つかりませんでした"
                    }
                }
            }
        });

        // OPTIONAL CONFIGURATION

        // Customized video player parameters
        player.source = {
            sources: [{
                "src": "https://cdn.theoplayer.com/video/elephants-dream/playlist-single-audio.m3u8",
                "type": "application/x-mpegurl"
            }]

        };

        player.preload = 'auto';
    </script>
</body>

</html>


作成した上記の HTML を開き、UI の言語が変わっているか確認してみます。

Pause が 一時停止 に変わっている事が確認できます。


一方で、Settings については英語表記のままとなっています。


これは、Settings に対応した言語情報を設定していない為です。（設定がない場合、デフォルトである英語表記になります）

Settings と、Quality に対応した日本語の UI 情報を追加しました。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>THEOplayer 2.X: Getting Started</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- THEOplayer library and css -->
    <script type="text/javascript" src="https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/THEOplayer.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/ui.css" />

</head>

<body>

    <div class="theoplayer-container video-js theoplayer-skin vjs-16-9"></div>

    <script>
        var element = document.querySelector(".theoplayer-container");
        var player = new THEOplayer.Player(element, {
            libraryLocation: "https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
            ui: {
                language: 'ja',
                languages: {
                    'ja':
                    {
                        "Play": "再生",
                        "Pause": "一時停止",
                        "Current Time": "現在の時間",
                        "Duration Time": "長さ",
                        "Remaining Time": "残りの時間",
                        "Stream Type": "ストリームの種類",
                        "LIVE": "ライブ",
                        "Loaded": "ロード済み",
                        "Progress": "進行状況",
                        "Fullscreen": "フルスクリーン",
                        "Non-Fullscreen": "フルスクリーン以外",
                        "Mute": "ミュート",
                        "Unmute": "ミュート解除",
                        "Playback Rate": "再生レート",
                        "Subtitles": "サブタイトル",
                        "subtitles off": "サブタイトル オフ",
                        "Captions": "キャプション",
                        "captions off": "キャプション オフ",
                        "Chapters": "チャプター",
                        "You aborted the media playback": "動画再生を中止しました",
                        "A network error caused the media download to fail part-way.": "ネットワーク エラーにより動画のダウンロードが途中で失敗しました",
                        "The media could not be loaded, either because the server or network failed or because the format is not supported.": "サーバーまたはネットワークのエラー、またはフォーマットがサポートされていないため、動画をロードできませんでした",
                        "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "破損の問題、またはお使いのブラウザがサポートしていない機能が動画に使用されていたため、動画の再生が中止されました",
                        "No compatible source was found for this media.": "この動画に対して互換性のあるソースが見つかりませんでした",
                        "Settings": "設定",
                        "Quality": "画質"
                    }
                }
            }
        });

        // OPTIONAL CONFIGURATION

        // Customized video player parameters
        player.source = {
            sources: [{
                "src": "https://cdn.theoplayer.com/video/elephants-dream/playlist-single-audio.m3u8",
                "type": "application/x-mpegurl"
            }]

        };

        player.preload = 'auto';
    </script>
</body>

</html>


再度確認してみると、設定した部分について UI が日本語表記に変更されている事が確認できます。


この様に、THEOplyer では UI の言語を柔軟に変更する事が出来ます。細かな部分ですが、サービスのグローバル対応を考慮した際に必要な要素になってくるかと思いますので、是非ご活用ください。

字幕対応

異なる言語圏のユーザにコンテンツを届けるためには、字幕（キャプション）の活用が不可欠です。

THEOplayer では、映像ストリームの字幕情報を自動的に検出し、動画プレイヤーに字幕表記を追加してくれます。

THEOplayer automatically detects when there are captions embedded in the stream and plays them back without additional configuration. Captions are simple to control and viewers can switch smoothly between languages. （THEOplayerは、ストリームにキャプションが埋め込まれている場合に自動的に検出し、追加の設定なしに再生します。キャプションの制御は簡単で、視聴者は言語をスムーズに切り替えることができます。）

CEA Closed Captions and Subtitles With THEOplayer にて、デモの確認が可能です。


また、映像ストリームに字幕情報が含まれていない場合には、任意の字幕トラックを追加する事も可能です。

マルチオーディオ対応

字幕だけでなく、多言語に対応したオーディオストリームを含められれば、より高い多言語対応が可能となります。

オーディオに関しても字幕と同様、THEOplayer は複数のオーディオストリームを自動で検出してくれますので特に追加の設定は不要です。

Using streams with multiple audio features provides multiple language tracks for your video content. （複数のオーディオ機能を備えたストリームを使用すると、ビデオコンテンツに複数の言語トラックが提供されます。）

Multiple Audio and Multiple Language にて、デモの確認が可能です。

おわりに

THEOplayer が持つ多言語対応機能を紹介しました。

上述した通り、字幕や複数オーディオなどは追加の設定が必要ないため、是非活用を検討してみてください。


以上、AWS 事業本部の大前でした。

参考

Share this article

facebook logohatena logotwitter logo

関連記事

AKIBA.SaaS Online#3で「THEOplayerで 快適な動画作成を」というタイトルで話しました！ #AKIBASaaS

AKIBA.SaaS Online#3で「THEOplayerで 快適な動画作成を」というタイトルで話しました！ #AKIBASaaS

User avatar
きだぱん
2023.01.17
THEOplayerに入門してみた~特徴や基本的な機能について~

THEOplayerに入門してみた~特徴や基本的な機能について~

User avatar
きだぱん
2022.12.06
［レポート］低遅延ストリーミング配信とマルチ動画プレイヤー #devio2022

［レポート］低遅延ストリーミング配信とマルチ動画プレイヤー #devio2022

User avatar
きだぱん
2022.08.16
従量課金でお手軽に 1秒未満の低遅延ライブ配信が行えるサービス「hesp.live」がリリースされたので触ってみた

従量課金でお手軽に 1秒未満の低遅延ライブ配信が行えるサービス「hesp.live」がリリースされたので触ってみた

User avatar
大前諒祐
2022.01.25
Classmethod's white logo
Facebook's logo
X's logo
YouTube's logo

© Classmethod, Inc. All rights reserved.