htmlタグ｜audio・video・source ホームページへの動画・音声の直接埋め込みと複数ファイルの指定

ホームページ（ウェブサイト）制作において、テキストや静止画だけでなく、音声や動画といったマルチメディアコンテンツを活用することは、ユーザーに豊かな体験を提供するために非常に重要です。かつて、Webページに動画や音声を埋め込むためには、Flashなどの外部プラグインに依存する必要があり、閲覧する端末やブラウザ環境によっては再生できないという大きな課題がありました。しかし、HTML5の規格において「audio」タグと「video」タグが新しく追加されたことで、プラグインを使用せずにHTMLの標準機能だけで簡単に音声や動画を再生できるようになりました。

「audio」タグは、ポッドキャストの音声データやBGMなど、音声ファイルをページ内に埋め込んで再生するためのタグです。一方、「video」タグは、事業の紹介動画や商品の使い方を説明する動画など、映像ファイルを埋め込むために使用します。これらのタグには、再生、一時停止、音量調整といった操作パネル（コントロールバー）を表示させる属性や、ページを開いた瞬間に自動再生させる属性などが標準で用意されており、ユーザーの閲覧環境に合わせた柔軟な設定が可能です。

video（動画）タグやaudio（音声）タグを使用する際、実際に読み込むメディアファイルの情報や種類を指定するために用いるのがsourceタグです。これはは単独で機能するものではなく、videoタグやaudioタグなどのメディア要素の内部に配置する子要素として記述します。

ちなみに、インターネットの黎明期には、ページを開いた瞬間に自動でBGMを流すための「bgsound」というタグが存在していました。これは特定のブラウザ独自の仕様であり、他のブラウザでは機能しない非標準のタグでした。ユーザーの意図しないタイミングで突然音が鳴ることはユーザビリティを著しく損なうため、現在ではこの「bgsound」タグは完全に廃止されています。現代のWeb標準において音声を扱う場合は、必ず「audio」タグを使用し、ユーザー自身が再生をコントロールできる設計にすることが求められます。

ホームページ（ウェブサイト）に直接動画や音声ファイルを配置することは、ページの読み込み速度（ページスピード）に大きな影響を与えます。ファイルサイズが大きすぎるとページの表示が遅延し、ユーザーの離脱を招くだけでなく、SEO（検索エンジン最適化）においてもマイナスの評価を受ける可能性があります。

そのため、自社サーバーに直接動画をアップロードするのではなく、YouTubeなどの動画配信プラットフォームを活用して「iframe」タグでページに埋め込む手法も、事業の状況に応じて適切に使い分けることが重要です。本ページでは、「audio」タグと「video」タグの基本的な記述方法から、ユーザー体験とSEOの両立を目指した効果的なマルチメディア配置について詳しく解説します（廃止されたbgsoundについても後半に言及しています）。

ホームページ（ウェブサイト）に音声を適切に組み込み、ユーザー体験を高めるための知識としてお役立てください。

audio（オーディオ）

<audio></audio>

ホームページ制作（ウェブサイト制作）の際に使用する<audio>タグについてのご説明です。

<audio>（オーディオ）タグを使用することによって、ウェブサイト・ホームページ内で音声を再生することができます。

ホームページ（ウェブサイト）制作において、視覚的な情報だけでなく、音声コンテンツを活用してユーザーに情報を伝える場面が増えています。ポッドキャストの配信、語学スクールの発音サンプル、あるいは事業を説明する音声ガイドなど、ブラウザ上で直接音声を再生させるために使用されるのが、HTML5から標準化された「audio」タグです。

以前のホームページ（ウェブサイト）では、音声を再生するためにFlashなどの外部プラグインに依存する必要がありました。しかし、現在の規格ではこの「audio」タグを使用することで、プラグインなしで安全かつ軽量にMP3などの音声ファイルをページ内に埋め込むことが可能です。「controls」属性を付与するだけで、再生ボタンや音量調節、シークバーといった操作パネルを簡単に表示させることができます。

