KnowHub

マルチメディアタグ

画像に加えて、ウェブページには動画や音声も配置できます。

<video>

<video> タグはブロックレベル要素で、動画を配置するために使用されます。ブラウザが読み込まれた動画形式をサポートしている場合は、プレーヤーが表示されます。サポートしていない場合は、 <video> 内の子要素が表示されます。

<video src="example.mp4" controls>
  <p>お使いのブラウザは HTML5 動画をサポートしていません。 <a href="example.mp4">動画ファイル</a> をダウンロードしてください。</p>
</video>

上記のコードでは、ブラウザがその形式の動画をサポートしていない場合、 <video> 内のテキストプロンプトが表示されます。

<video> には以下の属性があります。

  • src：動画ファイルのURL。
  • controls：プレーヤーにコントロールバーを表示するかどうか。この属性はブール属性で、値を割り当てる必要はなく、属性名を記述するだけで有効になります。ブラウザのデフォルトプレーヤーを使用せずに、カスタムプレーヤーを使用したい場合は、この属性を使用しないでください。
  • width：動画プレーヤーの幅（単位：ピクセル）。
  • height：動画プレーヤーの高さ（単位：ピクセル）。
  • autoplay：動画を自動再生するかどうか。この属性はブール属性です。
  • loop：動画をループ再生するかどうか。この属性はブール属性です。
  • muted：デフォルトでミュートにするかどうか。この属性はブール属性です。
  • poster：動画プレーヤーのカバー画像のURL。
  • preload：動画再生前に動画ファイルをバッファリングするかどうか。この属性は、 autoplay が設定されていない場合にのみ適しています。値は none （バッファリングしない）、 metadata （動画ファイルのメタデータのみをバッファリングする）、 auto （ファイル全体をバッファリングできる）の3つがあります。
  • playsinline：iPhone の Safari ブラウザは動画再生時に自動的に全画面表示になりますが、この属性はその動作を禁止できます。この属性はブール属性です。
  • crossorigin：クロスオリジンで動画を読み込むかどうか。値は anonymous （クロスオリジンリクエスト時にユーザー認証情報、主に Cookie を送信しない）と use-credentials （クロスオリジン時にユーザー認証情報を送信する）の2つを取ることができます。
  • currentTime：現在の再生位置を指定します（倍精度浮動小数点数、単位は秒）。再生がまだ開始されていない場合は、この属性で指定された位置から再生が開始されます。
  • duration：この属性は読み取り専用で、タイムライン上の継続再生時間（全長）を示します。値は倍精度浮動小数点数（単位は秒）です。ストリーミングメディアの場合、終了時間が不明なため、属性値は +Infinity になります。

以下に例を示します。

<video width="400" height="400"
       autoplay loop muted
       poster="poster.png">
</video>

上記のコードでは、動画プレーヤーのサイズは 400 x 400 で、自動再生とループ再生が行われ、ミュートされ、カバー画像も表示されます。これは、ウェブサイトのホームページの背景動画でよく見られる書き方です。

HTML 標準では、ブラウザがサポートする必要がある動画形式は規定されておらず、完全にブラウザベンダーに委ねられています。ブラウザが動画形式をサポートしていない場合に備えて、 <source> タグを使用して、同じ動画の複数の形式を提供することができます。

<video controls>
  <source src="example.mp4" type="video/mp4">
  <source src="example.webm" type="video/webm">
  <p>お使いのブラウザは HTML5 動画をサポートしていません。 <a href="example.mp4">動画ファイル</a> をダウンロードしてください。</p>
</video>

上記のコードでは、 <source> タグの type 属性の値は動画ファイルの MIME タイプです。この例では、2つの形式の動画ファイル（MP4 と WebM）を指定しています。ブラウザが MP4 をサポートしている場合は、MP4 形式の動画が読み込まれ、それ以降の処理は行われません。MP4 をサポートしていない場合は、WebM をサポートしているかどうかがチェックされ、それでもサポートしていない場合は、プロンプトが表示されます。

<audio>

<audio> タグはブロックレベル要素で、音声ファイルを配置するために使用されます。使い方は <video> タグとほぼ同じです。

<audio controls>
  <source src="foo.mp3" type="audio/mp3">
  <source src="foo.ogg" type="audio/ogg">
  <p>お使いのブラウザは HTML5 音声をサポートしていません。 <a href="foo.mp3">音声ファイル</a> を直接ダウンロードしてください。</p>
</audio>

上記のコードでは、 <audio> タグ内で <source> タグを使用して、2つの音声形式を指定しています。優先的に MP3 形式を使用し、ブラウザがサポートしていない場合は Ogg 形式を使用します。ブラウザが音声を再生できない場合は、ダウンロードリンクを提供します。

<audio> タグの属性は <video> タグと似ています。前のセクションを参照してください。

  • autoplay：自動再生するかどうか。ブール属性。
  • controls：再生ツールバーを表示するかどうか。ブール属性。設定しない場合、ブラウザは再生インターフェイスを表示しません。これは通常、バックグラウンドミュージックに使用されます。
  • crossorigin：クロスオリジン方式でリクエストするかどうか。
  • loop：ループ再生するかどうか。ブール属性。
  • muted：ミュートにするかどうか。ブール属性。
  • preload：音声ファイルのバッファリング設定。
  • src：音声ファイルのURL。

<track>

<track> タグは、動画の字幕を指定するために使用されます。字幕の形式は WebVTT（.vtt ファイル）で、 <video> タグ内に配置されます。これは単独で使用されるタグで、終了タグはありません。

