path: root/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.html

---
title: 動画と音声のコンテンツ
slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
tags:
  - Article
  - Audio
  - Beginner
  - Guide
  - HTML
  - Video
  - captions
  - subtitles
  - track
  - ガイド
  - 初心者
  - 動画
  - 記事
  - 音声
translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div>

<p class="summary">Webページに簡単な画像を追加するのができるようになったので、次のステップは HTML 文書に動画と音声のプレイヤーを追加することです!  この記事では {{htmlelement("video")}} と {{htmlelement("audio")}} 要素を使ってそうすることを見ていきます。それから動画にキャプションや字幕を追加する方法を見て完了します。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提条件:</th>
   <td>基本的なコンピュータリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">インストールされた基本ソフトウェア</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル操作</a>の基本知識、HTML の基礎知識(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a>)、および <a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a>。</td>
  </tr>
  <tr>
   <th scope="row">目的:</th>
   <td>動画や音声のコンテンツをWebページに埋め込み、動画にキャプションや字幕を追加する方法を学びます。</td>
  </tr>
 </tbody>
</table>

<h2 id="Audio_and_video_on_the_web" name="Audio_and_video_on_the_web">Webでの動画と音声</h2>

<p>Web 開発者は、あらゆる種類の動画 (動画ファイルはテキストや画像よりもはるかに大きい) をサポートするのに十分な速さがある帯域幅を使い始めた2000年代初頭以来、Web 上で動画や音声を長時間使用したいと考えていました。初期段階では、HTML などのネイティブな Web テクノロジーでは動画や音声を Web に埋め込むことができなかったため、<a href="https://ja.wikipedia.org/wiki/Adobe_Flash">Flash</a> (および後で <a href="https://ja.wikipedia.org/wiki/Microsoft_Silverlight">Silverlight</a>) などの独自技術 (またはプラグインベース) が一般的になりました。この種の技術はうまくいきましたが、HTML/CSS の機能、セキュリティの問題、アクセシビリティの問題でうまく機能しないなど、さまざまな問題がありました。</p>

<p>もし正しく行っていれば、ネイティブな解決策はこれの多くを解決します。幸いにも、数年後、{{glossary("HTML5")}} 仕様には、{{htmlelement("video")}} 要素と {{htmlelement("audio")}} 要素、およびそれらを制御するためのいくつかのぴかぴかの新しい {{Glossary("JavaScript")}} {{Glossary("API")}} が追加されました。ここでは JavaScript を見ていません — HTML で実現できる基本的な基礎だけです。</p>

<p>音声や動画のファイルを作成する方法は教えません — 完全に異なる知識や技能が必要です。あなたが実験のための<a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">音声や動画のファイルとサンプルコード</a>を手に入れることができない場合に備えて、それを提供しています。</p>

<div class="note">
<p><strong>メモ</strong>: ここから始める前に、<a href="https://www.youtube.com/">YouTube</a>、<a href="http://www.dailymotion.com">Dailymotion</a>、<a href="https://vimeo.com/">Vimeo </a>のような {{glossary("OVP")}} (オンライン動画プロバイダ) と <a href="https://soundcloud.com/">Soundcloud</a> のようなオンライン音声プロバイダがあることも知っておく必要があります。そのような企業は、動画をホストして消費するための便利で簡単な方法を提供するので、莫大な帯域幅の消費を心配する必要はありません。OVP は通常、Web ページに動画や音声を埋め込むための既製コードを提供しています。その道を行くなら、この記事で取り上げるいくつかの困難を避けることができます。この種のサービスについては、次の記事でもう少し詳しく説明します。</p>
</div>

<h3 id="The_&lt;video>_element" name="The_&lt;video>_element">&lt;video&gt; 要素</h3>

<p>{{htmlelement("video")}} 要素を使用すると、動画を非常に簡単に埋め込むことができます。本当に簡単な例は次のようになります。</p>

<pre class="brush: html">&lt;video src="rabbit320.webm" controls&gt;
  &lt;p&gt;お使いのブラウザは HTML5 動画をサポートしていません。その代わりに&lt;a href="rabbit320.webm"&gt;動画へのリンク&lt;/a&gt;があります。&lt;/p&gt;