<audio>  ホームページで音声を再生

<audio>タグは、ホームページ（ウェブサイト）において音声を再生するためのhtmlタグです。 再生音声ファイルは、src属性で指定。 タグの中に サポートされていない場合に表示させるメッセージを記述することも可能です。

audioタグを正しく使用することは、SEO（検索エンジン最適化）やWebアクセシビリティの観点からも重要です。ただ音声を配置するだけでなく、音声の内容をテキストでも併記する（トランスクリプトを用意する）などの工夫を組み合わせることで、検索エンジンがコンテンツの内容を正確に理解できるようになり、ページ全体の評価向上につながります。

現代のブラウザ環境では自動再生の制限など、注意すべき仕様が存在します。また、通信量やユーザビリティの観点から適切な属性指定を行うことが重要です。

以下、audioタグを機能させるための基本的な属性群です。ユーザーに音声を届けるための必須設定や、再生時の挙動をコントロールします。

src（ソース）属性

再生する音声ファイルのURLを指定します。src=””の中にファイルのパスを記述します。現在ではmp3形式などを指定することが一般的ですが、ブラウザの対応状況に合わせるため、audioタグ内に複数のsourceタグを用いて複数のファイル形式（mp3、ogg、aacなど）を指定する手法も広く採用されています。

controls（コントロールス）属性

ユーザーが音声を再生、一時停止、音量調整などを操作できるプレイヤー（インターフェース）を画面上に表示します。このcontrols属性を指定しない場合、音声プレイヤー自体がホームページ（ウェブサイト）上に表示されません。特別な意図がない限りは記述することが標準的な仕様です。

autoplay（オートプレイ）属性と現代のブラウザ制限

ページを開いた際に音声を自動再生させる属性です。しかし現代の主要なブラウザ（ChromeやSafariなど）は、ユーザーの予期せぬ音声再生を防ぐため、ユーザーの直接的なアクション（クリックなど）がない状態での自動再生を厳しくブロックします。そのため、autoplayを指定しても機能しないケースが多いことを前提に事業のコンテンツを設計します。

loop（ループ）属性

音声の再生が終了した際、自動的に最初から繰り返し再生させる属性です。

読み込みの最適化とvideoタグとの明確な違い

ページの表示速度を最適化するための設定や動画を扱うvideoタグと混同されやすい属性の違いについて解説します。

preload（プリロード）属性

ページが読み込まれた際に、音声ファイルをあらかじめ読み込むかどうかをブラウザに指示します。指定できる値は以下の3種類から選択します。

metadata

音声の長さやファイルの基本情報のみを読み込みます。通信量を抑えつつ、プレイヤーの準備を整えることができるため、現代の仕様において最も推奨される設定です。

none

ユーザーが再生ボタンを押すまで音声ファイルの読み込みを行いません。ページの初期表示速度を最優先したい場合や、再生される可能性が低い音声に対して有効です。

auto

ページ読み込みと同時に音声ファイル全体をダウンロードします。ユーザーがすぐに再生を開始できる利点がありますが、データ通信量が大きくなるため多用は控えます。

読み方　オーディオ

<audio></audio>

ホームページ制作・SEOの1ポイント

スマートフォンなどの普及によって、モバイルデバイスでのホームページ閲覧の機会が増えてきました。音声ファイルの自動再生は、閲覧環境によってはユーザーにとって迷惑となる場合があります。なるべくユーザーのアクションによって再生されるといったような配慮が必要になるでしょう。

SEOを考える上で、ページコンテンツの品質に着目した場合は、テキストを正確に記述していくことや見出し構造などを最適化していくことの他に、ページ内に音声ファイルをはじめとした、広い意味でのオリジナルコンテンツの組み込みも要素として考えられます。

video（ビデオ）

<video></video>

ホームページ制作（ウェブサイト制作）の際に使用する<video>タグについてのご説明です。

ホームページ制作において<video>（ビデオ）タグは、ホームページ（ウェブサイト）内で動画を再生する場合に使用するタグです。

