TV 向け Web コンテンツを作成する

By Go Uehiro

はじめに

このガイドは Web サイトとアプリケーションを作成する Web 開発者向けに書かれたもので、ネット対応テレビとの互換性を高めるために Opera for Devices SDK の機能を使用して、サイトとアプリケーションを最適化できるようにすることを目的としています。

ご注意：テレビ向けの Web コンテンツに関するディスカッションを望まれる方は、フォーラム： Opera TV Content Development Discussions にアクセスしてください。

Opera SDK および Opera TV Emulator

「Opera for Devices Software Development Kit (SDK)」は、デバイス上でカスタマイズされたブラウザやウィジェットマネージャの提供を検討するデバイスメーカーを対象としています。ネット対応のテレビおよびセットトップボックスから、タブレット PC やネット対応のピクチャーフレームまで、Web へのアクセスを行えるデバイスであれば、ほとんどすべてのデバイス上で動作します。

SDK は、ビルディングブロック、モジュール、サンプル実装を提供しています。メーカーは Opera SDK を使用する際、ブラウザ（あるいは、ウィジェットマネージャなど、このガイドではカバーされていない他のコンポーネント）に接続するためのインテグレーション作業を特定のデバイスに対して行うことになります。そのため、SDK は一般公開はしておりません。

しかし、Web 開発者がネット対応のデバイスでの自分のサイトのテストやデバッグを手軽に行いたい場合は、Opera TV Emulator （先の Opera CDK）を利用できます。エミュレータは SDK と同じコアテクノロジーに基づいてビルドされており、Windows、Linux、Mac で実行する VirtualBox イメージとして機能し、SDK の機能と同等の正確なテスト環境が実現します。さらに Opera TV Emulator では、エンドユーザーのテレビやデバイスでは通常無効にされている Opera Dragonfly 機能を使用したリモートデバッグも行えます。

Opera TV Emulator をダウンロードする。

ご注意：エミュレータでテストやデバッグなどを行うことはできますが、一定の機能や特定の制限（デバイスのプロセッサ速度や利用可能なメモリなど）はデバイスによって異なるため、開発者の方々には、可能であれば実機でコンテンツをテストされることをお勧めします。

ネット対応テレビでの標準仕様のサポート

ネット対応テレビの通常の Web ブラウザを通してアクセスできるサイトやアプリケーションを作成する場合、開発者はデバイスのブラウザによりサポートされる Web 標準仕様を全面的に利用することができます。Opera の一連のプロダクト（デスクトップ、モバイル、デバイス）では、サポートされる機能は各ブラウザの中枢部分で実行される Presto エンジンのバージョンによって異なります。Opera SDK は現在（同記事の執筆時）、デスクトップとモバイルの最新リリースに使用されているエンジンと同じ Presto 2.6 に基づいています。これによって、開発者の方々は以下のような最新の標準仕様を活用することができます。

HTML5： <canvas>、<audio>、<video>、より広範なフォームのサポート（新しい入力タイプ、datetime などの新しい機能は実装されていますが、キーボードや空間ナビゲーション向けにはまだ最適化されていません）
CSS3： background、border、Web フォント、メディアクエリ、transition、2D transform

詳細は、Opera でサポートされる Web 仕様の一覧をご覧ください。Geolocation API やオフライン Web アプリケーションなどの一定の機能は、Presto の特定のバージョンでは有効ですが、Opera SDK を実行する一定のプラットフォームでは無効となっている場合がありますのでご注意ください。加えて、既に使用されているネット対応のテレビやデバイスでは、旧バージョンのブラウザがファームウェアの一部として出荷されています。デバイスメーカーによりファームウェアのアップデートが提供されない限り、エンドユーザーは簡単にブラウザをアップデートすることはできないため、ほとんどの出荷済みのデバイスでは旧バージョンのブラウザが実行していると考えられ、最新機能の多くには対応していません。このため開発者は、ユーザーのブラウザの機能の特定に JavaScript 機能 / オブジェクト検出などの技術を採用する必要があります。

