【HTML Living Standard】video要素の使い方
video要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
videoオブジェクトは、HTML文書内に動画コンテンツを埋め込み、Webページ上で直接再生できるようにする機能を表すオブジェクトです。このvideo要素を使用することで、外部のプラグインに頼ることなく、MP4やWebMなどの形式の動画を簡単に表示できます。
動画ファイルへのパスはsrc属性で指定し、ユーザーが再生や一時停止、音量調整などを行える標準的な操作コントローラーを表示するにはcontrols属性を付与します。他にも、動画の読み込みが完了するまで表示するサムネイル画像を指定するposter属性や、動画の幅と高さをピクセル単位で設定するwidthおよびheight属性があります。
また、autoplay属性で自動再生を、loop属性で繰り返し再生を、muted属性でデフォルトで音声を消しておく設定が可能です。複数の動画フォーマットを提供したい場合は、video要素の内部に<source>要素を配置し、ブラウザがサポートする最適な形式を選択できるようにすることで、幅広い環境での再生互換性を高めることができます。
video要素は、現代のWebサイトにおいてリッチなマルチメディアコンテンツを提供する上で不可欠な要素であり、ユーザーエクスペリエンスの向上に大きく貢献します。主要なWebブラウザで広くサポートされており、Web標準に準拠した形で動画を埋め込むための標準的な方法として利用されています。
構文(syntax)
1<video src="video.mp4" controls> 2 お使いのブラウザは動画の再生に対応していません。 3</video>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML videoタグで動画を埋め込む
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML Videoタグの基本サンプル</title> 7</head> 8<body> 9 <h1>動画再生の基本</h1> 10 11 <!-- videoタグはウェブページに動画を埋め込むために使用されます --> 12 <!-- controls属性は、再生/一時停止、音量などの標準的な動画コントロールを表示します --> 13 <video controls width="640" height="360"> 14 <!-- sourceタグは、異なるフォーマットの動画ファイルを提供し、ブラウザが再生可能なものを選択できるようにします --> 15 <!-- src属性には動画ファイルのパス、type属性にはMIMEタイプ（動画の形式）を指定します --> 16 <source src="sample-video.mp4" type="video/mp4"> 17 <source src="sample-video.webm" type="video/webm"> 18 <!-- ブラウザがvideoタグをサポートしていない場合に表示される代替テキストです --> 19 <p>お使いのブラウザは動画タグをサポートしていません。</p> 20 </video> 21 22 <p> 23 注: このサンプルコードでは「sample-video.mp4」と「sample-video.webm」という架空のファイルパスを使用しています。<br> 24 実際に動画を再生するには、これらのパスをご自身の動画ファイルへの正しいパスに置き換えてください。 25 </p> 26</body> 27</html>
HTMLのvideoタグは、ウェブページに動画コンテンツを埋め込み、ユーザーがブラウザ上で直接動画を視聴できるようにするための要素です。
このサンプルコードでは、<video controls width="640" height="360">のように記述されており、controls、width、heightといった属性が指定されています。これらはプログラミング言語の引数のように、videoタグの挙動や表示を制御する役割を持ちます。具体的には、controls属性を指定することで、再生や一時停止、音量調整といった標準的な動画操作UIが自動的に表示されます。width属性とheight属性は、動画プレイヤーの表示サイズをそれぞれ幅640ピクセル、高さ360ピクセルに設定しています。
videoタグの内部には、<source>タグを配置することで、複数の異なるファイル形式の動画を提供できます。src属性には動画ファイルのパスを、type属性には動画のMIMEタイプ（ファイル形式）を指定します。これにより、ブラウザはサポートしている最適な動画形式を自動的に選択し、高い互換性を実現します。
もしユーザーのブラウザがvideoタグをサポートしていない場合、videoタグ内に記述された「お使いのブラウザは動画タグをサポートしていません。」という代替テキストが表示されるようになっています。
videoタグ自体にはプログラミング言語のような直接的な戻り値はありませんが、HTMLドキュメント内で動画プレイヤーをレンダリングし、ユーザーに動画コンテンツを表示するという視覚的な結果をもたらします。
このvideoタグのサンプルコードをご利用の際は、sourceタグのsrc属性に記述された動画ファイルのパスを、実際に利用する動画への正しいパスに必ず置き換えてください。サンプルパスのままでは動画は表示されません。複数のsourceタグでMP4やWebMなど異なるフォーマットの動画を提供することで、ブラウザによる再生互換性が向上し、より多くのユーザーが動画を視聴できるようになります。その際、type属性には動画の正確なMIMEタイプ（例: video/mp4）を指定することが重要です。controls属性を記述しない場合、ユーザーは再生・一時停止などの操作ができませんので、通常は含めるようにしてください。また、videoタグ内のテキストは、ブラウザが動画再生に対応していない場合に表示される代替コンテンツのため、適切なメッセージを記述しましょう。
HTML video要素で自動再生する
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>HTML Video 自動再生サンプル</title> 6</head> 7<body> 8 <!-- 9 video要素は動画コンテンツをウェブページに埋め込みます。 10 - autoplay: ページが読み込まれた際に動画の再生を自動で開始します。 11 多くのブラウザでは、音量がある動画の自動再生をブロックするため、 12 autoplayを使用する際は通常muted属性と併用します。 13 - muted: 動画の音声をデフォルトでミュートします。autoplayと組み合わせることで、 14 多くのブラウザで自動再生が許可されます。 15 - loop: 動画の再生が終了したときに、最初から繰り返し再生します。 16 - controls: 動画の再生/一時停止、音量調整などの標準的なコントロールを表示します。 17 - width/height: 動画の表示サイズを設定します。 18 - source要素: 異なる形式の動画ファイルを提供し、ブラウザが対応している最も適切なものを選択できるようにします。 19 src属性を直接video要素に指定することも可能です。 20 --> 21 <video autoplay muted loop controls width="640" height="360"> 22 <!-- サンプル動画のパスです。実際にはご自身の動画ファイルに置き換えてください。 --> 23 <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 24 <!-- ブラウザがvideo要素をサポートしていない場合に表示される代替コンテンツです。 --> 25 お使いのブラウザは動画の再生をサポートしていません。 26 </video> 27</body> 28</html>
HTMLのvideo要素は、ウェブページに動画コンテンツを埋め込むために使用される要素です。この要素自体には、特定の引数や戻り値という概念は適用されません。
サンプルコードでは、Webページを読み込んだ際に動画を自動で再生する設定がされています。これはautoplay属性によって実現されますが、多くのブラウザでは、ユーザーの意図しない音量のある動画の自動再生をブロックします。そのため、muted属性を併用し、動画の音声をデフォルトでミュートにすることで、ほとんどのブラウザで自動再生が許可されるようになります。
また、loop属性を指定することで動画は繰り返し再生され、controls属性によって再生・一時停止や音量調整といった標準的な操作パネルが表示されます。widthとheight属性は動画の表示サイズを設定します。
video要素の内部には、source要素が使われています。これは、複数の異なる形式の動画ファイルを提供し、ブラウザが対応できる最適な動画を自動で選択できるようにするものです。これにより、さまざまな環境で安定して動画が表示されるようになります。
HTMLのvideo要素で動画を自動再生する際は、autoplay属性とmuted属性を必ず併用してください。多くのブラウザは音量付き動画の自動再生を制限するため、mutedがないと動画が再生されないことがあります。また、source要素を使って複数の動画形式を提供することで、様々なブラウザでの互換性を高めることが重要です。サンプルコードの動画パスはご自身のファイルに置き換える必要があります。ウェブ公開時には、動画ファイルの著作権やファイルサイズにも注意しましょう。video要素内に代替テキストを記述することで、ブラウザが動画をサポートしない場合でも情報をユーザーに伝えられます。