LabEx
ログイン登録

HTML でビデオを埋め込みとカスタマイズする

HTMLBeginner
オンラインで実践に進む

はじめに

この実験では、参加者は強力な <video> タグを使用して HTML 内にビデオ要素を埋め込み、カスタマイズする方法を学びます。この実験では、コントロールの追加、ビデオ ソースの構成、カスタム サムネイルの実装、および再生体験を向上させるためのさまざまなビデオ タグ属性の探索など、インタラクティブなビデオ プレーヤーを作成するための基本的な技術が扱われます。

段階的なアプローチを通じて、学習者は基本的なビデオ要素の作成から高度な構成まで、HTML5 ビデオの埋め込みに関する実践的なスキルを習得します。参加者は、複数のビデオ ソースを追加する方法、再生設定を制御する方法、カスタム サムネイルを設定する方法、および Web ページ内で直接、より魅力的でユーザーにやさしいビデオ エクスペリエンスを作成する方法を学ぶでしょう。

コントロール付きの基本的なビデオ要素を作成する

このステップでは、必須のコントロール付きで HTML 内に基本的なビデオ要素を作成する方法を学びます。HTML5 は、ビデオを直接 Web ページに埋め込むことができるシンプルで強力な <video> タグを提供しています。

まず、ビデオの埋め込みを示す HTML ファイルを作成しましょう。WebIDE を開き、~/project ディレクトリに新しいファイル video-demo.html を作成します。

touch ~/project/video-demo.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic Video Element</title>
  </head>
  <body>
    <h1>My First Video Element</h1>

    <video controls width="640" height="360">
      Your browser does not support the video tag.
    </video>
  </body>
</html>

ビデオ要素の主要なコンポーネントを解説しましょう。

  1. <video> タグ：ビデオ コンテンツを埋め込むためのメイン コンテナ
  2. controls 属性：デフォルトのビデオ プレーヤー コントロール（再生、一時停止、音量）を追加します
  3. width および height 属性：ビデオ プレーヤーのサイズを設定します
  4. タグ内のテキスト：HTML5 ビデオをサポートしていないブラウザ用の代替メッセージ

controls 属性は重要です。再生、一時停止、音量調整、フルスクリーン モードなどの標準的な再生コントロールをユーザーに提供するからです。

注：WebIDE で HTML ファイルをプレビューする方法について詳しく学ぶ。

HTML video element with controls

ビデオ ソースを追加して再生をミュートする

このステップでは、HTML ビデオ要素にビデオ ソースを追加し、その初期の再生状態を制御する方法を学びます。前の video-demo.html ファイルを変更して、ビデオ ソースを含め、デフォルトでビデオをミュートする方法を示します。

WebIDE で ~/project/video-demo.html ファイルを開き、その内容を更新します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Video Source and Mute</title>
  </head>
  <body>
    <h1>Video with Multiple Sources</h1>

    <video controls width="640" height="360" muted>
      <source
        src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
        type="video/mp4"
      />
      <source
        src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

新しく追加された部分を解説しましょう。

  1. <source> タグ：クロス ブラウザ互換性のために複数のビデオ形式を指定できます

    • 最初のソースは MP4 ファイル
    • 2 番目のソースは WebM ファイル（代替形式）
    • ブラウザは最初にサポートされる形式を使用します

  2. muted 属性：ビデオが読み込まれると自動的にミュートになります

    • 予期しないオーディオ再生を防ぐのに役立ちます
    • デフォルトで音を再生したい場合は削除できます

  3. type 属性：ビデオ ソースの MIME タイプを指定します

    • ブラウザがビデオを再生できるかどうかを判断するのに役立ちます

サンプル ビデオの URL は、複数のソース形式を示す公共のサンプル ビデオです。実際のシナリオでは、これらを独自のビデオ ファイル パスに置き換えます。

HTML video element with multiple sources

カスタム サムネイル用のビデオ ポスターを実装する

このステップでは、再生開始前にビデオ要素にカスタム サムネイル画像を追加するために poster 属性を使用する方法を学びます。まず、ポスターとして使用するサンプル画像をダウンロードしましょう。

以下のコマンドを使用してサンプル画像をダウンロードします。

wget https://placehold.co/640x360.png?text=Video+Thumbnail -O ~/project/video-thumbnail.png

次に、~/project/video-demo.html ファイルを poster 属性で更新します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Video with Custom Poster</title>
  </head>
  <body>
    <h1>Video with Custom Thumbnail</h1>

    <video controls width="640" height="360" muted poster="video-thumbnail.png">
      <source
        src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
        type="video/mp4"
      />
      <source
        src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

poster 属性に関するポイント：

  1. ビデオ再生開始前にカスタム画像を表示します
  2. プレビューとして最初のビデオ フレームを置き換えます
  3. より魅力的なユーザー インターフェイスを作成するのに役立ちます
  4. ローカルまたはリモートの画像ファイルと機能します

ポスター画像はビデオ コンテンツのプレビューを提供し、再生開始前にコンテキストを与えることでユーザー エクスペリエンスを向上させることができます。

Video poster thumbnail example