開発者は、内部の opera:about インフォメーションページにあるユーザーエージェント ID の文字列で、Opera ブラウザで使用されている Presto のバージョンを確認することができます。Opera SDK の場合、現在の文字列は以下の通りです。

Opera/9.80 (Windows NT 6.0; U; en-GB) Presto/2.6.33  Version/10.61

コンテキストとフォーム要素のデザイン

コンテンツの使用目的は多種多様ですが、テレビで利用される Web コンテンツの場合、ある程度限られたコンテキストが考えられます。

テレビは一般的に居間に位置することから、テレビ上のコンテンツ（Web コンテンツを含む）は共有やソーシャル体験を提供することが多いと思われます。

ユーザーのアクティビティは主に、情報を参照する場合（例として、映画出演者の詳細の確認、天気予報、テレビ番組など）や各種サービスへのアクセス時に発生します。このためテレビ向けの Web コンテンツは、全体的なプレゼンテーション、ナビゲーション、機能、また、関連するあらゆる機能や情報への簡単かつ明確なアクセスを考慮して最適化される必要があります。

アダプティブレイアウト

テレビは通常、以下の解像度に対応しています。

SDTV（標準画質テレビ）： 720×480 (NTSC) および 720×576 (PAL)。ディスプレイを 2 つのインターレースされた部分（243 および 288 ライン）に分割する。
EDTV： 720×480 (NTSC) および 720×576 (PAL)。プログレッシブスキャンによる単一の画像として表示される。
HDTV（高精細度画質テレビ）： 1280×720（プログレッシブスキャンを使用する "HD Ready" あるいは 720p とも呼ばれる）および 1920×1080 （"Full HD" - 1080i インターレース方式、あるいは、1080p プログレッシブ方式）。

最新のネット対応テレビの多くは、最低限の解像度として 1280×720 に対応しています。1920×1080 のフル HD 解像度のテレビでは、通常、720p のコンテンツはアップスケールされます（デバイスによって異なる）。セットトップボックスや、同様のネット対応のデバイスは、 SDTV あるいは EDTV に接続される場合があります。このような場合、通常はダウンスケールし、実際の解像度をレターボックス変換 (16:9 → 4:3) してテレビ画面の物理的な解像度に適合させます。

接続しているテレビセットの種類に関わらず、ネット対応のデバイスの一部は、さまざまな解像度で実行されます。例えば、（Opera のデスクトップ版ブラウザのカスタムバージョンを使用する）任天堂の Wii インターネットチャンネルの場合、実際の横幅は 800 ピクセルで表示され、高さはテレビのタイプ（縦横比が 4:3 あるいは 16:9）およびユーザー設定によって変わります。

ネット対応のテレビデバイスのみをターゲットにしている開発者の場合、最低 1280×720 の解像度向けにデザインするか、あるいは、1280×720 および 1920×1080 向けにそれぞれ最適化される別々のバージョンを提供するべきでしょう。

コンテンツが標準画質テレビおよび高画質テレビで表示される必要がある場合は、開発者はこの解像度向けに最適化されるバージョンを別に作成してもよいでしょう。

しかしながら、サイトをより持続可能で維持しやすくするには、コンテンツ、特にスクリーンレイアウトを、さまざまな画面解像度に適合するように柔軟性をもたせて作成するとよいでしょう。

アダプティブレアウト向けに利用できるテクノロジーが以下の通りいくつかあります。

流動的なレイアウト

レイアウトコンテナの縦横の定義にパーセンテージを基準とした値を使用します。さらに、ピクセル値の max-width、min-width、max-height、min-height と組み合わせて、コンテナの流動性に上限・下限を設定します。

CSS2.1 メディアタイプ