旧来はホームページ制作において動画再生プラグインなどをサーバー内に設置して動画再生を行っていましたが、現在はHTMLで一般的な動画を再生できるようになっています。

ホームページ（ウェブサイト）に動画コンテンツを埋め込むためのvideoタグは、通信環境の向上とともに事業展開において非常に重要になっています。しかし、スマートフォンでの閲覧が主流となり、ブラウザの仕様も大きく変化した現在では、ただ動画を配置するだけでは意図した通りに再生されません。検索エンジンの評価（SEO）や表示速度、ユーザーの利便性を両立させるための、現代の仕様に基づいたvideoタグの属性と実践的な設定について解説します。

<video>  動画を再生

<video>は、html5より追加された要素で、動画を再生する場合に使用します。ビデオ。

プラグイン（flashなど）インストールを必要とせずに、標準のhtmlから動画再生することができます。HTML5より、マークアップだけでなく、この動画再生など、API も新しく追加されました。

以下、ユーザーに動画を届けるための基本的な指定と、再生時の挙動をコントロールする属性群です。現代の閲覧環境に合わせて適切に設定します。

src（ソース）属性とsourceタグの活用

再生する動画ファイルのURLを指定します。videoタグ内に src=”動画ファイルのURL” と直接記述することも可能ですが、現代のホームページ（ウェブサイト）制作においては、videoタグの内部に複数のsourceタグを配置する手法が主流です。これにより、ブラウザの対応状況に合わせてmp4やwebmなど、複数のファイル形式を出し分けることができます。

controls（コントロールス）属性

ユーザーが再生、一時停止、シークバーの操作、音量調整、フルスクリーン表示などを行えるインターフェース（操作パネル）を表示します。背景動画として扱うような特殊な意図がない限り、ユーザーの利便性を高めるために記述することが基本です。

loop（ループ）属性

動画の再生が最後まで到達した際、自動的に最初から繰り返し再生させる属性です。

現代のブラウザ仕様で必須となる自動再生関連の属性

動画を自動再生させたい場合、過去の仕様とは異なり、現在の主要ブラウザ（ChromeやSafariなど）には厳格な制限が設けられています。意図した動作を実現するためには、以下の属性を組み合わせて指定する必要があります。

autoplay（オートプレイ）属性とmuted（ミュート）属性の併用

動画を自動再生させるautoplay属性ですが、現代のブラウザではユーザーが予期せぬ音声を不快に感じることを防ぐため、音声が出る状態での自動再生を厳しくブロックします。そのため、自動再生を有効にするには、必ず音声を消音にする muted（ミュート）属性をセットで記述します。

playsinline（プレイズインライン）属性による最適化

特にiPhone（iOS）のSafariにおいて、動画を全画面表示させず、ホームページ（ウェブサイト）のレイアウト内に埋め込んだままインライン再生させるために指定します。事業用ページのトップページなどで背景動画を自動再生させる場合、autoplay、mutedと合わせてこのplaysinline属性を指定することが現代の実装において強く求められます。

ページの表示速度とレイアウトの安定性を保つ属性

より専門的には、動画ファイルの読み込みはデータ通信量が大きいため、ページの表示速度（Core Web Vitals）に悪影響を及ぼす可能性があります。SEOの評価を下げないための最適な設定を行います。

preload（プリロード）属性による読み込み制御

ページが表示された際に、動画データを事前に読み込むかどうかをブラウザに指示します。ユーザーが再生ボタンを押すまで読み込まない none、動画の長さやサイズ情報のみを読み込む metadata、ページ読み込みと同時に動画データをダウンロードする auto の3種類があります。ページの初期表示速度を優先しつつ、スムーズな再生準備を整える metadata を指定することが現在の標準的な最適解です。

poster（ポスター）属性によるサムネイル表示

動画が読み込まれる前、または再生されるまでの間に表示しておくサムネイル画像を指定します。通信環境によって動画の読み込みに時間がかかる場合でも、ユーザーに動画の内容を視覚的に伝えることができます。体感的な表示速度の向上につながるため、設定を推奨します。

