HTMLビデオ完全解説！初心者でも簡単に理解できる10のステップ

はじめに
●HTMLビデオの基本
- ○ビデオタグの概要
- ○ソースタグの使い方
●ビデオの使い方
- ○基本的な使い方
- ○カスタマイズの方法
●注意点と対処法
- ○動画ファイル形式
- ○ブラウザ対応の問題
●サンプルコードと応用例
まとめ

はじめに

この記事を読めば、HTMLビデオの作成やカスタマイズが簡単にできるようになります。

●HTMLビデオの基本

○ビデオタグの概要

HTML5から導入されたビデオタグ（<video>）は、Webページに動画を埋め込むためのタグです。

これを使うことで、以前のようにFlash Playerなどの外部プラグインを必要とせず、ブラウザだけで動画を再生できるようになります。

○ソースタグの使い方

ビデオタグの中には<source>タグを使って、動画ファイルのURLを指定します。

<source>タグには「src」属性で動画ファイルのURLを、また「type」属性で動画ファイルの形式（MIMEタイプ）を指定します。

<video>
  <source src="sample.mp4" type="video/mp4">
</video>

●ビデオの使い方

○基本的な使い方

ビデオタグには、幅（width）と高さ（height）を指定して、動画のサイズを設定できます。

また、「controls」属性を指定すると、動画、一時停止、再生速度などを操作できるコントロールバーが表示されます。

<video width="320" height="240" controls>
  <source src="sample.mp4" type="video/mp4">
</video>

○カスタマイズの方法

ビデオタグは、さまざまな属性を使ってカスタマイズが可能です。

例えば、「autoplay」属性を指定すると、ページが読み込まれたときに動画が自動再生されます。

「loop」属性を指定すると、動画が終わったら自動的に再生が繰り返されます。

「muted」属性を指定すると、動画の音声がミュートされます。

<video width="320" height="240" controls autoplay loop muted>
  <source src="sample.mp4" type="video/mp4">
</video>

●注意点と対処法

○動画ファイル形式

HTMLビデオで再生できる動画ファイル形式は、ブラウザによって異なります。

主な動画ファイル形式には、MP4（H.264）、WebM（VP8）、Ogg（Theora）などがあります。

異なる形式の動画ファイルを<source>タグで複数指定することで、ブラウザが対応している形式の動画を自動的に選択して再生します。

<video width="320" height="240" controls>
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.webm" type="video/webm">
  <source src="sample.ogv" type="video/ogg">
</video>

○ブラウザ対応の問題

HTMLビデオは、ほとんどの現代的なブラウザで対応していますが、古いブラウザでは動画が再生できない場合があります。

そのような場合のために、<video>タグの中に下記のようなテキストを追加しておくと、対応していないブラウザでメッセージが表示されます。

<video width="320" height="240" controls>
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.webm" type="video/webm">
  <source src="sample.ogv" type="video/ogg">
  お使いのブラウザでは動画が再生できません。
</video>

●サンプルコードと応用例

○基本的なサンプルコード

上記で説明した基本的なビデオタグの使い方をまとめたサンプルコードは下記の通りです。

<video width="320" height="240" controls>
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.webm" type="video/webm">
  <source src="sample.ogv" type="video/ogg">
  お使いのブラウザでは動画が再生できません。
</video>

○応用例1：動画のコントロールバーをカスタマイズ

ビデオタグのコントロールバーは、JavaScriptとCSSを使ってカスタマイズできます。

下記のサンプルコードでは、独自の再生・一時停止ボタンと音量調整スライダーを作成しています。

<!DOCTYPE html>
<html>
<head>
<style>
  /* スタイルをここに追加 */
</style>
</head>
<body>

<video id="myVideo" width="320" height="240">
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.webm" type="video/webm">
  <source src="sample.ogv" type="video/ogg">
  お使いのブラウザでは動画が再生できません。
</video>
<br>
<button id="playPauseButton" onclick="playPause()">再生/一時停止</button>
<input id="volumeSlider" type="range" min="0" max="1" step="0.1" value="1" onchange="changeVolume()">

<script>
  var video = document.getElementById("myVideo");
  function playPause() {
    if (video.paused) {
      video.play();
    } else {
      video.pause();
    }
  }
  function changeVolume() {
    video.volume = document.getElementById("volumeSlider").value;
  }
</script>

</body>
</html>

○応用例2：ビデオの再生速度を変更

ビデオタグの再生速度は、JavaScriptを使って変更できます。

下記のサンプルコードでは、再生速度を選択できるドロップダウンメニューを作成しています。

<!DOCTYPE html>
<html>
<head>
<style>
  /* スタイルをここに追加 */
</style>
</head>
<body>

<video id="myVideo" width="320" height="240" controls>
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.webm" type="video/webm">
  <source src="sample.ogv" type="video/ogg">
  お使いのブラウザでは動画が再生できません。
</video>
<br>
<select id="speedSelect" onchange="changeSpeed()">
  <option value="0.5">0.5倍速</option>
  <option value="1" selected>1倍速</option>
  <option value="1.5">1.5倍速</option>
  <option value="2">2倍速</option>
</select>

<script>
  var video = document.getElementById("myVideo");
  function changeSpeed() {
    video.playbackRate = document.getElementById("speedSelect").value;
  }
</script>

</body>
</html>

このサンプルコードでは、ドロップダウンメニューで選択された再生速度を、JavaScriptでビデオタグのplaybackRateプロパティに設定しています。

これにより、動画の再生速度が変更されます。