&lt;/video&gt;</pre>

<p>機能は次のとおりです。</p>

<dl>
 <dt>{{htmlattrxref("src","video")}}</dt>
 <dd>{{htmlelement("img")}} 要素と同じように、<code>src</code> (ソース) 属性には、埋め込みたい動画へのパスが含まれています。これは、まったく同じように動作します。</dd>
 <dt>{{htmlattrxref("controls","video")}}</dt>
 <dd>ユーザは、動画や音声の再生を制御できる必要があります (特に<a href="https://ja.wikipedia.org/wiki/%E3%81%A6%E3%82%93%E3%81%8B%E3%82%93#%E7%96%AB%E5%AD%A6">てんかん</a>を患っている人にとっては重要です)。<code>controls</code> 属性を使用してブラウザ独自のコントロールインターフェイスを組み込むか、適切な <a href="/ja/docs/Web/API/HTMLMediaElement">JavaScript API</a> を使用してインターフェイスを構築する必要があります。少なくとも、インターフェイスにはメディアの開始と停止、および音量の調整が含まれている必要があります。</dd>
 <dt><code>&lt;video&gt;</code> タグ内の段落</dt>
 <dd>これは<strong>代替コンテンツ</strong>と呼ばれ、ページにアクセスしているブラウザが <code>&lt;video&gt;</code> 要素をサポートしていない場合に表示され、古いブラウザでの代替手段となります。これはあなたが好きなことができます。この場合、動画ファイルへの直接リンクが提供されているため、使用しているブラウザに関係なく、ユーザは少なくとも何らかの方法でアクセスできます。</dd>
</dl>

<p>埋め込み動画は次のようになります。</p>

<p><img alt="小さな白いウサギの動画を表示するシンプルなビデオプレーヤー" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p>

<p>ここで<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">サンプルをライブで試す</a>ことができます(<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">ソースコード</a>も参照してください)。</p>

<h3 id="Supporting_multiple_formats" name="Supporting_multiple_formats">複数のフォーマットをサポートする</h3>

<p>上の例では、Safari や Internet Explorer などのブラウザで上記のライブのリンクにアクセスしたなら、すでに気づいているかもしれない問題があります。動画は再生されません!  これは、さまざまなブラウザが異なる動画 (および音声) のフォーマットをサポートしているためです。</p>

<p>用語をすばやく説明しましょう。MP3、MP4、WebM などの形式は<strong>コンテナフォーマット</strong>と呼ばれます。それらは、音声トラック、動画トラック (動画の場合)、および提示されるメディアを記述するメタデータなど、歌または動画全体を構成する異なる部分を含みます。</p>

<p>音声トラックと動画トラックもさまざまなフォーマットになっています。たとえば:</p>

<ul>
 <li>WebM コンテナは、通常、VP8/VP9 動画で Ogg Vorbis 音声をパッケージ化します。これは主に Firefox と Chrome でサポートされています。</li>
 <li>MP4 コンテナは、H.264 動画で AAC または MP3 音声をパッケージ化することがよくあります。これは主に Internet Explorer と Safari でサポートされています。</li>
 <li>古い Ogg コンテナは、Ogg Vorbis 音声と Ogg Theora 動画と一緒に行く傾向があります。これは主に Firefox と Chrome でサポートされていましたが、基本的には良質の WebM フォーマットに取って代わられています。</li>
</ul>

<p>オーディオプレーヤーは、音声トラックを直接再生する傾向があります。たとえば、MP3 または Ogg ファイル。これらはコンテナを必要としません。</p>

<div class="note">
<p><strong>メモ</strong>: <a href="/ja/docs/Web/HTML/Supported_media_formats#Browser_compatibility">音声と動画のコーデックの互換性表</a>からわかるように、それほど単純ではありません。さらに、多くのモバイルプラットフォームのブラウザは、サポート対象のシステムのメディアプレーヤーに再生するためにそれを渡すことで、サポートされていないフォーマットを再生することができます。しかしこれは今のところできます。</p>
</div>

