path: root/files/ja/web/media/index.html

---
title: Web メディア技術
slug: Web/Media
tags:
  - Audio
  - Landing
  - Media
  - Video
  - Web
translation_of: Web/Media
---
<p>{{QuickLinksWithSubpages("/ja/docs/Web/Media")}}</p>

<p><span class="seoSummary">長年に渡り、オーディオ、ビデオおよび、その他のメディアを表示、作成および、管理するためのWeb の能力は、ますます速く成長してきました。今日では、HTML 要素、DOM インターフェイスおよび、これらのタスクを実行できる機能だけでなく、他のテクノロジーと並行しメディアを使用して本当に驚くべきことを可能にする、多数の API が使用可能です。この記事は、あなたがそれらを習得するために役立つであろう参考資料へのリンクを含む様々な API を列挙しています。</span></p>

<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="References" name="References">参考文献</h2>

<h3 id="HTML" name="HTML">HTML</h3>

<p>これらの記事は、メディア開発者向け HTML 機能について説明しています。</p>

<dl>
 <dt>{{HTMLElement("audio")}}</dt>
 <dd><code>&lt;audio&gt;</code> 要素は、Web のコンテキストでオーディオを再生するために使用されます。これらは、より複雑なメディアの宛先として非表示に、または、オーディオファイルのユーザー制御再生のための表示コントロールとともに、使用できます。JavaScript から {{domxref("HTMLAudioElement")}} オブジェクトとしてアクセスできます。</dd>
 <dt>{{HTMLElement("video")}}</dt>
 <dd><code>&lt;video&gt;</code> 要素は、Web コンテキストにおけるビデオコンテンツのエンドポイントです。単純にビデオファイルを提示するためにまたは、ストリーミングビデオコンテンツの宛先として使用することができます。<code>&lt;video&gt;</code> は、メディア API を他の HTML および、DOM 技術とリンクさせるための手段としても、使用できます。例えば、{{HTMLElement("canvas")}} (フレームの取得と操作) です。JavaScript から {{domxref("HTMLVideoElement")}} オブジェクトとしてアクセスできます。</dd>
 <dt>{{HTMLElement("track")}}</dt>
 <dd>HTML の<code>&lt;track&gt;</code> 要素を {{HTMLElement("audio")}} または {{HTMLElement("video")}} 要素内に配置して、メディア再生時に使用する <a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> 形式の字幕または、キャプショントラックへの参照を提供できます。JavaScript から {{domxref("HTMLTrackElement")}} オブジェクトとしてアクセスできます。</dd>
 <dt>{{HTMLElement("source")}}</dt>
 <dd>HTML の<code>&lt;source&gt;</code> 要素は、{{HTMLElement("audio")}} または {{HTMLElement("video")}} 要素内で使用して、表示するソースメディアを指定します。複数のソースを使用して、さまざまなフォーマット、サイズまたは、解像度により、メディアを提供できます。JavaScript から {{domxref("HTMLSourceElement")}} オブジェクトとしてアクセスできます。</dd>
</dl>

<h3 id="APIs" name="APIs">APIs</h3>

<dl>
 <dt><a href="/ja/docs/Web/API/Media_Capabilities_API">Media Capabilities API</a></dt>
 <dd>Media Capabilities API を使用すると、アプリやサイトが実行されているデバイスのエンコーディングとデコーディングの能力を判断できます。これにより、どのフォーマットをいつ使用するかをリアルタイムで判断することができます。</dd>
 <dt><a href="/ja/docs/Web/API/Media_Streams_API">メディアキャプチャと Streams API</a></dt>
 <dd>ローカルおよび、ネットワークを介したメディアのストリーミング、記録および、操作を可能にする API のリファレンスです。これには、ビデオ、オーディオおよび、静止画をキャプチャするためのローカルカメラとマイクの使用が含まれます。</dd>
 <dt><a href="/ja/docs/Web/API/MediaStream_Recording_API">MediaStream レコーディング API</a></dt>
 <dd>MediaStream Recording API を使用すると、メディアストリームをキャプチャしてデータ処理または、フィルターリングを行ったり、ディスクに記録したりすることができます。</dd>
 <dt><a href="/ja/docs/Web/API/Web_Audio_API">Web オーディオ API</a></dt>
 <dd>Web オーディオ API を使用すると、サウンドデータをリアルタイムおよび、録音済み素材の両方で生成、フィルターリングおよび、操作してからそのオーディオを <code>&lt;audio&gt;</code> 要素、メディアストリームまたは、ディスクなどへ送信できます。</dd>
 <dt><a href="/ja/docs/Web/API/WebRTC_API">WebRTC</a></dt>
 <dd>WebRTC ( Web Real-Time Communication、Web リアルタイム通信) を使用すると、直接インターネット上の 2 ピア間で、ライブオーディオとビデオをストリーミングしたり、任意のデータを転送したりできます。</dd>
</dl>
</div>

<div class="section">
<h2 class="Documentation" id="Guides" name="Guides">ガイド</h2>