<video controls src="sample.mp4">
   <track label="英語" kind="subtitles" src="subtitles_en.vtt" srclang="en">
   <track label="中国語" kind="subtitles" src="subtitles_cn.vtt" srclang="cn" default>
</video>

上記のコードは、動画ファイルの英語字幕と中国語字幕を指定します。

<track> タグには、以下の属性があります。

  • label：プレーヤーに表示される字幕の名前で、ユーザーが選択できます。
  • kind：字幕のタイプ。デフォルトは subtitles で、元の音声を外国語に翻訳したものを表します。例えば、英語の動画に中国語字幕を提供する場合などです。もう1つの一般的な値は captions で、元の音声の文字による説明を表します。通常は動画が元々使用している言語です。例えば、英語の動画に英語字幕を提供する場合などです。
  • src：vtt 字幕ファイルの URL。
  • srclang：字幕の言語。有効な言語コードである必要があります。
  • default：デフォルトで有効にするかどうか。ブール属性。

<source>

<source> タグは、 <picture>、 <video>、 <audio> の内部で使用され、外部リソースを指定します。単独で使用されるタグで、終了タグはありません。

以下の属性があり、具体的な例は対応するコンテナタグを参照してください。

  • type：外部リソースの MIME タイプを指定します。
  • src：ソースファイルを指定します。 <video> と <audio> で使用されます。
  • srcset：異なる条件下で読み込む画像ファイルを指定します。 <picture> で使用されます。
  • media：メディアクエリ式を指定します。 <picture> で使用されます。
  • sizes：異なるデバイスの表示サイズを指定します。 <picture> で使用され、 srcset と組み合わせて使用する必要があります。

<embed>

<embed> タグは、外部コンテンツを埋め込むために使用されます。この外部コンテンツは、通常、ブラウザプラグインによって制御されます。ブラウザのデフォルトプラグインは一貫していないため、すべてのブラウザユーザーがこのコンテンツにアクセスできるとは限りません。慎重に使用することをお勧めします。

以下は、動画プレーヤーを埋め込む例です。

<embed type="video/webm"
       src="/media/examples/flower.mp4"
       width="250"
       height="200">

上記のコードで埋め込まれた動画は、ブラウザプラグインによって制御されます。ブラウザに MP4 プラグインがインストールされていない場合、動画は再生できません。

<embed> タグには、以下の汎用属性があります。

  • height：表示の高さをピクセル単位で指定します。パーセンテージは使用できません。
  • width：表示の幅をピクセル単位で指定します。パーセンテージは使用できません
## `<embed>`

`<embed>` タグは、外部コンテンツを埋め込むために使用されます。この外部コンテンツは、通常、ブラウザプラグインによって制御されます。ブラウザのデフォルトプラグインは一貫していないため、すべてのブラウザユーザーがこのコンテンツにアクセスできるとは限りません。慎重に使用することをお勧めします。

以下は、動画プレーヤーを埋め込む例です。

```html
<embed type="video/webm"
       src="/media/examples/flower.mp4"
       width="250"
       height="200">

上記のコードで埋め込まれた動画は、ブラウザプラグインによって制御されます。ブラウザに MP4 プラグインがインストールされていない場合、動画は再生できません。

<embed> タグには、以下の汎用属性があります。

  • height：表示の高さをピクセル単位で指定します。パーセンテージは使用できません。
  • width：表示の幅をピクセル単位で指定します。パーセンテージは使用できません。
  • src：埋め込むリソースの URL。
  • type：埋め込むリソースの MIME タイプ。

ブラウザは type 属性を通して埋め込みリソースの MIME タイプを取得し、そのタイプが既にプラグインに登録されている場合は、そのプラグインを起動して埋め込みリソースの処理を担当させます。

以下は、QuickTime プラグインで MOV 動画ファイルを再生する例です。

<embed type="video/quicktime" src="movie.mov" width="640" height="480">

以下は、Flash プラグインを起動する例です。

<embed src="whoosh.swf" quality="medium"
       bgcolor="#ffffff" width="550" height="400"
       name="whoosh" align="middle" allowScriptAccess="sameDomain"
       allowFullScreen="false" type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer">

上記のコードでは、ブラウザに Flash プラグインがインストールされていない場合、 pluginspage 属性で指定されたURLからダウンロードするように促します。

<object>、<param>

<object> タグの役割は <embed> と似ており、外部リソースを挿入し、ブラウザプラグインによって処理されます。これは <embed> の代替と見なすことができ、標準化された動作を持ち、少数の汎用的なリソースの挿入に限定され、歴史的な問題もありません。そのため、 <object> の使用が推奨されます。

以下は、PDF ファイルを挿入する例です。

<object type="application/pdf"
    data="/media/examples/In-CC0.pdf"
    width="250"
    height="200">
</object>

上記のコードでは、ブラウザに PDF プラグインがインストールされている場合、ウェブページに PDF 閲覧ウィンドウが表示されます。

<object> には以下の汎用属性があります。

  • data：埋め込むリソースの URL。
  • form：現在のウェブページ内の関連するフォームの id 属性（もしあれば）。
  • height：リソースの表示高さ（単位：ピクセル）。パーセンテージは使用できません。
  • width：リソースの表示幅（単位：ピクセル）。パーセンテージは使用できません。
  • type：リソースの MIME タイプ。
  • typemustmatch：ブール属性で、 data 属性と type 属性が一致する必要があるかどうかを示します。

以下は、Flash ムービーを挿入する例です。

<object data="movie.swf"
  type="application/x-shockwave-flash"></object>

<object> タグはコンテナ要素であり、内部で <param> タグを使用して、プラグインに必要な実行パラメータを提供できます。

<object data="movie.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar">
</object>

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章