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

はじめに

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

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

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 92%です。学習者から 100% の好評価を得ています。

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

このステップでは、必須のコントロール付きで 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>

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

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

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

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

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

このステップでは、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>

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

<source> タグ：クロスブラウザ互換性のために複数のビデオ形式を指定できます
- 最初のソースは MP4 ファイル
- 2 番目のソースは WebM ファイル（代替形式）
- ブラウザは最初にサポートされる形式を使用します
muted 属性：ビデオが読み込まれると自動的にミュートになります
- 予期しないオーディオ再生を防ぐのに役立ちます
- デフォルトで音を再生したい場合は削除できます
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 属性に関するポイント：

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

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

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

このステップでは、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>

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

preload="metadata":
- 再生開始前のビデオの読み込み方法を制御します
- オプション：auto（ビデオ全体を読み込む）、metadata（メタデータのみを読み込む）、none（事前読み込みしない）
loop:
- ビデオが終了したときに自動的にリプレイするようにします
- バックグラウンドや繰り返し再生のコンテンツに便利です
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 に慣れていない場合は心配しないでください。この例は、カスタムビデオコントロールを作成し、ビデオプレーヤーインターフェイスをスタイリングする簡単な方法を提供しています。

この例での主な向上点：

カスタムビデオコントロール：
- 再生/一時停止とミュートボタン付きのカスタムコントロールパネルを作成します
- 正確な音量制御のために音量スライダーを追加します
CSS スタイリング：
- ビデオコンテナとコントロールをスタイリングします
- レイアウトにフレックスボックスを使用します
- コントロールに半透明な背景を追加します
JavaScript インタラクション：
- togglePlay()：ビデオの再生/一時停止を手動で制御します
- muteToggle()：ビデオのミュート状態を切り替えます
- changeVolume()：プログラムでビデオの音量を調整します

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

まとめ

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

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

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

はじめに

見て終わりにしない。手を動かそう。

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

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

読みながらすぐに練習！

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

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

ハンズオンで理解を深めよう。

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

まとめ

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

はじめに

見て終わりにしない。手を動かそう。

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

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

読みながらすぐに練習！

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

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

ハンズオンで理解を深めよう。

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

まとめ

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

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

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