Help us test MDN's new front-end: https://discourse.mozilla.org/t/help-us-test-mdns-new-react-front-end-beta/42593

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

参考文献

HTML

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

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

APIs

メディアキャプチャと Streams API
ローカルおよび、ネットワークを介したメディアのストリーミング、記録および、操作を可能にする API のリファレンスです。これには、ビデオ、オーディオおよび、静止画をキャプチャするためのローカルカメラとマイクの使用が含まれます。
MediaStream レコーディング API
MediaStream Recording API を使用すると、メディアストリームをキャプチャしてデータ処理または、フィルターリングを行ったり、ディスクに記録したりすることができます。
Web オーディオ API
Web オーディオ API を使用すると、サウンドデータをリアルタイムおよび、録音済み素材の両方で生成、フィルターリングおよび、操作してからそのオーディオを <audio> 要素、メディアストリームまたは、ディスクなどへ送信できます。
WebRTC
WebRTC ( Web Real-Time Communication、ウェブリアルタイム通信) を使用すると、直接インターネット上の 2 ピア間で、ライブオーディオとビデオをストリーミングしたり、任意のデータを転送したりできます。

ガイド

ウェブ上のメディア技術の概要
オーディオとビデオの自動再生、操作、および録音をサポートするオープンウェブテクノロジーと API の概要です。どの API を使用すべきかわからない場合は、ここから始めることをお勧めします。
ウェブデザインにおけるメディアのアクセシビリティガイド
このガイドでは、ウェブデザイナーと開発者が、さまざまな能力を持つ人々に対して、アクセスできるコンテンツを作成する方法について説明しています。これは単に、<image> 要素の alt 属性を使用することから、スクリーンリーダー用のメディアにタグを付けることまでの範囲に及びます。
ウェブ上のメディアタイプとフォーマットのガイド
ウェブ上の画像、音声および、ビデオメディアに使用できる、ファイルタイプとコーデックのガイドです。これには、どの種類のコンテンツにどの形式を使用するのかということ、フォールバックの提供方法や、メディアタイプの優先順位付けなどのベストプラクティスおよび、各メディアコンテナとコーデックの一般的なブラウザーサポート情報が、含まれます。
メディアおよび Web オーディオ API の自動再生ガイド
メディアやオーディオの予期しない自動再生は、ユーザーにとってはうれしくない驚きです。自動再生はある目的を果たす一方で、慎重に使用する必要があります。ユーザーがこれを制御できるようにするために、現在多くのブラウザーで自動再生ブロック機能が提供されています。この記事は自動再生の手引きとして、いつ、どのように使用するのかそして、ブラウザーを使って自動再生ブロックを適切に処理する方法についてのヒントを提供します。

その他

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

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

ドキュメントのタグと貢献者

このページの貢献者: Uemmra3, dskmori, Suuzuukii
最終更新者: Uemmra3,