CSS2.1 を使用して、デバイスの特定のクラスにのみスタイルシートが適用するように定義することができます。このテクニックは一般的に screen や print に対して別のスタイルを指定するために使用され、例えば、これにより印刷用の別のページを作成する必要がなくなります。CSS2.1 ではさらに、テレビ向けのスタイルの定義も行えます。

ネット対応のデバイスが自らをテレビとして認識するかどうかは、メーカーがブラウザをどのように設定して実装したかに関わってきます。このため、開発者はターゲットとするプラットフォームがこの設定を有効としている場合のみ、この方法を使用することができます。media="screen" デバイスと認識する大多数の一般的な Web コンテンツとの互換性を考え、現在あるデバイスはほとんど media="tv" を無視するようになっています。

CSS2.1 は、以下のように外部の別のスタイルシートにリンクした形で指定することができます。

<link rel="stylesheet" media="screen" href="...">
<link rel="stylesheet" media="tv" href="...">

あるいは単一のスタイルシート内で、以下のように異なる @media セクションを定義することができます。

@media screen { /* styles for normal on-screen presentation */ }
@media tv { /* tv specific styles */ }

CSS3 メディアクエリ

CSS2.1 メディアタイプは、デバイスを大まかなカテゴリ（screen、print、tv など）に分類し、自らをこれらとして認識するデバイスにのみ適用されます。一方、CSS3 はこの概念を拡張したもので、開発者は適用すべきスタイルを特別な条件として定義することができ、さまざまな条件の下でレイアウトがどのように描画されるべきかを細かくコントロールすることができます。例えば、デバイスの画面幅・高さ、解像度、色深度などのさまざまな要因によって変わるレイアウトを作成することができます。

CSS3 メディアクエリは、CSS2.1 メディアタイプと同様、<link> 要素の一部として定義することができます。

<link rel="stylesheet" media="screen and (min-width: 1920px)" href="...">
<link rel="stylesheet" media="screen and (min-width: 1280px) and (min-width: 1920px)" href="...">
<link rel="stylesheet" media="screen and (max-width: 1280px)" href="...">

あるいは、スタイルシートの @media セクションを使用することができます。

