Theoplayerでサムネイルをプレビューする

森亮介

2020.07.20

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

最近の動画コンテンツでは、ほとんどプレイヤーにコンテンツのサムネイルを表示するようにできているかと思います。コンテンツのサムネイルとは、以下のようなものです(Youtubeから拝借)

全ての視聴者が動画の全体に興味があるわけではなく、特定の部分だけ見たいということがあります。例えば、サッカーの得点シーンの前後のみ、ライブの特定の曲のみなどです。サムネイルのプレビューは、コンテンツを探すために視聴者がビデオをスキャンし、目的のポイントに戻るまたは進むことを可能にするという利点が挙げられます(ユーザーエクスペリエンスの向上)。

もう一つの利点は、帯域幅の削減と言われています。ビデオをシークすることで、探しているコンテンツをより簡単に見つけることができるため、バッファリングする必要のあるコンテンツは少なくなります。これによりコスト削減が見込めます。

THEOplayerでもこのサムネイルプレビュー機能がサポートされていて、TextTrack APIを利用することで可能となります。

サムネイルの作成

サムネイルは、事前にレンダリングされた画像を含む別のWebVTTファイルを使用してストリームに追加されます。字幕を追加する時と同じですね。

今回は、

サムネイルを作成するためのPHPスクリプトを使ってサムネイル画像とvttファイルの両方が出力します。

スクリプトでは、ローカルPCでFFmpeg,FFprobe を使用しています。

FFmpegとFFprobeのバイナリへのパス、サムネイルの横幅、モザイクサイズ、画像のフォルダのURLと名前をスクリプトに設定し、以下のコマンドを実行しました。

$ php -S localhost:8888
$ curl http://localhost:8888/thumbnails.php?file=BigBuckBunny.mp4&output=video.vtt

※ 入力動画はBig Buck BUNNYを使用しています。

vttのなかみ

WEBVTT

00:00:00.000 --> 00:00:05.000
img1.jpg#xywh=0,0,160,90

00:00:05.000 --> 00:00:10.000
img1.jpg#xywh=160,0,160,90

00:00:10.000 --> 00:00:15.000
img1.jpg#xywh=320,0,160,90

00:00:15.000 --> 00:00:20.000
img1.jpg#xywh=480,0,160,90

~~~~~~~~~~~~~　以下略 ~~~~~~~~~~~~~

生成されたサムネイル

５枚のタイル画像が作成されます

Theoplayerに組み込み

player.sourceを設定する箇所にtextTracksを追加します。

player.source = {
    sources: [{
       "src": "<動画ファイルURL>",
       "type": "video/mp4"
    }],
    textTracks: [{
        default: true,
        src: '<vttファイルURL>',
        label: 'thumbnails',
        kind: 'metadata'
    }]
};