ビデオ タグの属性と設定を調べる

このステップでは、HTML5 ビデオ要素に利用可能なさまざまな属性と設定について、さらに深く掘り下げます。これらの高度な設定を調べるために、~/project/video-demo.html ファイルを更新します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Advanced Video Configurations</title>
  </head>
  <body>
    <h1>Exploring Video Tag Attributes</h1>

    <video
      controls
      width="640"
      height="360"
      muted
      poster="video-thumbnail.png"
      preload="metadata"
      loop
      playsinline
    >
      <source
        src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
        type="video/mp4"
      />
      <source
        src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

新しい属性を調べましょう。

  1. preload="metadata":

    • 再生開始前のビデオの読み込み方法を制御します
    • オプション：auto（ビデオ全体を読み込む）、metadata（メタデータのみを読み込む）、none（事前読み込みしない）

  2. loop:

    • ビデオが終了したときに自動的にリプレイするようにします
    • バックグラウンドや繰り返し再生のコンテンツに便利です

  3. playsinline:

    • モバイル デバイスでインラインでビデオを再生できるようにします
    • iOS デバイスでの自動フルスクリーン モードを防止します

試してみることができる他の便利な属性：

  • autoplay：ビデオ再生を自動的に開始します
  • crossorigin：クロスオリジンのビデオ ソースを処理します
  • disablepictureinpicture：ピクチャーインピクチャー モードを防止します

プロのヒント：

  • すべてのブラウザがすべての属性をサポートしているわけではありません
  • 常にさまざまなデバイスとブラウザでテストしてください
  • autoplay や loop を使用する際は、ユーザー エクスペリエンスを考慮してください

ビデオ再生体験を向上させる

このステップでは、カスタム コントロールとスタイリングを追加することでビデオ再生体験を向上させる方法を学びます。次の内容の新しいファイル ~/project/video-enhanced.html を作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Enhanced Video Player</title>
    <style>
      .video-container {
        max-width: 640px;
        margin: 0 auto;
        position: relative;
      }
      .custom-controls {
        display: flex;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 10px;
      }
      .custom-controls button {
        background: none;
        border: none;
        color: white;
        margin-right: 10px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="video-container">
      <video id="myVideo" width="640" height="360" poster="video-thumbnail.png">
        <source
          src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
          type="video/mp4"
        />
        Your browser does not support the video tag.
      </video>

      <div class="custom-controls">
        <button onclick="togglePlay()">Play/Pause</button>
        <button onclick="muteToggle()">Mute/Unmute</button>
        <input
          type="range"
          min="0"
          max="100"
          value="50"
          onchange="changeVolume(this.value)"
        />
      </div>
    </div>

    <script>
      const video = document.getElementById("myVideo");

      function togglePlay() {
        if (video.paused) {
          video.play();
        } else {
          video.pause();
        }
      }

      function muteToggle() {
        video.muted = !video.muted;
      }

      function changeVolume(value) {
        video.volume = value / 100;
      }
    </script>
  </body>
</html>

CSS と JavaScript に慣れていない場合は心配しないでください。この例は、カスタム ビデオ コントロールを作成し、ビデオ プレーヤー インターフェイスをスタイリングする簡単な方法を提供しています。

この例での主な向上点：

  1. カスタム ビデオ コントロール：

    • 再生/一時停止とミュート ボタン付きのカスタム コントロール パネルを作成します
    • 正確な音量制御のために音量スライダーを追加します

  2. CSS スタイリング：

    • ビデオ コンテナとコントロールをスタイリングします
    • レイアウトにフレックスボックスを使用します
    • コントロールに半透明な背景を追加します

  3. JavaScript インタラクション：

    • togglePlay()：ビデオの再生/一時停止を手動で制御します
    • muteToggle()：ビデオのミュート状態を切り替えます
    • changeVolume()：プログラムでビデオの音量を調整します

このアプローチは、デフォルトのブラウザ コントロールと比較して、ビデオ プレーヤー インターフェイスの設計により多くの柔軟性を提供します。

Custom video player interface example

まとめ

この実験では、参加者は <video> タグを使用して HTML 内にビデオ要素を埋め込み、カスタマイズする方法を学びました。この実験では、基本的な制御を追加すること、複数のビデオ ソースを指定すること、および再生設定を構成することを含む、インタラクティブなビデオ プレーヤーを作成するための重要な技術を扱いました。開発された主要なスキルには、ビデオの寸法を設定すること、フォールバック コンテンツを実装すること、既定のプレーヤー制御を追加すること、およびビデオのミュートとソース選択を管理することが含まれます。

参加者は、再生/一時停止制御、幅と高さの設定、およびさまざまなビデオ形式のサポートなどの標準機能を備えたデモ ビデオ要素を作成することにより、実用的な HTML5 ビデオ埋め込み技術を探求しました。この実験は、ビデオ タグの属性を理解し、さまざまな構成オプションを通じて埋め込まれたビデオ コンテンツとのユーザー インタラクションを強化するための実践的な経験を提供しました。

関連 HTML コース
初心者向け HTML

初心者向け HTML

htmlweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development