@media screen and (min-width: 1920px) { /* Full-HD styles */ }
@media screen and (min-width: 1280px) and (max-width: 1920px) { /* HD-Ready  styles */ }
@media screen and (max-width: 1280px) { /* smaller than HD-Ready styles * }

セーフエリア

テレビは従来、画面の端に位置するコンテンツは切り捨てられるか、まったく表示されないため、通常の解像度の幅と高さ全体で表示を行うことはできませんでした。この問題は一部の高性能デバイスでは改善、あるいは現代のデジタルテレビセットでは解決しましたが、重要なコンテンツとコントロールを「セーフエリア」に配置し、ビューポートの端、約 5% に余白をもたせることを開発者にお勧めします。

シングルウィンドウブラウジング

一部のデバイスでは、ブラウザで別のタブを開くことができ、エンドユーザーがタブの切り替えを行えるインターフェイスがありますが、ネット対応のテレビの多くは、シングルウィンドウモードのみで実行します。その場合、新たにウィンドウを開くためのコール（JavaScript、あるいは、リンクに target 属性を指定するより簡単なテクニックを通した）はすべて、現在のウィンドウ上で実行されます。サイトやアプリケーションが別のウィンドウを使用してヘルプを表示したり、より複雑なケース（Web ベースのメールクライアントなど）では、子ウィンドウが JavaScript を使用して親ウィンドウと状態維持のための通信を行ったり、よく使用される関数を親ウィンドウが提供するような設計がなされている場合には特に、上記の点を念頭に置く必要があります。このような場合には、Web アプリケーションが単一のウィンドウを使用するように変更する必要があります。

スクロール

理想としては、テレビ向けに最適化された画面上のサイトやアプリケーションのコンテンツを、ユーザーがスクロールする必要がないような形で、すべて提示できるように開発者は努めるべきです。それが可能でない場合は、少なくともコンテンツを画面幅に適合させ、ユーザーが縦スクロールするだけで済むようにするべきでしょう。

overflow: auto; でスタイルされたインラインフレームやコンテナは Opera SDK では問題なく機能します。またユーザーは、ネット対応のデバイスに標準で搭載されている空間ナビゲーションを使用してフレームやコンテナ（必要であればページ全体）をスクロールすることができます。しかしながら、よりユーザーが使用しやすいようにするため、ブラウザのデフォルトのスクロールバー・メカニズムの代わりに、カスタムのコントロールやインターフェイスの要素（コンテンツカルーセルなど）を作成した方が良いでしょう。

テキストの使用

テレビはデスクトップやノートブックタイプのデバイスと互換性のある解像度で実行しますが、ユーザーは実際には画面からかなり離れた位置にいます（一般的には数メートル）。この点をふまえて、テキストやグラフィック要素のサイズを決めることが重要です。

開発者は以下の方法でテレビ画面上のテキストの判読性を高めることができます。

適度に大きなフォントサイズを選択する。正確なサイズは、使用される特定の書体、画面の物理的なサイズ、デバイスが実行する解像度によって変わりますが、一般的には約 22 ピクセルが理想です。
一行の長さを 10 単語以下に抑える。
先頭や行間のスペースを十分とる。

デスクトップ PC とは異なり、デバイスで利用できるフォントの数は通常制限されています。Bitstream Vera （serif、sans-serif、等幅フォント）など、幅広く使用されている Linux フォントは利用できます。エンドユーザーはデバイスにプリインストールされたもの以外のフォントをインストールすることはできません。しかしながら、Opera SDK ブラウザでは CSS3 Web フォント（Typekit や Google Font API のようなサードパーティのサービスを通して提供されるフォントを含む）をサポートしています。

グラフィック要素

グラフィック要素、特にボタンなどのインターフェイス要素に関しては、デザインを大胆で目立つようにすることが最も重要です。単一ピクセルの枠線などの極度に細かい詳細は、インタレース方式の解像度（SDTV および 1080i など）で実行するデバイスでは特に問題となるため避けてください。これは、繊細な効果やテクスチャーを必ず避けるべきであるという意味ではありません。しかし、必要な機能は、離れた距離からでも明確に識別できることが求められます。

グラフィカル要素をアダプティブレイアウトのテクニックと組み合わせる場合、歪みや解像度不足の問題を引き起こすことなくリサイズや変形を行える SVG を採用するとよいでしょう。しかしながら複雑な SVG 要素（ベクター画像や、レイヤー化された半透明のセクションの多用）は、より高い処理能力を計算とレンダリングに必要とするため、パフォーマンスに与える影響を考慮してバランスよく使用することが必要です。

色

一定の色の組み合わせはテレビ画面で問題を引き起こすことがあります。高性能のデバイスでも、純粋な白色、オレンジと赤、極端なコントラストなどは画像に歪みや障害を引き起こす可能性があるため避けるべきです。

また、テレビ画面のダイナミックレンジは従来のコンピュータモニターとは異なります。繊細なグラデーションと低コントラストの色は、識別しにくい組み合わせになりがちです。

ユーザーインターフェイスとコントロール

テレビは「インタラクション（対話）」があまり発生しないデバイスです。明確で障害のないインターフェイスのデザインと、そのコントロールを必要最低限に抑えることが重要です。

ユーザーとネット対応テレビの対話は、一般的にはリモートコントロールを使用して行われます。一般的な番号・チャンネルキーに加え、リモートコントロールには矢印・カーソルボタン、OK・確定ボタン、さまざまな特別な機能のキーがあります。

デバイスには一般的な文字を入力できる方法も用意されています。例えば、ユーザーはオンスクリーンキーボードやマルチタッチインターフェイスを使用して、ログインダイアログでユーザー名やパスワードを入力したり、検索欄でキーワードを入力したりできます。この方法は、1 つのキーに複数の文字が割り当てられている(1 のキーに ABC、2 のキーに DEF と続く）従来の携帯電話の方式に似ています。しかし、この文字入力方式は素早く行えず、ユーザーにとっては面倒です。アプリケーションではこのような文字入力を避けるか、必要性を最低限にして、選択可能なドロップダウン、メニュー、チェックボックス、カスタムビルドしたスクロール可能なインターフェイスなどで代用するべきです。

デバイスによっては、任天堂の Wii のように、リモートコントロールのカーソルキーやモーションセンサーで動かせるオンスクリーンポインタのオプションが使用できるものがあります。オンスクリーンコントロールは大きくて十分に余白があり、ポインタをそれほど正確に動かさなくてもアクティブ化できる大きなヒットエリアを提供する必要があります。

空間ナビゲーション

デスクトップ版 Opera ブラウザでは空間ナビゲーションが使用されています。空間ナビゲーションは、デスクトップ PC ではSHIFT+ 矢印 キーを使用しますが、テレビではリモートコントロールの方向キーに直接割り当てられています。

最も一般的なインタラクション方法は、デスクトップやノートブックタイプのデバイスでのキーボードアクセスと機能的には同じです。このため、デザイナーはコンテンツがキーボードからのアクセスに対応するようにしなければなりません。

伝統的に、リンク、フォーム要素、画像マップ領域など、一定のタイプの要素のみしかキーボードを用いてフォーカスすることはできません。（アクセシビリティの観点から）通常はキーボードのみでフォーカスしたり、使用したりできない他の一般的な要素に JavaScript の動作を付加するのではなく、これらの要素をコントロールとして使用することが望ましいでしょう。

また、Opera の空間ナビゲーションモードは、click あるいは mouseover の JavaScript イベントハンドラ、onclick や onmouseover 属性、あるいは addEventListener メソッドを使用して接続される要素に対してフォーカスを移動することができます。加えて、空間ナビゲーションは、tabindex 属性（0 以上の値の）をもつ要素へのフォーカスも許可します。

これらの新しい要素に対して、空間ナビゲーションはマウス動作をシミュレートします。つまり、これらの要素へ(または要素から)移動した時、mouseover および mouseout イベントのみが自動的にトリガーされる点にご注意ください。focus および blur イベントは、従来のキーボードフォーカスを受け取ることができる要素でのみトリガーされます。

ほとんどの状況において空間ナビゲーションは「枠にとらわれずに」機能しますが、開発者は CSS3 Basic User Interface specification for directional focus navigation を使用すると、要素がフォーカスを受け取る順序をさらに制御することができます。詳細に関しては、Tweaking spatial navigation for TV browsing をご覧ください。

フォーカスの表示

Opera は、現在フォーカスされている要素の周囲にデフォルトでアウトラインを表示します。必要であれば、特別なコンテンツのデザインに対し、このアウトラインを部分的に非表示にすることができます。

メーカーは、フォーカスインジケータや Web ページのさまざまな要素に適用されているデフォルトのスタイルのスキンを変更できるため、アウトラインのデザインはデバイスによって異なります。このため、開発者は複数のデバイスでサイトのテストを行ったり、デフォルトの設定のままでなく、スタイルに必要な値がすべて明白に設定されていることを確認する必要があります。

Opera では、単に outline:none でアウトラインを非表示にする方法は機能しません。理由は、ページの作成者が代わりとなるフォーカスの表示を提供することなく、このルールが一般的な reset.css スタイルシートで乱用されてきたからです。Opera のデフォルトのアウトラインインジケータを完全に抑制したい場合は、以下のようにして行えます。

:focus { outline: 0 solid; }

この場合、開発者は、control 要素に対照的な背景色を設定するなどして、現在フォーカスが画面のどこにあるのかをユーザーに明確に提示する別の方法を提供しなければなりません。例:

:focus { background: #f00; outline: 0 solid; }

:hover に特定のスタイルを使用する場合、一般的なキーボードのアクセシビリティを考慮して、より一般的な :focus に対するスタイルルールも考慮する必要があります（要素がフォーカスできることを前提とする）。

単に以下のように指定するのではなく、

a:hover { /* styles applied when hovering over a link */ }