<p>上記のフォーマットは、動画と音声を管理可能なファイルに圧縮するために存在します (生の動画と音声は非常に大きい)。ブラウザには、Vorbis や H.264 などの<strong>{{Glossary("Codec","コーデック")}}</strong>が含まれています。これらのコーデックは、圧縮された音声と動画を2進数字に変換して戻すために使用されます。上記のように、残念ながらブラウザはすべて同じコーデックをサポートしているわけではないので、メディアの制作ごとに複数のファイルを用意する必要があります。メディアをデコードするために適切なコーデックがない場合、再生されません。</p>

<div class="note">
<p><strong>メモ</strong>: なぜこのような状況が存在するのだろうか。<strong>MP3 </strong>(音声用)と <strong>MP4/H.264</strong> (動画用) はどちらも広くサポートされており、良質です。しかし、それらはまた、特許を握られている — 米国特許は、MP3 は2017年まで、H.264 は2027年までカバーしています。つまり、特許を保有していないブラウザは、これらのフォーマットをサポートするために膨大な金額を支払う必要があります。さらに、多くの人々は、制限されたソフトウェアを原則として避け、オープンフォーマットを支持しています。このため、さまざまなブラウザに複数のフォーマットを提供する必要があります。</p>
</div>

<p>だから私たちはこれをどうやってやるのか?  以下の<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">更新された例</a>を見てください (それを<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">ここでライブで試して</a>みてください)。</p>

<pre class="brush: html">&lt;video controls&gt;
  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
  &lt;source src="rabbit320.webm" type="video/webm"&gt;
  &lt;p&gt;お使いのブラウザは HTML5 動画をサポートしていません。その代わりに&lt;a href="rabbit320.mp4"&gt;動画へのリンク&lt;/a&gt;があります。&lt;/p&gt;
&lt;/video&gt;</pre>

<p>ここでは実際の <code>&lt;video&gt;</code> タグから <code>src</code> 属性を取り出し、独自のソースを指す別々の {{htmlelement("source")}} 要素を追加しました。この場合、ブラウザは <code>&lt;source&gt;</code> 要素を通過し、サポートするコーデックがある最初の要素を再生します。WebM や MP4 のソースを含めれば、最近のほとんどのプラットフォームやブラウザで動画を再生できるはずです。</p>

<p>各 <code>&lt;source&gt;</code> 要素には <code>type</code> 属性もあります。これはオプションですが、動画ファイルの  {{glossary("MIME type","MIME タイプ")}}が含まれており、ブラウザがこれらを読み込んで理解できない動画をすぐにスキップすることができます。それらが含まれていない場合、ブラウザは各ファイルを読み込んで再生しようとしますが、より多くの時間とリソースを必要とします。</p>

<div class="note">
<p><strong>メモ</strong>: <a href="/ja/docs/Web/HTML/Supported_media_formats">サポートされているメディアフォーマットの記事</a>には、一般的な {{glossary("MIME type","MIME タイプ")}}がいくつか含まれています。</p>
</div>

<h3 id="Other_&lt;video>_features" name="Other_&lt;video>_features">その他の &lt;video&gt; 機能</h3>

<p>HTML5 動画に含めることができる他の多くの機能があります。以下の3番目の例を見てください。</p>

<pre class="brush: html">&lt;video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png"&gt;
  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
  &lt;source src="rabbit320.webm" type="video/webm"&gt;
  &lt;p&gt;お使いのブラウザは HTML5 動画をサポートしていません。その代わりに&lt;a href="rabbit320.mp4"&gt;動画へのリンク&lt;/a&gt;があります。&lt;/p&gt;
&lt;/video&gt;
</pre>

<p>これにより、次のような出力が得られます。</p>

<p><img alt='再生する前にポスター画像を表示するビデオプレーヤー。 ポスター画像には "HTML5 video example, OMG hell yeah!" と書いてあります。' src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;">新しい機能は次のとおりです。</p>

