Summary  
This chapter explains how to embed and configure video content in HTML using the <video> and <source> elements with attributes like controls, autoplay, loop, and width, and how to organize multiple videos semantically within a list.  

General domain of usage  
Web development

ビデオの埋め込みは、オーディオの埋め込みと似ています。使用される属性やタグも同様です。

## ビデオの埋め込み
`<video>`タグは、HTMLドキュメント内にビデオコンテンツを埋め込み、ユーザーがブラウザ上で直接ビデオを再生できるようにします。

## ビデオ属性
- `controls`: 再生、一時停止、音量調整のためのビデオコントロールを追加;
- `autoplay`: 自動再生機能を指定;
- `loop`: ビデオの連続ループ再生を許可。
```html
<video controls autoplay loop>
  
</video>
```

## ソース
`<source>` タグは、`<video>` タグ内で使用され、ビデオファイルのソース（URL）とその属性を指定します。`src` はビデオファイルのURLを指定し、`type` はビデオファイルのMIMEタイプを指定します。
<br>**例**:
```html
<video controls autoplay loop>
  <source src="video-url.mp4" type="video/mp4" />
  <source src="video-url.webm" type="video/webm" />
  Your browser does not support the video element.
</video>
```
上記の例では：
- `<video>` タグには `controls`、`autoplay`、`loop` 属性が含まれています；
- `<source>` タグはビデオファイルのソースURLとMIMEタイプを指定します；
- <u>ブラウザが `<video>` タグまたは指定されたビデオフォーマットをサポートしていない場合、代替テキスト `Your browser does not support the video element.` が表示されます。</u>


PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHZpZGVvIGNvbnRyb2xzIHdpZHRoPSIyMjAiPgogICAgICA8c291cmNlCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzLzM5MmYyNGFjLTAxMjYtNGMzNC1hMjhhLWYyZjI2ZDEyMTk2Yi9zZWN0aW9uLTMvc2VhLXdhdmVzLXZpZGVvLWV4YW1wbGUubXA0IgogICAgICAgIHR5cGU9InZpZGVvL21wNCIKICAgICAgLz4KICAgICAgWW91ciBicm93c2VyIGRvZXMgbm90IHN1cHBvcnQgdGhlIHZpZGVvIGVsZW1lbnQuCiAgICA8L3ZpZGVvPgogIDwvYm9keT4KPC9odG1sPg==

一般的にサポートされているビデオフォーマットには MP4、WebM、Ogg があります。異なるブラウザやデバイス間での互換性を確保するため、複数のフォーマットでビデオを提供することが推奨されます。

ノート

HTMLドキュメントに動画コンテンツを埋め込むために使用されるタグはどれですか？

`<video>`タグおよび`<audio>`タグで、再生・一時停止・音量調整などのコントロールを追加する属性はどれですか？

HTMLの基本を習得し、構造化され、アクセシブルなウェブコンテンツを作成します。タグ、要素、属性を使用してドキュメントを構造化する方法を学びます。テキスト、リスト、画像、音声、動画を自在に扱い、ウェブページを充実させます。整理されたデータのためのテーブルや、ユーザー入力・インタラクションのためのフォームを作成します。アクセシビリティを高めるセマンティックHTMLを理解し、基礎から完全で機能的なウェブサイト構造を構築します。

ウェブとHTMLの概要、タグ、要素、属性の重要性について紹介します。HTMLドキュメントの基本構造やウェブの簡単な歴史について学びます。

HTMLマークアップの基本を習得し、特別なテキストのフォーマットやリストに焦点を当て、HTMLドキュメント内でのコンテンツ構造化における重要性を理解します。HTMLドキュメント構造の詳細に踏み込み、テキストマークアップ技術を洗練させます。

ウェブ開発における視覚および聴覚コンテンツの力を引き出し、画像、動画、音声要素をHTMLドキュメントにシームレスに統合する方法を学びます。さまざまなメディア形式を取り入れる際の細かな違いについて探求します。

HTMLにおけるテーブルとフォームの包括的な解説を通じて、データの提示方法やユーザーインタラクションの複雑さを理解します。テーブル構造、フォーム作成、入力要素を網羅しています。フォーム入力要素の実装や、機能性を高める属性の活用に習熟します。

セマンティックHTML要素を深く学ぶことで、HTMLスキルを次のレベルへ引き上げ、構造化されアクセシブルなウェブコンテンツの作成が可能になります。新たに得た知識を活用し、初めてのウェブサイト構築に挑戦し、アイデアを形にしましょう。

ウェブページへのビデオの統合

ビデオの埋め込み

ビデオ属性

ソース

1. HTMLドキュメントに動画コンテンツを埋め込むために使用されるタグはどれですか？

2. `<video>`タグおよび`<audio>`タグで、再生・一時停止・音量調整などのコントロールを追加する属性はどれですか？

ウェブページへのビデオの統合

ビデオの埋め込み

ビデオ属性

ソース

1. HTMLドキュメントに動画コンテンツを埋め込むために使用されるタグはどれですか？

2. <video>タグおよび<audio>タグで、再生・一時停止・音量調整などのコントロールを追加する属性はどれですか？

2. `<video>`タグおよび`<audio>`タグで、再生・一時停止・音量調整などのコントロールを追加する属性はどれですか？