メディアの種類と形式のガイド: 画像、音声、動画コンテンツ

ほぼ最初の頃から、ウェブは何らかの形で視覚メディアのプレゼンテーションに対応してきました。当初、これらの機能は制限されていましたが、さまざまなブラウザーがウェブ上の静止画や動画の画像を含むことに関する問題に対して独自の解決策を見つけたため、有機的に拡張されました。現代のウェブは、メディアのプレゼンテーションや操作をサポートする強力な機能を備えており、さまざまな種類のコンテンツに対応するいくつかのメディア関連 API を備えています。一般的に、ブラウザーが対応するメディア形式は、ブラウザーの作成者に委ねられており、ウェブ開発者の作業を複雑にしています。

このガイドでは、ウェブ上で使用されるメディアを構成する可能性のあるメディアファイルの種類、コーデック、アルゴリズムの概要を説明します。また、これらの様々な組み合わせに対するブラウザーの対応情報や、ファイル形式の優先順位の提案、特定の種類のコンテンツに適したファイル形式の提案も提供しています。

リファレンス

画像

画像ファイルの種類と形式のガイド
主要なウェブブラウザーが対応している画像ファイルの種類とコンテンツ形式をカバーし、それぞれの種類についての基本的な情報を提供しています。利点、制限、使用例など、ウェブデザイナーや開発者が興味を持つ情報を提供します。
ウェブデザイナーのための画像ファイル形式
ウェブデザイナーにとって有用な様々な画像ファイルの種類についての基本的な情報であり、各種類のベストプラクティスや使用例、特定のコンテンツの種類に適した画像ファイル形式を選択するためのガイドラインなどが含まれています。

メディアファイルの種類とコーデック

メディアコンテナー (ファイルの種類)
メディアデータを含むファイルの種類のガイド。オーディオに特化したものもあれば、オーディオや映画などの複合視聴覚コンテンツに使われるものもあります。主要なウェブブラウザーが対応している各ファイル種別の概要と、ブラウザーの対応情報、対応している機能が含まれています。
ウェブ音声コーデックガイド
一般的なメディアコンテナーや主要なブラウザーで許可されているオーディオコーデックのガイド。メリット、制限、主要な仕様と機能、ユースケースが含まれています。また、与えられたコンテナーでコーデックを使用するための各ブラウザーのサポートもカバーしています。
ウェブ動画コーデックガイド
この記事では、主要なブラウザーが対応してている動画コーデックについての基本的な情報と、一般的には対応されていないが、まだ遭遇する可能性のあるいくつかの情報を提供します。また、コーデックの機能、利点、制限、ブラウザーの対応レベルと制限についても説明します。
一般的なメディアタイプの "codecs" 引数
メディア形式を記述する MIME タイプを指定するときは、 type 文字列の一部として codecs 引数を使用して詳細を提供できます。このガイドでは、一般的なメディアタイプの codecs 引数の形式と可能な値について説明します。
WebRTC で使われるコーデック
WebRTC はコンテナーを使用せず、 MediaStreamTrack オブジェクトを使用して音声や動画の各トラックを表現し、エンコードされたメディア自体をピアからピアにストリームします。このガイドでは、WebRTC で一般的に使用されるコーデックについて説明します。

ガイド

概要

デジタル音声の概要
音声がどのようにデジタル形式に変換され、コンピュータで使用するために保存されるかを紹介します。音声がどのようにサンプリングされるかについての基本的な概念、サンプルレート、音声フレーム、音声圧縮などの概念を説明しています。
デジタル動画の概要
ウェブ上で使用されるデジタルビデオの基本的な概念、例えばカラーフォーマット、クロマサブサンプリング、人間の知覚がビデオコーディングにどのように影響するかなどを解説しています。

チュートリアルと how-to

学習: 動画と音声のコンテンツ
このチュートリアルでは、ウェブ上でのメディアの利用方法を紹介し、詳細を説明します。
ウェブコンテンツにおけるメディア対応の課題への対応
このガイドでは、メディア形式を賢く選択し、フォールバックや代替形式を提供することで、可能な限り幅広い互換性を提供しながら、品質やパフォーマンスを最大化するウェブコンテンツを構築する方法を見ていきます。

その他のトピック

Media Capabilities API
Media Capabilities API を使用すると、アプリやサイトが実行されている端末のエンコーディングおよびデコーディング機能を検出することができます。これにより、どの形式をいつ使用するかをリアルタイムで判断することができます。