width（幅）とheight（高さ）属性によるレイアウトシフト対策

動画の表示サイズを指定します。レスポンシブデザインのホームページ（ウェブサイト）においてはCSSで動画の幅を画面に合わせて可変させますが、HTML側でこのwidth属性とheight属性にあらかじめ縦横の数値を指定しておくことが非常に重要です。これによりブラウザが動画の縦横比（アスペクト比）を事前に計算し、動画の読み込み前後でページのレイアウトが大きく崩れる現象（CLS：Cumulative Layout Shift）を防ぐことができます。

<video></video>

ビデオSEOと構造化データの活用による検索露出の拡大

単に動画を表示させるだけでなく、検索エンジンにその内容を正しく伝えるための「ビデオSEO」への配慮が重要です。動画のファイル名や周囲のテキスト情報はもちろん、JSON-LDなどの構造化データを用いて「VideoObject」を定義することで、Googleの動画検索結果やリッチリザルトに表示される可能性を高めることができます。

動画の内容、アップロード日、サムネイルのURLなどを正確にマークアップすることは、ホームページのコンテンツが検索エンジンのインデックスにおいて正しく評価されるための基盤となります。

パフォーマンス最適化とCore Web Vitalsへの影響

動画はホームページ内で最も容量が重い要素の一つであるため、表示速度への影響を最小限に抑える工夫が求められます。Web制作の現場では、WebMやAV1といった高圧縮率の次世代コーデックを優先的に指定し、ブラウザに合わせて最適なファイルを配信するのが一般的です。

また、動画読み込み時のレイアウトのガタつき（レイアウトシフト）を防ぐために、videoタグにwidthとheight属性を正しく指定し、あらかじめ表示領域を確保しておくことは、Core Web Vitals（コアウェブバイタル）のCLSスコアを改善するために重要です。こうした細かな設定が、ユーザー体験の向上と検索順位の安定に直結します。

アクセシビリティの確保とモバイル端末への対応

モバイル端末での動画自動再生を実現するためには、muted（消音）属性とplaysinline属性の併用が必要です。これらを忘れると、特定のブラウザや環境で動画が再生されない原因になります。

さらに、聴覚障害のあるユーザーや音を出せない環境で閲覧しているユーザーへの配慮として、trackタグを用いた字幕（VTTファイル）を提供することも検討すべき重要なポイントです。アクセシビリティを高めることは、すべてのユーザーに対して情報を適切に届けるという事業上の信頼性向上につながり、結果としてホームページの価値を高めることになります。

ホームページ制作・SEOの1ポイント

ホームページに動画を埋め込む場合、旧来からのホームページ制作であれば、動画ファイルをサーバーにアップロードし、動画再生のプログラムを設置してプレイヤーをページ内に呼び出す方法などが取られていましたが、この<video>タグによって、ホームページ内への動画の埋め込みが格段に楽になりました。

サーバー負荷を避けるため、YouTubeなどに動画ファイルをアップロードする方法などがよく用いられています。なお、YouTube動画を埋め込む場合はインラインフレームを利用します。

インラインフレームを利用した動画の埋め込みの場合は、該当部分の幅などに注意する必要があります。

マルチメディアコンテンツの適切な配置とSEOへの影響

動画や音声を活用して事業の魅力を伝えることは効果的ですが、ただ単純にタグを配置するだけでは、検索エンジンやユーザーにとって最適な状態とは言えません。ここでは、ページの表示速度やWebアクセシビリティに配慮した、現代のWeb標準に沿った実装手法について解説します。

ファイルサイズの最適化とページ表示速度の改善

「video」タグを使用して自社のサーバーから直接動画を読み込ませる場合、動画ファイルの軽量化は避けて通れません。重い動画ファイルはサーバーに負荷をかけ、ページの表示速度を大幅に低下させます。スマートフォンからのアクセスが主流となった現在、表示の遅いページはユーザーにストレスを与え、直帰率の上昇につながります。動画の解像度やビットレートを適切に圧縮したり、必要に応じて外部プラットフォームを利用したりする柔軟な対応が、集客に強いホームページ（ウェブサイト）を維持するために役立ちます。