<dl>
 <dt>{{htmlattrxref("width","video")}} と {{htmlattrxref("height","video")}}</dt>
 <dd>これらの属性または {{Glossary("CSS")}} を使用して動画サイズを制御することができます。どちらの場合も、動画は元の縦横比 (<strong>アスペクト比</strong>) を維持します。アスペクト比が設定したサイズによって維持されない場合、動画は水平方向にスペースを埋めるように拡大し、デフォルトでは満たされていないスペースには無地の背景色が与えられます。</dd>
 <dt>{{htmlattrxref("autoplay","video")}}</dt>
 <dd>この属性は、ページの残りの部分がロードされている間に音声または動画の再生をすぐに開始します。ユーザに実際に迷惑をかけることがあるので、サイトで動画 (または音声) を自動再生することはお勧めしません。</dd>
 <dt>{{htmlattrxref("loop","video")}}</dt>
 <dd>この属性は、動画 (または音声) が終了するたびに再生を開始させます。これは迷惑になることもありますので、本当に必要な場合にのみ使用してください。</dd>
 <dt>{{htmlattrxref("muted","video")}}</dt>
 <dd>この属性を使用すると、デフォルトで音声をオフにしてメディアを再生します。</dd>
 <dt>{{htmlattrxref("poster","video")}}</dt>
 <dd>この属性は、動画の再生前に表示される画像の URL を値としてとります。これは、スプラッシュ画面または広告画面に使用するためのものです。</dd>
 <dt>{{htmlattrxref("preload","video")}}</dt>
 <dd>
 <p>この属性は、大きなファイルをバッファリングする要素で使用されます。3つの値のいずれかを取ることができます。</p>

 <ul>
  <li><code>"none"</code> はファイルをバッファリングしません</li>
  <li><code>"auto"</code> はメディアファイルをバッファリングする</li>
  <li><code>"metadata"</code> はファイルのメタデータのみをバッファリングする</li>
 </ul>
 </dd>
</dl>

<p>上記の例は <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">Github でライブで再生する</a>ことができます (<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">ソースコード</a>も参照してください)。ライブバージョンには <code>autoplay</code> 属性は含まれていません — ページが読み込まれるとすぐに動画が再生され始めると、ポスターを見ることはできません!</p>

<h3 id="The_&lt;audio>_element" name="The_&lt;audio>_element">&lt;audio&gt; 要素</h3>

<p>{{htmlelement("audio")}} 要素は、{{htmlelement("video")}} 要素とまったく同じように動作しますが、以下に説明するように若干の違いがあります。典型的な例は次のようになります。</p>

<pre class="brush: html">&lt;audio controls&gt;
  &lt;source src="viper.mp3" type="audio/mp3"&gt;
  &lt;source src="viper.ogg" type="audio/ogg"&gt;
  &lt;p&gt;お使いのブラウザは HTML5 音声をサポートしていません。代わりに&lt;a href="viper.mp3"&gt;音声へのリンク&lt;/a&gt;があります。&lt;/p&gt;
&lt;/audio&gt;</pre>

<p>これはブラウザで次のようなものを生成します。</p>

<p><img alt="再生ボタン、タイマー、音量コントロール、および進行状況バーを備えたシンプルなオーディオプレーヤー" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p>

<div class="note">
<p><strong>メモ</strong>: Github で<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">音声デモをライブで実行する</a>こともできます (オーディオプレーヤーの<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">ソースコード</a>も参照してください)。</p>
</div>

<p>ビジュアルコンポーネントがないため、ビデオプレーヤーよりもスペースが少なくなります — 音声を再生するコントロールを表示するだけで済みます。HTML5 動画とのその他の相違点は次のとおりです。</p>

<ul>
 <li>{{htmlelement("audio")}} 要素は <code>width</code> 属性や <code>height</code> 属性をサポートしていません — ビジュアルコンポーネントがないため、幅や高さを割り当てることはありません。</li>
 <li>また、<code>poster</code> 属性もサポートしていません — ビジュアルコンポーネントはありません。</li>
</ul>

<p>これ以外について <code>&lt;audio&gt;</code> は、<code>&lt;video&gt;</code> と同じ機能をすべてサポートしています。詳細については、上記のセクションを参照してください。</p>

<h2 id="Displaying_video_text_tracks" name="Displaying_video_text_tracks">動画のテキストトラックを表示する</h2>

