TVerのシークバーサムネイルや字幕の装飾表示について

TVerで開発ディレクションを担当している @okada-tver です。

この記事は　TVer Advent Calendar 2025 の12/7分の投稿です。
今日のお題はタイトルの通りですが、今年の前半くらいにTVerアプリはシレっと「シークバーサムネイル」や「字幕の装飾表示」に対応しました。

シークバーサムネイル	字幕の装飾表示
	※イメージ画像です

参考サイト（取り上げていただきました）

TVerさん今更ですか。。ありふれた話じゃんみたいな話はありますが、本日はこの辺についてもう少し詳細について触れたいと思います。

シークバーサムネイルとは

取り上げていただいた記事にも記載してくれていますが、シークバー位置のプレビュー画像を表示して、シークしたい場所を探しやすくする機能です。
このプレビュー画像の出し方には大きく2種類あります。

①本編映像のkeyフレームや再生する動画自体を取り出してプレビュー表示する方法

②本編映像とは別にサムネイル画像を用意して表示する方法

TVerでは②のストリーミングとは別の画像ファイル群（sprite sheet）を事前に用意する方式です。

前者の方がシステム的にはシンプルではあるのですが、動画のデコード処理が必要になるため若干の処理ラグは避けられず、TVerでは後者を採用しています。
（TVerでも過去に前者で機能リリースしようとしたことがあったのですが、スペックの低いスマホやCTVデバイスでの描画ラグが微妙過ぎて一度見送りとなっていました）

sprite sheetとは

小さい画像を繋ぎ合わせた1枚のタイル画像です。
参考リンクがわかりやすいですが、例えば1本の動画から10x10のタイル画像を作成するとこのようなイメージのものです。

hlsやdashなどのストリーミング生成時(encode/package時)についでに作成しておきます。
例のように動画尺を100分割して1枚の画像を生成するようなやり方もありますし、x秒間隔で決まったサイズの画像を生成するようなやり方も取れます。

spritesheetを利用するメリットは、タイル画像の中身の一つ一つを別々に取得するとhttpリクエストが大量に走ってしまう（100枚だったら100回リクエスト）ことがないように、1枚のタイル画像にしておくことでhttpリクエストの通信回数を減らすことができます。
また、（再生処理とは別の処理として）ただの画像を切り取って描画しているだけなので、プレイヤーとしてのデコード処理を挟まなずに処理負荷低く描画することができるというメリットがあります。

タイルの画像一つ一つはシークバーサムネイルとしての表示用途に限定されているので、画質も低めにしておき高速化も図っています。

説明するとただこれだけの話です。笑
サービス開始当初から考慮して作っておけば良いのですが、
既に大量のストリーミングを作成済で、事後にspritesheetを作ろうと思うと、もう一度大量の動画を最処理しなければならずシステムコストが嵩んでしまうというジレンマがあります。
TVerも他案件での大規模なシステムリプレイスに合わせて、時間をかけて準備しました。

字幕の装飾表示

続いて字幕の装飾表示についてです。
どういう機能かというと、名前の通り、文字に色がついていたり、字幕の表示位置を調整して表示する機能です。
番組によって使い方が様々だったり、そこまで作り込んでない番組も多々ありますが、以下の画像のように発言している演者によって色を変えたり、表示するテキストの位置を映像の邪魔にならない場所に絶妙に調整していたりします。

（字幕の装飾表示を再現したイメージ画像です）

テレビ放送の規格 ARIB規格

テレビ放送では字幕の歴史はそれなりにあり、ARIBという放送の規格として定義されています。
おそらくほとんどの人がテレビ放送を見る中で目にしたことがあり、意識したことすらないというのがほとんどだと思いますが、テレビ放送で表示する字幕はこの技術規格に則って作成する必要があります。

ARIB規格：デジタルテレビジョン放送におけるデジタル字幕ファイル交換フォーマット
https://www.arib.or.jp/kikaku/kikaku_hoso/desc/std-b36.html

配信における字幕規格 webvtt、TTML

一方で、ARIBは地上波放送の規格なので、インターネットの世界ではそのまま使えません。
インターネットの世界ではW3Cで標準化されておりwebvttやTTMLという規格があり、mpeg dashやHLSのストリーミング配信の中でこれらの字幕を使うのが一般的です。

webvtt(The Web Video Text Tracks Format)
https://www.w3.org/TR/webvtt1/

TTML(Timed Text Markup Language 2)
https://www.w3.org/TR/ttml2/

TTMLの方がより複雑な装飾表現(cssで表現するようなイメージ)に対応できるそうなのですが、TVerの場合はwebvttです。
TTMLは装飾表現が多彩な一方で、iOSデバイスなどで互換性の観点でチューニングに課題もあったりするため、配信サービスにおいてはwebvttの方が推奨されていたりします（そこまで複雑な装飾表現を使わないのであれば）

Netflixをはじめとする海外系のサービスでは、番組特有の装飾表現を利用するケースはほぼなく(おそらく、、)、iOSやAndroidでは以下のような設定画面にある装飾設定が適用された状態で表示しています。

例：iOSの字幕の表示設定

例1	例2	例3	例4

画像を見てもらえたらわかりますが、OS設定では基本的に中央揃え、色表現がないものが普通です。

字幕の装飾表示にこだわるのは日本語特有の話だとよく言われています。
日本語の場合は改行の切れ目がちょうど良くないと視認性が悪くなったりしますが、英語だったら単語で区切れてさえいれば気にならないよとか、字幕というものに対する当たり前品質や考え方が異なるからだと思っています。

実際、海外の友人からも字幕の装飾表現を気にするのは日本ぐらいだよなんて話も聞いたことがあります。

まとめ

本記事では今年TVerでようやく対応したシークバーサムネイルや字幕の装飾表現についてお伝えしました。
字幕の装飾は一見地味ですが、テレビ番組の制作者が届けたい視聴体験をそのままネット配信に持っていくための実は大事な機能だったりします。
もしこの記事を見た後にTVerを使っていただける場合、少し気にして触ってもらえたらありがたいです。

明日の記事は @pikopiko_hammer さんです。