代替テキストとアクセシビリティの確保

検索エンジンのクローラーや音声読み上げソフト（スクリーンリーダー）は、動画や音声の情報を直接理解することはできません。そのため、「audio」タグや「video」タグを配置する際は、そのコンテンツがどのような内容を含んでいるのかを、周囲のテキストでしっかりと説明することが求められます。動画の内容を要約した文章を配置したり、音声の書き起こし（トランスクリプト）を用意したりすることで、視覚や聴覚に制限のあるユーザーにも情報が伝わり、同時に検索エンジンに対しても正確な意味を伝達できます。

source（ソース）

<source>

ホームページ制作（ウェブサイト制作）の際に使用する<source>タグについてのご説明です。

ホームページ制作において<source>（ソース）タグは、ホームページ（ウェブサイト）に設置する動画や音声などのURLや種類を指定する場合に使用します。

<source> 動画や音声などのURLや種類を指定

<source>タグは、動画や音声などのURLや種類を指定します。ソース。

video（動画）タグやaudio（音声）タグを使用する際、実際に読み込むメディアファイルの情報や種類を指定するために用いるのがsourceタグです。現代のホームページ（ウェブサイト）制作において、多様な閲覧環境を持つユーザーに対して最適な形式のファイルを確実かつ高速に提供するために、非常に重要な役割を持ちます。事業展開におけるユーザー体験の向上と、通信パフォーマンスの最適化を実現するためのsourceタグの属性について解説します。

sourceタグの基本構造とファイル指定の属性

sourceタグは単独で機能するものではなく、videoタグやaudioタグなどのメディア要素の内部に配置する子要素として記述します。ひとつのメディア要素内に複数のsourceタグを並べて記述することで、ブラウザが上から順番に読み込み、自身が対応している最初の形式を自動的に選択して再生する仕組みを構築できます。

src（ソース）属性

再生したい動画や音声ファイルのURL（情報源）を指定します。src=”” の中にファイルへのパスを記述します。これにより、対象となるメディアファイルの正確なサーバー上の位置をブラウザに伝えます。

ブラウザの判別と配信を最適化する属性

より専門的には、利用されるブラウザ（Chrome、Safari、Edgeなど）の種類やバージョンによって、対応している動画・音声のファイル形式は異なります。ユーザーの環境に合わせて最適なファイルを無駄なく配信するためには、以下の属性を組み合わせることが重要です。

type（タイプ）属性

指定したメディアファイルのMIMEタイプ（ファイルの種類やデータ形式）をブラウザに明示します。type=”” の中に、動画であれば video/mp4 や video/webm、音声であれば audio/mpeg や audio/ogg などを指定します。この記述を添えることで、ブラウザはファイルを実際にダウンロードする前に、自分が再生できる形式かどうかを即座に判断できるようになります。無駄なデータ通信を回避し、ホームページ（ウェブサイト）の表示速度低下を防ぐために、src属性とセットでの設定を推奨します。

media（メディア）属性

ユーザーの閲覧環境（画面の横幅や端末の向きなど）に応じて、読み込ませるファイルを切り替えるための条件を指定します。CSSのメディアクエリと同様の記述を用い、media=”(max-width: 768px)” のように設定します。例えば、パソコン用の横長の大きな動画と、スマートフォン閲覧用の縦長でデータ容量を抑えた動画を別々に用意し、画面幅に応じて最適なファイルを出し分けるといった高度な実装が可能になります。事業用ページにおいて、レスポンシブデザインの最適化やCore Web Vitals（表示速度の指標）の改善に取り組む際に役立ちます。

<source>

次世代画像フォーマットの活用と下位互換性の維持

