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

📋 対応バージョン

HTML HTML5

JavaScript ES5

CSS CSS3

IE 9+ ⓘ

Edge 12+

Chrome 4+

Firefox 20+ ⓘ

Safari 3.1+

Opera 10.5+

Opera Mini 非対応 ⓘ

完全対応一部機能制限 ⓘ

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

はじめに

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

●HTMLビデオの基本

○ビデオタグの概要

HTML5から導入されたビデオタグ（<video>）は、Webページに動画を埋め込むためのタグです。これを使うことで、以前のようにFlash Playerなどの外部プラグインを必要とせず、ブラウザだけで動画を再生できるようになりました。現在では多くのWebサイトで標準的に使用されている技術といえるでしょう。

○ソースタグの使い方

ビデオタグの中には<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/VP9）、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プロパティに設定しています。これにより、動画の再生速度が変更されるでしょう。