<dl>
 <dt><a href="/ja/docs/Web/Media/Overview">Web 上のメディア技術の概要</a></dt>
 <dd>オーディオとビデオの自動再生、操作、および録音をサポートするオープンWeb テクノロジーと API の概要です。どの API を使用すべきかわからない場合は、ここから始めることをお勧めします。</dd>
 <dt><a href="/ja/docs/Web/Media/HTML_media">Using audio and video in HTML</a></dt>
 <dd>HTML の <code>&lt;audio&gt;</code> 要素と <code>&lt;video&gt;</code> 要素の使い方のガイドです。</dd>
 <dt><a href="/ja/docs/Web/Media/Accessibility">Web デザインにおけるメディアのアクセシビリティガイド</a></dt>
 <dd>このガイドでは、Web デザイナーと開発者が、さまざまな能力を持つ人々に対して、アクセスできるコンテンツを作成する方法について説明しています。これは単に、{{HTMLElement("image")}} 要素の {{htmlattrxref("alt", "img")}} 属性を使用することから、スクリーンリーダー用のメディアにタグを付けることまでの範囲に及びます。</dd>
 <dt><a href="/ja/docs/Web/Media/Formats">Web 上のメディアタイプとフォーマットのガイド</a></dt>
 <dd>Web 上の画像、音声および、ビデオメディアに使用できる、ファイルタイプとコーデックのガイドです。これには、どの種類のコンテンツにどの形式を使用するのかということ、フォールバックの提供方法や、メディアタイプの優先順位付けなどのベストプラクティスおよび、各メディアコンテナとコーデックの一般的なブラウザーサポート情報が含まれます。</dd>
 <dt><a href="/ja/docs/Web/Media/Streaming">Streaming audio and video</a></dt>
 <dd>オーディオとビデオのストリーミング方法、そしてストリームの最高の品質とパフォーマンスを確保するために活用できる技術と技術を網羅したガイドです。</dd>
 <dt><a href="/ja/docs/Web/Media/Autoplay_guide">メディアおよび Web オーディオ API の自動再生ガイド</a></dt>
 <dd>メディアやオーディオの予期しない自動再生は、ユーザーにとってはうれしくない驚きです。自動再生はある目的を果たす一方で、慎重に使用する必要があります。ユーザーがこれを制御できるようにするために、現在多くのブラウザーで自動再生ブロック機能が提供されています。この記事は自動再生の手引きとして、いつ、どのように使用するのかそして、ブラウザーを使って自動再生ブロックを適切に処理する方法についてのヒントを提供します。</dd>
 <dt><a href="/ja/docs/Web/Media/3D_audio">Positional audio in a 3D environment</a></dt>
 <dd>スクリーンにレンダリングされた 3D シーンやヘッドセットを使用して体験するミックスリアリティ体験などの 3D 環境では、オーディオがソースの方向から来ているように聞こえるように実行することが重要です。このガイドでは、これを達成する方法を説明します。</dd>
 <dt><a href="/ja/docs/Web/Media/3D_video">Playing video in a 3D environment</a></dt>
 <dd>このガイドでは、ビデオを 3D シーンに再生する方法を検討します。このテクニックは、フラットなコンピュータ画面上に表示される標準的な <a href="/ja/docs/Web/API/WebGL_API">WebGL</a> アプリケーションでも、<a href="/ja/docs/Web/API/WebXR_Device_API">WebXR</a> で生成された仮想環境や拡張現実環境でも使用できます。</dd>
</dl>

<dl>
</dl>

<h2 id="Other_topics" name="Other_topics">その他</h2>

<p>面白い方法でメディア API と並行して使用できるような、興味深いトピックもあります。</p>

<dl>
 <dt><a href="/ja/docs/Web/API/Canvas_API">Canvas API</a></dt>
 <dd>Canvas API を使用すると、{{HTMLElement("canvas")}} に描画して、画像の内容を操作したり変更したりできます。これは、<code>&lt;canvas&gt;</code> 要素をビデオの再生先または、カメラのキャプチャ先として設定して、ビデオフレームをキャプチャして操作できるようにするなど、さまざまな方法によるメディア使用を可能にします。</dd>
 <dt><a href="/ja/docs/Web/API/WebGL_API">WebGL</a></dt>
 <dd>WebGL は、既存の Canvas API 上に OpenGL ES 互換の API を提供し、Web 上で強力な 3D グラフィックスを実行することを可能にします。キャンバスを通して、これはメディアコンテンツに 3D画像を追加するように使用できます。</dd>
 <dt><a href="/ja/docs/Web/API/WebXR_API">WebXR</a></dt>
 <dd>WebXR は最終的に、WebVR に代わるもので、バーチャルリアリティ (VR) と拡張現実 (AR) コンテンツの作成をサポートする技術です。複合現実的なコンテンツはその後、デバイスの画面に表示されるか、ゴーグルやヘッドセットを使用して表示されます。</dd>
 <dt><a href="/ja/docs/Web/API/WebVR_API">WebVR</a> {{deprecated_inline}}</dt>
 <dd>Web Virtual Reality API は、Oculus Rift や HTC Vive などのバーチャルリアリティ (VR) デバイスをサポートしているため、開発者はユーザーの位置や動きを 3D シーン内の動きに変換して、デバイスに表示することができます。WebVR は順次、WebXR に置き換えられることが望まれています。WebXR はより広範囲なユースケースをカバーします。</dd>
</dl>
</div>
</div>