より専門的な視点では、sourceタグは現代のホームページ制作における画像最適化の要と言えます。WebPやAVIFといった高圧縮な次世代画像フォーマットを導入する際、sourceタグをpictureタグ内で使用することで、最新のブラウザには軽量な画像を配信しつつ、未対応の古いブラウザには従来のJPEGやPNGを表示させるといった柔軟な出し分けが可能になります。

type属性によってフォーマットを指定し、srcset属性で複数の解像度を提示することで、ブラウザが自身の性能に合わせて最適なファイルを選択できるようになります。こうした細やかな配慮が、通信量の削減とユーザーのストレス軽減を両立させます。

レスポンシブデザインにおけるアートディレクションの実装

単に画像を拡大縮小するだけでなく、画面幅に応じて「最適な構図の画像」を切り替えるアートディレクションの実現にもこのタグは重用されます。例えば、PCの大画面では横長の風景写真を、スマートフォンの縦長画面では主要な被写体にクローズアップした正方形の画像を表示させたい場合、media属性を用いて条件を指定することで、各デバイスの閲覧環境に最適化されたビジュアル体験を提供できます。

このようにデバイスごとに最適なクリエイティブを出し分けることは、情報の伝達効率を高めるだけでなく、ホームページ（ウェブサイト）の専門性や洗練されたブランドイメージを構築する上でも非常に重要です。

パフォーマンス最適化とLCP（最大コンテンツの描画）への貢献

ホームページの表示速度は、ユーザー体験（UX）だけでなくSEOの評価にも直結します。特にメインビジュアルなど、ページの最大コンテンツの描画速度を示す指標であるLCP（Largest Contentful Paint）となる要素において、sourceタグを適切に使い、デバイスごとの最適サイズを配信することは、表示待ち時間の短縮に大きく寄与します。

最適なソースの選択は、ブラウザの描画負荷を軽減し、ページ全体の安定性を高めることにつながります。こうした技術的な最適化の積み重ねが、最終的には事業の信頼性を高め、検索エンジンからの安定した評価を獲得するための盤石な土台となります。

ホームページ制作・SEOの1ポイント

ホームページはテキストや画像がメインのコンテンツとなりますが、動画や音声ファイルを組み込んで多彩な表現をすることも可能です。ただ、動画や音声は、ページを開いた時に意図せず自動再生されると、ユーザーが困惑する事がありますので注意が必要です。こうした面はユーザーの任意に任せておいた方が無難だと考えられます。

bgsound（html5で廃止）

<bgsound></bgsound>

ホームページ制作（ウェブサイト制作）の際に使用する<bgsound>タグについてのご説明です。

ホームページ制作において<bgsound>（バックグラウンドサウンド）タグを使用することによって、ホームページ（ウェブサイト）で効果音（音声）を再生することができます。

なお、<bgsound>タグはhtml5で廃止されたため、html5で制作されたホームページ（ウェブサイト）での音声再生には<audio>タグを使用します。

<bgsound> ホームページで効果音BGMを再生（IE）

ホームページ（ウェブサイト）内に<bgsound>タグを設置することで、ページを開いた時に効果音等のサウンドデータを再生させることができます。
back ground sound。バックグラウンドサウンド。

再生可能なファイル形式

.mid .wav .aif .auなど。

loop

loop=”infinite”

無制限繰り返し

廃止。

<bgsound>代替タグ

<bgsound>タグはhtml5で廃止されたため、ホームページ（ウェブサイト）での音声再生には以下の代替タグを使用します。

<audio>

<bgsound></bgsound>

ホームページ制作・SEOの1ポイント

ホームページを開いた時にいきなり音声が流れると、ページの印象は強くなりますが、閲覧環境によってはユーザーとしては迷惑に思う場合があると考えられます。こうしたことからいきなり音声が自動再生されるホームページはかなり少なくなりました。

音声再生については外部ファイルを呼び出す形になり、再生もユーザーの任意という流れになっています。SEOを考える上で、ページの品質向上にはテキストや画像以外のコンテンツもプラスに働くと考えることができます。

ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ

ホームページ（ウェブサイト）のHTML編集方法

ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。

ホームページのHTML編集方法