このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

メディアガイド

このページでは、ウェブ上のメディアに関するガイドが掲載されています。 これらのガイドは、メディアを使用してどのようなことが使用可能かを理解する助けとするためのものです。

HTML での画像の使用

HTML の img 要素で HTML 文書に画像を埋め込むことができ、 picture 要素を使用するとレスポンシブ画像を使用することができます。このガイドでは、ウェブサイトへの画像の追加を扱うリソースへのリンクを紹介します。

オーディオとビデオのストリーミングガイド

このガイドでは、Web 上のオーディオあるいはビデオメディアをストリーミングするために使用されるテクニックと、可能な限り最高の品質とパフォーマンスを引き出すためにストリーミングを実行する際に使用するコード、メディア、サーバー、およびオプションをどのように最適化するかを検討します。

メディアおよびウェブオーディオ API の自動再生ガイド

ページが読み込まれると、すぐに音声(または音声トラックを含む動画)の再生を自動的に開始されることは、ユーザーにとって歓迎されない驚きです。 メディアの自動再生は便利な目的に役立ちますが、注意して必要なときにだけ使用してください。 ユーザーがこれを制御できるようにするために、ブラウザーは多くの場合、さまざまな形式の自動再生のブロック (autoplay blocking) を提供します。 このガイドでは、さまざまなメディアおよびウェブオーディオ API (Web Audio API) の自動再生機能について説明します。自動再生の使用方法と自動再生のブロックを適切に処理するためのブラウザーの操作方法の簡単な概要を含みます。

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

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

音声と動画の加工

ウェブのよいところは、複数の技術をまとめて新しいものを作ることができる点です。ネイティブの音声や動画をブラウザー上で利用できるということは、これらのデータストリームを canvasWebGLWeb Audio API を利用して操作することで、音声や動画に直接変更を加えることができることを意味します。例えば音声にリバーブやコンプレッション効果をかけたり、動画にグレイスケールやセピアのフィルターをかけたりすることができます。この記事では、必要なことを説明するためのリファレンスを提供します。

音声と動画の配信

音声と動画のウェブ配信には、静的なメディアファイルから適応型ライブストリームまで、さまざま手法が存在します。この記事は、ウェブベースの多様なメディア配信の仕組みと主要ブラウザーとの互換性を探るための出発点となるものです。