:focus も考慮し、スタイルセレクタを以下のように変更します。

a:focus, a:hover { /* styles apply to hovering AND keyboard/spatial navigation focus */ }

パフォーマンスに関する考慮

プロセッサーとハードウェアアクセラレーション

一般的なネット対応のテレビセットのハードウェア仕様は、デスクトップコンピュータに比べやや劣るといえます。テレビのメインプロセッサのパワーは、ハイエンドのスマートフォンとローエンドのラップトップ PC の間に位置します。

デフォルトでは、Opera SDK は、Vega グラフィックスライブラリ（ボックスシャドウ、テキストシャドウ、変形、トランジションなど、高度な CSS3 ビジュアル効果も担う）を介したビジュアルコンポジット、SVG レンダリング、Carakan エンジンを通した JavaScript 処理など、あらゆるオペレーションにメインプロセッサを使用します。

ご注意：メインプロセッサは、レンダリングされたページのテレビ・画面へのソフトウェアの blit 処理にも使用されます。

テレビは、ビデオストリームのデコードなど、「高価な」オペレーション用のハードウェアアクセラレーションを提供する特別なチップセットを搭載しています。テレビセットで実行するブラウザがこのチップセットを利用するかどうかは、デバイスによります。これは通常、SDK のインテグレーション段階でメーカーが行うプロセスのためです。最新のテレビセットでは、アクセラレーションを使用する最も一般的な機能は、標準化された DirectFB および OpenGL ライブラリを介した bitblt 機能です。

