THEOplayerで作成した動画プレイヤーに自前で用意したチャプターマーカーを追加してみた

森 亮介

2020.09.29

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

本日私が頂くのは THEOplayer です。

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

Youtube とかでも、シークバーがチャプター分割されている動画がありますよね。

※ こういうやつ

THEOplayerではチャプターマーカーと呼ばれています。 シークバーにカーソルを合わせると、THEOplayerのチャプターマーカーとタイトルが、ユーザーがコンテンツのさまざまな部分をより簡単に識別できるようにします。また、動画のお気に入りの部分を再訪することもできます。

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

THEOplayerは、WebVTT、SRT、およびその他のテキストトラック形式でのチャプターマーカーのロードをサポートしています。 今回はWebVTT形式のチャプターマーカーでやってみます。

※ WebVTTは、HTML5標準の一部であるプレーンテキスト形式であり、字幕やクローズドキャプションの提供にも使用されます。これらのWebVTTファイルは非常に単純で、ビデオの特定の時間範囲の章のタイトルが含まれています。

WebVTTファイル

以下のファイルを準備します。

00:00:00.000 --> 00:00:18.958まではオープニングというタイトルを表示する　といった形式になります。

WEBVTT

1
00:00:00.000 --> 00:00:18.958
オープニング

2
00:00:18.958 --> 00:00:28.458
アジェンダ

3
00:00:28.458 --> 00:00:47.708
Freeプランで利用できる攻撃の種類

4
00:00:47.708 --> 00:01:01.708
デモホスト

5
00:01:01.708 --> 00:01:42.708
Gremlinへのサインアップとデモホストの起動

6
00:01:42.708 --> 00:04:05.000
CPU Attackの作成と実行

7
00:04:05.000 --> 00:06:11.000
Shutdown Attackの作成と実行

8
00:06:11.000 --> 00:07:36.000
Blackhole Attackの作成と実行

9
00:07:36.000 --> 00:07:49.000
まとめ

ファイルが準備できたら、http経由でアクセスできるところにアップロードします(s3やcloudinaryなど)

THEOplayerでチャプターマーカーを表示する

player.source = {
    ...
    textTracks : [{
        kind : 'chapters',
        src : 'https://<<Path to vtt file>>',
        srclang : 'ja'
    }]
};

textTracksというプロパティを追加します。

  • kind : chapters
  • src: vttファイルの場所
  • srclang: チャプターの言語

IOSやAndroidアプリの場合は、以下のページを参考にしてください。

確認

上記画像のように、シークバーがvttファイルで設定した時間で分割され、ポインターを置くと画面中央部にタイトルが表示されています。

チャプターを作成して動画を分割し視覚化できると視聴者が動画の目的の部分を探すのに役立つので利用価値は高いのではないでしょうか？ 今回の例のようなセミナー動画でとても便利だと思いました。 UXを向上させるために是非使っていきたいですね。

最後に今回のブログで使った動画を貼っておきます。

チャプターを作成しないバージョン(Youtube)

チャプターを作成したバージョン(THEOplayer)

*