HTMLでオーディオとビデオを埋め込む方法：簡単メディアプレーヤー作成ガイド

2024年10月1日2024年10月3日

ウェブページにオーディオやビデオを埋め込むことで、コンテンツをより豊かでインタラクティブなものにできます。HTML5では、専用のタグを使用して簡単にオーディオやビデオをページに追加できるようになり、外部のプラグインやスクリプトに依存する必要がなくなりました。

この記事では、オーディオとビデオを埋め込むための基本的な方法と、カスタムメディアプレーヤーを作成する手順を解説します。

オーディオの埋め込み方法

HTMLでオーディオを埋め込むには、<audio>タグを使用します。このタグを使うことで、音楽や音声ファイルを簡単にページに追加できます。

基本構文

HTML

<audio controls>
  <source src="audio-file.mp3" type="audio/mpeg">
  <source src="audio-file.ogg" type="audio/ogg">
  お使いのブラウザはオーディオ要素に対応していません。
</audio>

<audio>タグの中に<source>タグを使用し、再生する音声ファイルのパスを指定します。
controls属性を追加すると、再生・一時停止ボタン、音量調整などのコントロールが表示されます。
ブラウザが対応していない場合に表示されるテキストを記述することもできます。

音声ファイルのフォーマット

主要な音声フォーマットには以下のものがあります：

MP3（audio/mpeg）:
　最も広くサポートされているフォーマット
OGG（audio/ogg）:
　オープンソースで高音質なフォーマット
WAV（audio/wav）:
　高音質ですがファイルサイズが大きい

ビデオの埋め込み方法

ビデオを埋め込むには、<video>タグを使用します。動画ファイルをページに直接埋め込むことができ、再生コントロールも容易に設定可能です。

基本構文

HTML

<video controls width="600">
  <source src="video-file.mp4" type="video/mp4">
  <source src="video-file.ogg" type="video/ogg">
  お使いのブラウザはビデオ要素に対応していません。
</video>

controls属性を使用して、再生・停止・音量調整などのコントロールを追加します。
width属性でビデオの表示幅を指定します（必要に応じてheight属性も指定可能）。
<source>タグを使って、複数のフォーマットをサポートすることが推奨されます。

動画ファイルのフォーマット

主要な動画フォーマットには以下のものがあります：

MP4（video/mp4）:
　最も広くサポートされているフォーマット
WebM（video/webm）:
　オープンフォーマットで、Webに最適化されています。
OGG（video/ogg）:
　オープンソースで高品質の動画フォーマット

自動再生とループ再生

メディアファイルを自動再生したり、ループ再生を設定することも可能です。ただし、自動再生はユーザー体験を損なう可能性があるため、慎重に使用する必要があります。

自動再生

オーディオやビデオの自動再生を設定するには、autoplay属性を追加します。

HTML

<audio autoplay>
  <source src="audio-file.mp3" type="audio/mpeg">
</audio>

HTML

<video autoplay>
  <source src="video-file.mp4" type="video/mp4">
</video>

ループ再生

メディアファイルを繰り返し再生したい場合は、loop属性を追加します。

HTML

<audio loop>
  <source src="audio-file.mp3" type="audio/mpeg">
</audio>

HTML

<video loop>
  <source src="video-file.mp4" type="video/mp4">
</video>

メディアのカスタマイズ

オーディオやビデオの表示スタイルや再生コントロールは、CSSを使ってカスタマイズすることも可能です。また、JavaScriptを使って再生の制御を行うことで、よりインタラクティブなメディアプレーヤーを作成できます。

CSSでのカスタマイズ

たとえば、ビデオプレーヤーの幅や境界線をカスタマイズすることができます。

CSS

video {
  width: 100%;
  border: 2px solid #ccc;
  border-radius: 10px;
}

JavaScriptでのコントロール

JavaScriptを使うことで、メディアの再生や停止、音量の調整などをプログラム的に制御できます。

HTML

<button onclick="document.getElementById('myVideo').play()">再生</button>
<button onclick="document.getElementById('myVideo').pause()">一時停止</button>
<video id="myVideo" width="600">
  <source src="video-file.mp4" type="video/mp4">
</video>

まとめ

HTML5では、オーディオやビデオを簡単にウェブページに埋め込むことができます。<audio>や<video>タグを使ってメディアファイルを表示し、必要に応じて自動再生やループ再生の設定も行えます。また、CSSやJavaScriptを使用することで、メディアプレーヤーの外観や動作を自由にカスタマイズすることが可能です。

メディアをページに追加することで、ユーザーにより魅力的な体験を提供できるので、ぜひ活用してみてください。

これで、HTMLでオーディオやビデオを埋め込む基本的な手法を理解できたと思います。

最後まで読んでいただきありがとうございます！

このブログは初心者向けwebデザイナー向けにHTML、CSSの基礎知識を発信しています。
この記事を読んだ方に少しでもお役に立てれば幸いです。