これにより Vega や Carakan を含む、Opera SDK で最もプロセッサ負荷が大きい機能を加速化することは可能ですが、一般的には、開発者はハードウェアアクセラレーションを使用した特定の機能に依存することなく、ネット対応テレビの処理能力が比較的小さいという点を常に念頭に置いておくべきでしょう。

JavaScript

一般的なテレビのプロセッサは比較的に低スペックであるため、過度に重くて複雑な JavaScript は避けるべきです。カルーセル、スライドショー、展開・格納可能なボックスなど、一般的なビジュアル効果・GUI においては、カスタマイズ・最適化されたスクリプトの方が、通常、多目的なフレームワークよりも適していると言えます。また、キャッシュの制限やコンテンツの最適化の観点から、必要な時にだけスクリプトを読み込む、「遅延読み込み」のテクニックを使用することを推奨します。

レイヤーと不透明度

Web ページに画像を表示する処理（ビューポートに画像を blit する）には、通常、ほとんどのデバイスでハードウェアアクセラレーションが使用されます。しかしながら、複雑なレイアウト（例：重なっている半透明のグラフィック、不透明度を下げたレイヤー化されたブロックがブレンドされている）には、画面に表示されるべき各ピクセルの実際の値を計算できる高い処理能力が求められます。ページの全体的なパフォーマンス、特にスクロールやアニメーションに影響を与えるため、これらを多用しないでください。

アニメーション

多くの JavaScript フレームワークの利点のひとつは、複雑な効果とアニメーションを簡単にスクリプト化できることです。

しかしながら、簡単にトリガーでき、正確なフレームを必要としない単なる「視覚的な」効果（ユーザー操作に対するレスポンスなど）の場合には、トランジションや変形などの CSS3 機能を使用することを検討するべきです。これらは Vega グラフィックライブラリにより実行されるため、個々の段階で、色、位置、サイズなどの一定の値の明示的な変更に時間間隔やタイマーを使用する JavaScript を利用した一般的なソリューションより、通常はうまく機能します。

しかし、どんな形式のアニメーションも、パフォーマンス、サイトのレンダリングやアプリケーションの動作・反応が遅くなる点から高価だと言え、そのような効果は最低限に抑える必要があります。