<p>ここでは、もっと知りたいと思う、やや高度なコンセプトについて説明します。多くの人々は、少なくともある時点では、Web上で見つけた音声や動画のコンテンツを聞くことができない、または聞きたくない。たとえば:</p>

<ul>
 <li>多くの人が聴覚障害を持っているため、音声は聞こえません。</li>
 <li>他の人は、騒々しい環境 (スポーツゲームが表示されているときの混雑したバーのような) や、静かな場所 (図書館など) にいると他の人を邪魔したくないため、音声を聞くことができないことがあります。</li>
 <li>動画の言語を話さない人には、テキストの写しや翻訳がメディアのコンテンツを理解するのに役立つかもしれません。</li>
</ul>

<p>音声や動画で話されている言葉の写しをこれらの人々に提供できるのはうれしいことではないでしょうか?  HTML5 動画のおかげで、<a href="/ja/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> フォーマットと {{htmlelement("track")}} 要素を使用することができます。</p>

<div class="note">
<p><strong>メモ</strong>: "転記" と "写し" とは、話し言葉をテキストとして書き留めることを意味します。</p>
</div>

<p>WebVTT は、複数のテキスト文字列を含むテキストファイルを書くための形式です。動画内の何時に各テキスト文字列を表示するかや、限られたスタイリング/位置情報などのメタデータが一緒に含まれています。これらのテキスト文字列は<strong>キュー</strong>と呼ばれ、さまざまな目的のためにさまざまなタイプを表示できます。最も一般的なものは次のとおりです。</p>

<dl>
 <dt>字幕 (subtitles)</dt>
 <dd>音声で話されている言葉を理解していない人々のための外国の翻訳材料。</dd>
 <dt>キャプション (captions)</dt>
 <dd>対話や重要な物音の描写の同期化で、音声を聞くことができない人が何が起こっているのかを理解できるようにする。</dd>
 <dt>時限記述 (timed descriptions)</dt>
 <dd>視覚障害者にサービスを提供するために、音声に変換するためのテキスト。</dd>
</dl>

<p>典型的な WebVTT ファイルは次のようになります。</p>

<pre class="eval line-numbers  language-html"><code class="language-html">WEBVTT

1
00:00:22.230 --&gt; 00:00:24.606</code>
<code>これが最初の字幕です。</code>
<code class="language-html">
2
00:00:30.739 --&gt; 00:00:34.074</code>
<code>これは二番目です。
<code class="language-html">
  ...</code></code>
</pre>

<p>これを HTML メディアの再生と一緒に表示するには、以下を行う必要があります。</p>

<ol>
 <li>適切な場所に <code>.vtt</code> ファイルとして保存します。</li>
 <li>{{htmlelement("track")}} 要素で <code>.vtt</code> ファイルにリンクします。<code>&lt;track&gt;</code> は <code>&lt;audio&gt;</code> または <code>&lt;video&gt;</code> 内に配置する必要がありますが、すべての <code>&lt;source&gt; </code>要素の後に配置する必要があります。{{htmlattrxref("kind","track")}} 属性を使用して、キューが <code>subtitles</code>、<code>captions</code>、または <code>descriptions</code> のいずれであるかを指定します。さらに、{{htmlattrxref("srclang","track")}} 属性を使用して、字幕が書かれた言語をブラウザに伝えます。</li>
</ol>

<p>ここに例があります。</p>

<pre class="brush: html">&lt;video controls&gt;
    &lt;source src="example.mp4" type="video/mp4"&gt;
    &lt;source src="example.webm" type="video/webm"&gt;
    &lt;track kind="subtitles" src="subtitles_en.vtt" srclang="en"&gt;
&lt;/video&gt;</pre>

<p>これにより、字幕が表示された動画になります。これは次のようなものです。</p>

<p><img alt='再生、停止、音量、キャプションのオン/オフなどのスタンドコントロールを備えたビデオプレーヤー。 動画の再生には、槍のような武器を持つ男のシーンが表示され、キャプションには "Esta hoja tiene pasado oscuro." と表示されます。' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>

