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"></video>
このままでは操作ができないため、次に紹介するcontrols属性がよく使われます。
3. controls属性で操作パネルを表示する
controls属性を指定すると、再生ボタンや音量調整などの操作パネルが表示されます。初心者の方は、まずこの属性を必ず付けると覚えておくと安心です。
<video src="sample.mp4" controls></video>
controlsを付けるだけで、動画プレイヤーとして最低限必要な機能が自動で表示されます。
4. autoplay属性で動画を自動再生する
autoplay属性を指定すると、ページを開いた瞬間に動画が自動で再生されます。お店の紹介動画や、雰囲気を伝えたいページで使われることが多いです。
<video src="sample.mp4" controls autoplay></video>
ただし、多くのブラウザでは音が出る動画の自動再生が制限されています。そのため、次に説明するmuted属性と一緒に使うのが一般的です。
5. muted属性で音を消した状態にする
muted属性を指定すると、動画の音声が最初からオフになります。音が出ない状態であれば、自動再生が許可されるケースが多くなります。
<video src="sample.mp4" 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" controls poster="/img/sample150-100.jpg"></video>
画像を設定することで、ページ全体の見た目も整いやすくなります。
8. sourceタグを使った動画形式の指定
ブラウザによって対応している動画形式が異なる場合があります。そのときは、videoタグの中にsourceタグを複数書くことで、再生できる形式を自動で選んでもらえます。
<video controls>
<source src="sample.mp4" type="video/mp4">
<source src="sample.webm" type="video/webm">
</video>
この書き方を覚えておくと、より多くの環境で動画を再生できるようになります。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
