THEOplayer で作成した動画プレイヤーに自前で用意した字幕を追加してみた

大前諒祐

2020.07.08

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

こんにちは、大前です。

 

今日は THEOplayer に関するブログとなります。

動画プレイヤーによく付随する機能として、字幕があります。

Youtube とかでも、右下の方に字幕アイコンがありますよね。

 

今日は自前で用意した字幕ファイルを、THEOplayer を使って字幕として表示出来るようにしてみたいと思います。

やってみた

THEOplayer の設定

THEOportal にログインし、SDK を作成していきます。

左メニューから「SDKs」を選択し、「＋CREATE」をクリック。

 

SDK の名前を入力し、「NEXT」をクリック。

 

今回は特に特別な機能を使用しないので、Features は Basic のまま「NEXT」をクリック。

 

今回は S3 に HTML ファイルをアップロードして動作検証を行うので、Domain は後ほど追加しますが、一旦はデフォルトのまま「PUBLISH」をクリック。

 

少し待つと、SDK が作成完了します。

 

「How to embed my THEOplayer HTML5 SDK ?」をクリックし、「FULL SAMPLE PAGE」タブを開くとソースコードが表示されます。

これをコピーし、index.html のように HTML ファイルを作成しましょう。

 

生成されたソースコードをそのまま使っても良いですが、デフォルトでは広告など必要以上に多機能なプレイヤーになっているので、不要な部分を削除します。

今回の index.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" />
    <!-- Chromecast SDK -->
    <script type="text/javascript" src="//www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

    <!-- THEOplayer library and css -->
    <script type="text/javascript" src="https://cdn.myth.theoplayer.com/aaaaaaaa-1234-5678-9000-123456789000/THEOplayer.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.myth.theoplayer.com/aaaaaaaa-1234-5678-9000-123456789000/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/aaaaaaaa-1234-5678-9000-123456789000"
        });

        // 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>

 

作成したファイルをローカルで開くと、動画プレイヤーが表示され、動画が流れる事が確認できます。

 

また、THEOplayer からデフォルトで生成される動画には既に字幕が埋め込まれており、Chinese と French が確認できます。

今回は、ここに任意の字幕を追加していきましょう。

 

字幕ファイルの作成

まず、字幕ファイルをローカルで作成します。

字幕ファイルは WebVTT 形式で作成します。

WebVTT の記法等については下記等を参照ください。

第1回 WebVTTの基本仕様

今回は、以下の sample_caption.vtt を作成しました。

WEBVTT

1
00:00:00.000 --> 00:00:10.000
こんにちは、これはテスト字幕です

2
00:00:10.000 --> 00:00:20.000
見えてますか？

 

先ほど作成した index.html と一緒に S3 に格納します。公開設定は、必要に応じて行います。

 

動画プレイヤーの修正

動画プレイヤー（index.html）を修正し、上記にて作成した字幕ファイルを読み込めるようにします。

player.source 内に textTracks を追加する形となります。   src に S3 に配置した vtt ファイルのパスを指定します。

<!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" />
    <!-- Chromecast SDK -->
    <script type="text/javascript" src="//www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

    <!-- THEOplayer library and css -->
    <script type="text/javascript" src="https://cdn.myth.theoplayer.com/aaaaaaaa-1234-5678-9000-123456789000/THEOplayer.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.myth.theoplayer.com/aaaaaaaa-1234-5678-9000-123456789000/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/aaaaaaaa-1234-5678-9000-123456789000"
        });

        // Customized video player parameters
        player.source = {
            sources: [{
                "src": "https://cdn.theoplayer.com/video/elephants-dream/playlist-single-audio.m3u8",
                "type": "application/x-mpegurl"
            }],
            textTracks : [{
                default: false,
                kind : 'subtitles',
                label: 'Japanese',
                src : 'https://hogehoge.s3-ap-northeast-1.amazonaws.com/sample_caption.vtt',
                srclang : 'jp'
            }]
        };

        player.preload = 'auto';

    </script>
</body>

</html>

 

修正した index.html は再度 S3 にアップロードしておきましょう。

 

THEOplayer の Domains に S3 のドメインを追加

S3 上で THEOplayer による動画プレイヤーを動かしたいので、THEOportal 上で許可するドメインを追加する必要があります。

THEOportal にて先ほど作成した SDK を開き、画面下部の CONFIGURE > Domains より、index.html を配置した S3 のドメインを入力し、「＋」ボタンをクリックします。

 

これで、S3 上からでも THEOplayer が動かせるようになりました。

 

字幕が追加されている事を確認

では、最後に S3 上の index.html にアクセスして字幕が追加されているか確認します。

確認してみると、字幕メニューに先ほど textTracks で追加した内容が表示され、これを有効にすると、作成した字幕ファイルの内容が表示されました！

おわりに

THEOplayer で任意の字幕ファイルを追加してみました。

AI サービスなどを使用して自動で字幕ファイルを生成し、多言語対応した動画配信を行うのも面白そうですね。

 

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

参考

customer-story-analytics