<p>詳しくは、<a href="/ja/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">HTML5 動画にキャプションと字幕を追加する</a>をご覧ください。Github には Ian Devlin によって書かれた<a href="http://iandevlin.github.io/mdn/video-player-with-captions/">この記事の例</a>があります (<a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">ソースコード</a>も参照してください)。この例では、JavaScript を使用してさまざまな字幕を選択できるようにしています。字幕をオンにするには、[CC] ボタンを押して、英語、ドイツ語、スペイン語のオプションを選択する必要があります。</p>

<div class="note">
<p><strong>メモ</strong>: テキストトラックは検索エンジンが特にテキスト上で成功するため、{{glossary("SEO")}} にも役立ちます。テキストトラックを使用すると、検索エンジンは動画の途中地点に直接リンクすることもできます。</p>
</div>

<h3 id="Active_learning_Embedding_your_own_audio_and_video" name="Active_learning_Embedding_your_own_audio_and_video">アクティブラーニング: 自分の音声と動画を埋め込む</h3>

<p>この能動的学習のために、(理想的には) あなたが世界に出て自分の動画や音声を録画するのが好ましいです — 最近の携帯電話では、音声や動画を非常に簡単に録音することができ、コンピュータに転送することができれば使用できます。動画の場合は WebM と MP4、音声の場合は MP3 と Ogg に行き着くには、変換する必要があるかもしれませんが、<a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> や <a href="https://sourceforge.net/projects/audacity/">Audacity</a> など、あまり多くの手間をかけることなく、これを行うための十分なプログラムがあります。さあ、行ってください!</p>

<p>動画や音声を入手できない場合は、この<a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">サンプル</a>を自由に使用してこの演習を行うことができます。サンプルコードを参照のために使用することもできます。</p>

<p>次のことをしましょう。</p>

<ol>
 <li>音声と動画のファイルをコンピュータの新しいディレクトリに保存します。</li>
 <li>同じディレクトリに <code>index.html</code> と呼ばれる新しい HTML ファイルを作成します。</li>
 <li>ページに <code>&lt;audio&gt;</code> 要素と <code>&lt;video&gt;</code> 要素を追加します。それらにデフォルトのブラウザコントロールを表示させます。</li>
 <li>両方の要素に <code>&lt;source&gt;</code> 要素を付けて、ブラウザが最もよくサポートするフォーマットを見つけて読み込むようにします。これらは <code>type</code> 属性を含むべきです。</li>
 <li><code>&lt;video&gt;</code> 要素に、動画が再生される前に表示されるポスターを指定します。自分のポスターのグラフィックを作成して楽しんでください。</li>
</ol>

<p>追加のボーナスとして、テキストトラックの研究や動画にキャプションを追加する方法などがあります。</p>

<h2 id="Summary" name="Summary">まとめ</h2>

<p>それはラップです。Web ページで動画や音声を楽しみながら楽しく遊びました!  次の記事では、{{htmlelement("iframe")}} や {{htmlelement("object")}} などの技術を使用して、Webにコンテンツを埋め込む他の方法について説明します。</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{htmlelement("audio")}}</li>
 <li>{{htmlelement("video")}}</li>
 <li>{{htmlelement("source")}}</li>
 <li>{{htmlelement("track")}}</li>
 <li><a href="/ja/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">HTML5 の動画へのキャプションと字幕の追加</a></li>
 <li><a href="/ja/docs/Web/Guide/Audio_and_video_delivery">音声と動画の配信</a>: HTML と JavaScript を使用して音声と動画をWebページに配置することに関する詳細。</li>
 <li><a href="/ja/docs/Web/Guide/Audio_and_video_manipulation">音声と動画の加工</a>: JavaScript を使用して音声や動画を操作する方法について詳しく説明します (たとえばフィルタを追加するなど)。</li>
 <li><a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">マルチメディアを翻訳する</a>ための自動オプション。(英語)</li>
</ul>

<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p>

<h2 id="In_this_module" name="In_this_module">このモジュール</h2>

<ul>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a></li>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></li>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">&lt;object&gt; から &lt;iframe&gt; へ — その他の埋め込み技術</a></li>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Web にベクターグラフィックスを追加する</a></li>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla のスプラッシュページ</a></li>
</ul>

<dl>
</dl>

<ul>
</ul>