HTMLのvideoタグの使い方を完全ガイド！初心者でもわかる動画埋め込みの基本
生徒
「Webサイトに動画を置きたいんですけど、HTMLでどうやって表示するんですか？」
先生
「HTMLではvideoタグを使うと、特別な知識がなくても動画を表示できます。」
生徒
「再生ボタンとか、自動再生もできますか？」
先生
「controlsやautoplayなどの属性を指定するだけで簡単に設定できます。順番に見ていきましょう。」
1. HTMLのvideoタグとは？
videoタグは、Webページに動画ファイルを表示するためのHTMLタグです。以前は動画を表示するために特別なプラグインが必要でしたが、現在はHTMLだけで動画再生ができます。YouTubeのように「再生」「一時停止」「音量調整」ができる動画プレイヤーを、自分のサイトにそのまま置けるイメージです。
HTML videoタグを使うことで、スマートフォンやパソコンなど、さまざまな端末で同じ動画を再生できるようになります。
2. videoタグの基本的な書き方
まずは、一番シンプルなvideoタグの書き方を見てみましょう。src属性で動画ファイルの場所を指定します。動画ファイルとは、mp4などの拡張子を持つファイルのことです。
<video src="/sample.mp4" style="width:50%"></video>
このままでは操作ができないため、次に紹介するcontrols属性がよく使われます。
3. controls属性で操作パネルを表示する
controls属性を指定すると、再生ボタンや音量調整などの操作パネルが表示されます。初心者の方は、まずこの属性を必ず付けると覚えておくと安心です。
<video src="/sample.mp4" style="width:50%" controls></video>
controlsを付けるだけで、動画プレイヤーとして最低限必要な機能が自動で表示されます。
4. autoplay属性で動画を自動再生する
autoplay属性を指定すると、ページを開いた瞬間に動画が自動で再生されます。お店の紹介動画や、雰囲気を伝えたいページで使われることが多いです。
<video src="/sample.mp4" style="width:50%" controls autoplay></video>
ただし、多くのブラウザでは音が出る動画の自動再生が制限されています。そのため、次に説明するmuted属性と一緒に使うのが一般的です。
5. muted属性で音を消した状態にする
muted属性を指定すると、動画の音声が最初からオフになります。音が出ない状態であれば、自動再生が許可されるケースが多くなります。
<video src="/sample.mp4" style="width:50%" controls autoplay muted></video>
スマートフォンでWebサイトを見たとき、急に音が出ないようにする配慮としても重要な設定です。
6. widthとheightで動画サイズを調整する
動画の大きさは、widthとheight属性で指定できます。数値はピクセルという単位で指定し、画面上の大きさを決めます。ピクセルとは、画面を構成する点の大きさだと考えると分かりやすいです。
<video src="/sample.mp4" controls width="400" height="300"></video>
指定しない場合は、動画ファイル本来のサイズで表示されます。
7. poster属性で再生前の画像を表示する
poster属性を使うと、動画が再生される前に表示される画像を指定できます。動画の表紙のような役割を持ち、どんな動画なのか一目で伝えられます。
<video src="/sample.mp4" style="width:50%" controls poster="/img/sample150-100.jpg"></video>
画像を設定することで、ページ全体の見た目も整いやすくなります。
8. sourceタグを使った動画形式の指定
ブラウザによって対応している動画形式が異なる場合があります。そのときは、videoタグの中にsourceタグを複数書くことで、再生できる形式を自動で選んでもらえます。
<video controls>
<source src="/sample.mp4" style="width:50%" type="video/mp4">
<source src="/sample.webm" style="width:50%" type="video/webm">
</video>
この書き方を覚えておくと、より多くの環境で動画を再生できるようになります。
まとめ
videoタグの基本と重要性を振り返る
HTMLのvideoタグはWebページに動画を埋め込むための基本的な仕組みであり、現在のWeb制作において非常に重要な役割を持っています。従来は動画再生に外部プラグインが必要でしたが、HTML5の登場によってブラウザだけで動画を再生できるようになりました。これによりユーザーは追加のソフトをインストールする必要がなくなり、誰でも簡単に動画コンテンツを楽しめるようになっています。初心者にとっても扱いやすく、シンプルな記述で本格的な動画プレイヤーを実装できる点が大きな魅力です。
controlsやautoplayなどの属性の理解
videoタグを使う際にまず覚えておきたいのがcontrols属性です。この属性を付けることで再生ボタンや音量調整などの操作パネルが表示され、ユーザーが直感的に操作できるようになります。またautoplay属性を使うことでページ読み込み時に自動再生が可能になりますが、多くのブラウザでは音声付きの自動再生が制限されているためmuted属性と組み合わせて使うのが一般的です。このような属性の組み合わせを理解することでユーザー体験を大きく向上させることができます。
widthとheightによるレイアウト調整
videoタグではwidth属性とheight属性を使って動画の表示サイズを指定できます。これによりページ全体のレイアウトが安定し見やすいデザインを実現できます。サイズを指定しない場合は動画の元サイズで表示されますが、ページ構成に合わせて適切なサイズを設定することが重要です。またCSSと組み合わせることでレスポンシブ対応を行うことも可能です。スマートフォンやタブレットでも快適に閲覧できるように設計することが求められます。
poster属性と視覚的な工夫
poster属性を使うことで動画再生前に表示されるサムネイル画像を設定できます。これによりユーザーは動画の内容を事前に把握できクリックしやすくなります。視覚的な印象を良くするためにもposter画像は非常に重要です。特に商品紹介やサービス説明などでは魅力的なサムネイルを設定することでクリック率向上にもつながります。
sourceタグで互換性を高める
動画形式はブラウザによって対応状況が異なるためsourceタグを使って複数の形式を指定することが重要です。これによりユーザーの環境に応じて再生可能な動画が自動で選択されます。mp4形式が最も一般的ですがwebmなども併用することでより多くの環境に対応できます。この工夫によって再生できないという問題を防ぐことができます。
SEOと動画コンテンツの関係
videoタグを使った動画コンテンツはSEO対策にも影響します。動画を含むページは滞在時間が長くなる傾向があり検索エンジンから高評価を得やすくなります。また動画の内容を説明するテキストをしっかり記述することで検索エンジンが内容を理解しやすくなります。ファイル名や周辺テキストにもキーワードを自然に含めることが重要です。動画だけに頼るのではなくテキストとの組み合わせを意識することでより効果的なページになります。
サンプルプログラムで総合的に確認
<video controls autoplay muted width="400" height="300" poster="/img/sample150-100.jpg">
<source src="sample.mp4" type="video/mp4">
<source src="sample.webm" type="video/webm">
お使いのブラウザは動画タグに対応していません。
</video>
このサンプルではcontrolsやautoplayやmutedやposterやsourceなど、これまで学んだ内容をまとめて確認できます。実際の開発ではこのように複数の属性を組み合わせて使うことが多くなります。基本を理解した上で状況に応じて適切に使い分けることが重要です。
初心者が意識すべきポイント
初心者がvideoタグを扱う際にはまずcontrols属性を付けることを習慣にしましょう。その上で自動再生や音声設定などを必要に応じて追加していきます。また動画ファイルのサイズにも注意が必要です。大きすぎるファイルはページの表示速度を低下させユーザー体験を損なう原因になります。適切に圧縮した動画を使用することが大切です。
まとめとしての重要な考え方
HTMLのvideoタグはシンプルでありながら非常に強力な機能を持っています。正しく使うことでユーザーにとって分かりやすく魅力的なコンテンツを提供できます。動画は視覚的に情報を伝える力が強く適切に配置することでページの価値を高めることができます。基本的な書き方を理解し属性を使いこなすことで初心者でも質の高いWebページを作ることが可能になります。これからのWeb制作では動画の活用がますます重要になるためしっかりと基礎を身につけておきましょう。
生徒
「videoタグって思ったより簡単に使えるんですね」
先生
「基本はシンプルですが組み合わせると便利になります」
生徒
「controlsは必ず付けるって覚えました」
先生
「まずはそこからで大丈夫です」
生徒
「自動再生はmutedと一緒に使うんですね」
先生
「ユーザーへの配慮としてとても重要です」
生徒
「sourceタグで複数の形式に対応するのも理解できました」
先生
「環境に左右されないサイト作りにつながります」
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
