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

2020.07.20

最近の動画コンテンツでは、ほとんどプレイヤーにコンテンツのサムネイルを表示するようにできているかと思います。 コンテンツのサムネイルとは、以下のようなものです(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を使用しています。

※ Big Buck Bunny Copyright (C) 2008 Blender Foundation | peach.blender.org Some Rights Reserved. Creative Commons Attribution 3.0 license.

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

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

生成されたサムネイル

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

Theoplayerに組み込み

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

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

動作確認

S3にサムネイル画像、vttファイル、playerを表示させるHTMLをアップロードして確認してみます。

再生ボタンを押し、シークバーにカーソルを合わせると、ツールチップにビデオコンテンツのサムネイルが表示されるようになりました!

おわりに

THEOplayer でサムネイルプレビューを表示してみました。 ユーザーエクスペリエンスの向上、帯域幅の削減といった利点があるので、動画コンテンツのサービスをやるなら是非使いたい機能だと思いました。

Elastic Transcoder, Lambdaなどを使用してサムネイル画像、自動でvttファイルを生成し、サムネイルプレビューを導入してみるのも面白そうですね。