キャッシングとコンテンツの最適化

ほとんどのネット対応のテレビには、Web コンテンツをキャッシュするハードドライブやソリッドステートドライブがありません（一部の DVR にはありますが、通常はビデオの録画に使用され、ブラウザは使用することができません）。このような状況では、ブラウザはディスク無しのモードで実行され、ダウンロードした Web コンテンツのキャッシュに利用できる RAM のみを使用します。

キャッシングに利用できるメモリの量はデバイスによって異なりますが、通常は 5 ～ 10MB 程度です。

利用できるキャッシュの量が極めて低いため、サイトのあるページから他のページに移動し、前のページに再度アクセスした時に、そのページがキャッシュされていると断定しない方がよいでしょう。これは Cookie にも当てはまり、ユーザーがサイトを一度離れた後は、そのサイトは保存されていない可能性があります（一回のアクセスの間に情報を保存するのは問題ないでしょう）。しかしながら、ネット対応のテレビとデバイスのダウンロード速度は、通常のブロードバンドの速度に近いため、前のページに戻った時にキャッシュがなくても、それほど大きな問題とはならないでしょう。ただし開発者は、キャッシュの制限を考えて、グラフィック、マルチメディアファイル、HTML、CSS、JavaScript ファイルなど、できるだけ多くのコンテンツの最適化を行うべきです。

この通常のキャッシュに加え、デバイス上のブラウザがデコード済みのページ（DOM、JavaScript オブジェクト、圧縮されていない画像すべてなど、Web ページのブラウザーの内部表現）を保存するのに使用できるメモリの量も制限されています。デコード済みページ用のメモリの制限に達すると、ブラウザはキャッシュが再度解放されるまで、現在読み込んでいるページのレンダリングと読み込みを中止します。この時の動作は各メーカーによって異なります。例えば、ユーザーに、読み込みが中断し、ページのレンダリングの継続が不可能であることを知らせるポップアップ警告の表示を行ったりします。確認後、ページと関連するキャッシュは削除されます。このように、ローエンドデバイスではメモリ不足を引き起こす可能性が高いため、画像および JavaScript リソースを多数使用する場合には注意してください。

マルチメディア

Presto 2.5 の導入以降、Opera には HTML5 の <audio> および <video> 要素のサポートが搭載されており、開発者はプラグイン無しで Web サイトにマルチメディアコンテンツを含めることができます。しかしながら、デバイスでサポートされているコーデックの詳細は、基礎をなすプラットフォームとデバイスメーカーが行ったインテグレーションにより大きく異なります。現在あるデバイスの多くは、<video> 要素内の MP4/H.264 コンテンツをハードウェアアクセラレーションを使用して再生できるように最適化されています。他のコーデック（動画向けの MPEG2、音声向けの MP3 など）も利用できる場合もありますが、すべてのネット対応テレビでサポートされているとは限りません。

テレビによっては、Adobe Flash や Adobe Flash Lite のコンテンツ（後者は任天堂 Wii の Opera ブラウザで利用可能）を利用することができます。<object> 要素を介して提供されるオーディオ・ビデオファイルの表示を行うサポートが搭載されている場合もあります。再度繰り返しますが、これはインテグレーションによる機能のため、依存することはできません。コンシューマーはプラグインやコーデックを自らインストールすることはできません。また、プラグインは定期的にアップデートされるため、将来的に新しい機能を使用するコンテンツとの互換性の問題が生じる可能性があります。

このガイドは、テレビ上のコンテンツに関する一般的な概念を説明することを目的としたものです。Opera TV Store のような環境を開発されている場合は、ビジュアルデザインやレイアウト、利用可能なマルチメディアコーデックに関連する制限や要件がさらにあるため、プロダクトに関連する特定の記事を参照してください。

This article is licensed under a Creative Commons Attribution 3.0 Unported license.