DiviでビデオのカスタムHTML5ビデオコントロールを作成する方法

公開: 2021-03-10

HTML5ビデオは、任意のWebサイトにビデオを表示するための便利で効果的な方法です。実際、DiviはHTML5ビデオ形式を使用して、ビデオモジュールを使用してDiviでビデオを表示します。ただし、デフォルトでは、これらのビデオには、ブラウザに依存する標準デザインの組み込みコントロール（再生、ミュート、音量など）が含まれています。ただし、これらのコントロールのデザインを強化したい場合は、実際にHTLM5ビデオ用に独自の外部コントロールを作成してスタイルを設定できます。

このチュートリアルでは、DiviでビデオのカスタムHTML5ビデオコントロールを作成する方法を紹介します。これを行うには、DiviBuilderを使用してビデオボタンとカスタムコントロールボタンを作成してスタイルを設定します。次に、カスタムJavascriptを追加して、すべてが機能するようにします。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

このチュートリアルで紹介されているのと同じ機能のいくつかを示すこのcodepenをチェックすることもできます。

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

divi通知ボックス

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

コーナータブの拡張

開始するには、次のことを行う必要があります。

まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

このチュートリアルの目標の概要

HTML5ビデオの基本的な構文は次のようになります…

<video controls="">
  <source type="video/mp4" src="video.mp4">
  <source type="video/webm" src="video.webm">
</video>

ビデオ要素のcontrols属性に注意してください。これは、HTML5ビデオで通常見られる標準のコントロールを表示するために使用されるものです。

Diviのビデオモジュールは、同じHTML5ビデオ要素構造を使用して、モジュール内でアップロードしたセルフホストビデオを表示します。したがって、ビデオモジュールを使用するときは、HTML5ビデオを使用しています。

このチュートリアルの目標は、最初にDiviビデオのデフォルトのコントロールを非表示にし、DiviBuilderといくつかのカスタムコードを使用して独自の外部カスタムコントロールを作成することです。

パート1：DiviでのHTML5ビデオの作成

チュートリアルのこの最初の部分では、Diviビデオモジュールを使用してHTML5ビデオを作成します。ただし、最初に、セクションの背景を更新する必要があります。

セクションの背景

次のように、デフォルトで使用可能なデフォルトセクションのセクション設定を更新することから始めます。

背景グラデーションの左の色：rgba（0,0,0,0.8）
背景のグラデーションの正しい色：＃000000
背景画像の上にグラデーションを配置：はい
背景画像：[選択した画像をアップロード]

diviカスタムhtml5ビデオコントロール

ビデオ行

次に、ビデオを含む行を追加する必要があります。セクションに新しい1列の行を追加します。

diviカスタムhtml5ビデオコントロール

次に、次のように行設定を更新します。

幅：100％
最大幅：なし
パディング：0px下

diviカスタムhtml5ビデオコントロール

ビデオの作成

前述のように、DiviはすでにDiviビデオモジュール内でHTML5ビデオ要素を使用しています。したがって、ビデオを作成するには、行/列に新しいビデオモジュールを追加するだけです。

diviカスタムhtml5ビデオコントロール

ビデオファイルをビデオモジュールにアップロードする

最高のパフォーマンスを得るには、ビデオのMP4とWEBMの両方のビデオファイルをメディアギャラリーにアップロードします。

diviカスタムhtml5ビデオコントロール

次に、MP4およびWEBMビデオファイルを[コンテンツ]タブのビデオモジュールに追加します。

diviカスタムhtml5ビデオコントロール

ビデオ設定を更新する

[デザイン]タブで、以下を更新します。

最大幅：1080px
モジュールの配置：中央

diviカスタムhtml5ビデオコントロール

[詳細設定]タブで、次のCSSIDを追加します。

CSS ID：divi-video-container

diviカスタムhtml5ビデオコントロール

パート2：プログレスバーの作成

HTMLビデオには、プログレスバーを表示する機能が組み込まれています。少しのカスタムコードを使用して、ビデオに独自のプログレスバーを追加できます。

プログレスバーの行

ビデオのカスタムプログレスバーを表示するには、まず、ビデオを含む行の下に新しい1列の行を作成します。

diviカスタムhtml5ビデオコントロール

行設定を開き、次のようにパディングを更新します。

パディング：上10px、下0px

diviカスタムhtml5ビデオコントロール

プログレスバーHTMLの追加

HTMLのカスタムスニペットを追加してプログレスバーを表示するには、新しいコードモジュールを行に追加する必要があります。

diviカスタムhtml5ビデオコントロール

コードボックス内に、次のHTMLを貼り付けます。

<progress id="progress" value="0" min="0">
  <span id="progress-bar"></span>
</progress>

diviカスタムhtml5ビデオコントロール

後でカスタムJavascriptを使用して、必要な機能をプログレスバーに追加します。

パート3：Diviでのビデオコントロールボタンの作成

これで、一連のDiviボタンモジュールを使用して、いくつかのカスタムビデオコントロールボタンの追加を開始する準備が整いました。

行と列の作成

まず、ボタンバー/コンテナとして機能する行と列を設定する必要があります。

行

プログレスバーコードを含む行の下に、新しい1列の行を追加します。

diviカスタムhtml5ビデオコントロール

行設定を開き、以下を更新します。

側溝幅：1
パディング：上10px、下20px

diviカスタムhtml5ビデオコントロール

列にフレックスを追加する

ボタンの水平方向の配置を取得する簡単な方法は、ボタンを含む列でdisplay：flexを使用することです。これを行うには、列の設定を開き、次のカスタムCSSをメイン要素に追加します。

display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;

diviカスタムhtml5ビデオコントロール

列の準備ができたので、ボタンを追加する準備ができました。

再生/一時停止ボタン

この最初のボタンを「再生/一時停止」ボタンにして、ビデオの再生と一時停止機能を切り替えます。ボタンを作成するには、ボタンモジュールを列に追加します。

diviカスタムhtml5ビデオコントロール

ボタンの設定を開き、ボタンのテキストを更新します。

ボタンテキスト：再生/一時停止

diviカスタムhtml5ビデオコントロール

[デザイン]タブで、ボタンのスタイルを次のように設定します。

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：18px（デスクトップ）、14px（タブレットと電話）
ボタンのテキストの色：#ffffff
ボタンの背景色：rgba（255,255,255,0.15）
ボタンの境界線の幅：0px
ボタンアイコンを表示：いいえ

diviカスタムhtml5ビデオコントロール

ボタンのマージンを次のように更新します。

マージン：上10px、左10px、右10px

diviカスタムhtml5ビデオコントロール

[詳細設定]タブで、次のCSSIDを追加します。

CSS ID：divi-play-pause

diviカスタムhtml5ビデオコントロール

停止ボタン

次は停止ボタンです。このボタンはビデオを停止し、開始点に戻します。

ボタンを作成するには、「再生/一時停止」ボタンモジュールを複製します。

diviカスタムhtml5ビデオコントロール

次に、ボタンのテキストを更新します。

ボタンテキスト：停止

diviカスタムhtml5ビデオコントロール

そして、ボタンにカスタムCSSIDを付けます。

CSS ID：divi-stop

diviカスタムhtml5ビデオコントロール

ミュートボタン

ビデオの音量をミュートするミュートボタンを作成するには、作成した「停止」ボタンを複製します。

diviカスタムhtml5ビデオコントロール

ボタンのテキストを更新します。

ボタンテキスト：ミュート

diviカスタムhtml5ビデオコントロール

次に、カスタムCSSIDを指定します。

CSS ID：divi-mute

diviカスタムhtml5ビデオコントロール

音量大ボタン

次のボタンをクリックすると、クリックするたびにビデオの音量が徐々に大きくなります。これを音量大ボタンと呼びます。

ボタンを作成するには、「ミュート」ボタンモジュールを複製します。

diviカスタムhtml5ビデオコントロール

次に、ボタンのテキストを更新します。

ボタンテキスト：Vol

diviカスタムhtml5ビデオコントロール

[デザイン]タブで、以下を更新して、ボタンのテキストの横に上向き矢印を追加します。

ボタンアイコンを表示：はい
ボタンアイコン：上矢印（スクリーンショットを参照）
ボタンアイコンの色：＃00a9d8
ボタンのホバー時にアイコンのみを表示：いいえ

diviカスタムhtml5ビデオコントロール

次に、ボタンのパディングを次のように更新します。

パディング：左0.5em、右1.5em

diviカスタムhtml5ビデオコントロール

次に、CSSIDを更新します。

CSS ID：divi-volinc

diviカスタムhtml5ビデオコントロール

音量小ボタン

「音量を上げる」ボタンと「音量を下げる」ボタンを使用して、クリックするたびにビデオの音量を段階的に下げることはできません。

「音量を下げる」ボタンを作成するには、作成した「音量を上げる」ボタンを複製します。

diviカスタムhtml5ビデオコントロール

次に、ボタンアイコンを「下矢印」アイコンに更新します。

diviカスタムhtml5ビデオコントロール

次に、CSSIDを更新します。

CSS ID：divi-voldec

diviカスタムhtml5ビデオコントロール

ラージビューボタン

最後のボタンとして、クリック時にビデオコンテナの幅を広げる「ラージビュー」ボタンを作成します。

ボタンを作成するには、「ミュート」ボタンを複製します。次に、「音量を下げる」ボタンの下にある複製ボタンをドラッグして、ボタンバーの右端に配置します。

diviカスタムhtml5ビデオコントロール

複製ボタンの設定を開き、ボタンのテキストを更新します。

ボタンテキスト：拡大表示

diviカスタムhtml5ビデオコントロール

次に、ボタンにカスタムCSSIDを指定します。

CSS ID：divi-large-view

diviカスタムhtml5ビデオコントロール

パート4：カスタムCSSおよびJSコードの追加

すべてのDivi要素が作成されたので、すべてを機能させるために必要なカスタムコードを取り込む準備ができました。

先に進み、セクションの2行目のプログレスバーHTMLを含むコードモジュールの下に別のコードモジュールを追加します。

diviカスタムhtml5ビデオコントロール

CSS

コードボックスに次のCSSを貼り付け、必要なスタイルタグ内にCSSをラップしていることを確認します。

.control-button-active,
#divi-volinc:active,
#divi-voldec:active,
#divi-play-pause:active,
#divi-stop:active {
  background: #666666 !important;
}

#progress {
  display: block;
  width: 100%;
}

#divi-video-container.expand-video {
  max-width: 1400px;
}

diviカスタムhtml5ビデオコントロール

JavaScript / JQuery

CSS（終了スタイルタグ）の下に、次のJSコードを貼り付けて、必要なスクリプトタグ内にコードをラップしていることを確認します。

jQuery(document).ready(function ($) {
  $diviVideoContainer = $("#divi-video-container");
  $diviVideo = $("#divi-video-container video");
  videoElement = $("#divi-video-container video")[0];
  $play = $("#divi-play");
  $playPause = $("#divi-play-pause");
  $stop = $("#divi-stop");
  $mute = $("#divi-mute");
  $volinc = $("#divi-volinc");
  $voldec = $("#divi-voldec");
  $progress = $("#progress");
  progressElement = $("#progress")[0];
  $progressBar = $("#progress-bar");
  $largeView = $("#divi-large-view");

  videoElement.controls = false;

  $diviVideo.on("loadedmetadata", function () {
    $progress.attr("max", videoElement.duration);
  });

  $diviVideo.on("timeupdate", function (e) {
    progressElement.value = videoElement.currentTime;
    $progressBar.css(
      "width",
      Math.floor((videoElement.currentTime / videoElement.duration) * 100) + "%"
    );
  });

  $diviVideo.on("timeupdate", function () {
    if (!$progress.attr("max")) {
      $progress.attr("max", videoElement.duration);
      progressElement.value = videoElement.currentTime;
      $progressBar.css(
        "width",
        Math.floor((videoElement.currentTime / videoElement.duration) * 100) +
          "%"
      );
    }
  });

  $playPause.on("click", function (e) {
    e.preventDefault();
    if (videoElement.paused || videoElement.ended) {
      videoElement.play();
    } else {
      videoElement.pause();
    }
  });

  $stop.on("click", function (e) {
    e.preventDefault();
    videoElement.pause();
    videoElement.currentTime = 0;
    progressElement.value = 0;
  });

  $mute.on("click", function (e) {
    e.preventDefault();
    videoElement.muted = !videoElement.muted;
    $(e.target).toggleClass("control-button-active");
  });

  $volinc.on("click", function (e) {
    e.preventDefault();
    alterVolume("+");
  });

  $voldec.on("click", function (e) {
    e.preventDefault();
    alterVolume("-");
  });

  alterVolume = function (dir) {
    currentVolume = Math.floor(videoElement.volume * 10) / 10;
    if (dir === "+") {
      if (currentVolume < 1) videoElement.volume += 0.1;
    } else if (dir === "-") {
      if (currentVolume > 0) videoElement.volume -= 0.1;
    }
  };

  $largeView.on("click", function (e) {
    e.preventDefault();
    $(e.target).toggleClass("control-button-active");
    $diviVideoContainer.toggleClass("expand-video");
  });
  //shows default controls when hovering over video
  $diviVideo.hover(function () {
    if (!videoElement.controls) {
      videoElement.controls = true;
    } else {
      videoElement.controls = false;
    }
  });
});

diviカスタムhtml5ビデオコントロール

コードの分解

HTML要素とDiviボタンを指す変数

まず、指定したCSSIDを持つ各Divi要素を指す変数を宣言する必要があります。また、実際のHTML要素（jQueryオブジェクトではない）を指す2つの重要な変数も必要です。これらには、 videoElement （HTMLビデオ要素を指す）とprogressElement （HTMLプログレス要素を指す）が含まれます。

$diviVideoContainer = $("#divi-video-container");
$diviVideo = $("#divi-video-container video");
videoElement = $("#divi-video-container video")[0];
$play = $("#divi-play");
$playPause = $("#divi-play-pause");
$stop = $("#divi-stop");
$mute = $("#divi-mute");
$volinc = $("#divi-volinc");
$voldec = $("#divi-voldec");
$progress = $("#progress");
progressElement = $("#progress")[0];
$progressBar = $("#progress-bar");
$largeView = $("#divi-large-view");

変数を配置したら、デフォルトのHTMLビデオコントロールを非表示にします。

videoElement.controls = false;

次に、プログレスバーの幅をビデオの現在の時間と長さに比べて大きくする必要があります。

ビデオが（ loadedmetadataイベントを使用して）メタデータをロードしたら、progress要素で、ビデオの継続時間に等しい値でmax属性を設定します。

$diviVideo.on("loadedmetadata", function () {
  $progress.attr("max", videoElement.duration);
});

次に、 timeupdateイベントを使用して、プログレスバーの値と幅を更新し、現在の再生位置を示します。

$diviVideo.on("timeupdate", function (e) {
  progressElement.value = videoElement.currentTime;
  $progressBar.css(
    "width",
    Math.floor((videoElement.currentTime / videoElement.duration) * 100) + "%"
  );
});

また、この時点でprogress要素のmax属性が正しく設定されていない場合に備えて、モバイルブラウザのフォールバックを追加します。

$diviVideo.on("timeupdate", function () {
  if (!$progress.attr("max")) {
    $progress.attr("max", videoElement.duration);
    progressElement.value = videoElement.currentTime;
    $progressBar.css(
      "width",
      Math.floor((videoElement.currentTime / videoElement.duration) * 100) +
        "%"
    );
  }
});

次に、ボタンをクリックしたときに何かを行う関数の作成を開始します。

再生/一時停止ボタンの場合、メディアAPIの一時停止属性と終了属性をifステートメントで使用して、 play （）メソッドとpause（）メソッドを切り替えます。

$playPause.on("click", function (e) {
  e.preventDefault();
  if (videoElement.paused || videoElement.ended) {
    videoElement.play();
  } else {
    videoElement.pause();
  }
});

停止ボタンの場合、ビデオを一時停止し、進行状況の値と現在の時刻を0に戻します。

$stop.on("click", function (e) {
  e.preventDefault();
  videoElement.pause();
  videoElement.currentTime = 0;
  progressElement.value = 0;
});

ミュートボタンの場合、ミュート属性を切り替え、ミュート時に背景が明るいボタンのスタイルを設定するクラスも切り替えます。

$mute.on("click", function (e) {
  e.preventDefault();
  videoElement.muted = !videoElement.muted;
  $(e.target).toggleClass("control-button-active");
});

[音量]ボタンの場合、1つはクリック時の音量を上げるように定義され（ $ volinc ）、もう1つはクリック時に音量を下げるように定義されています（ $ voldec ）。これは、 dirパラメーターの「+」または「-」をチェックし、クリックするたびに音量を段階的に増減するalterVolume（）関数を使用して実行されます。

$volinc.on("click", function (e) {
  e.preventDefault();
  alterVolume("+");
});

$voldec.on("click", function (e) {
  e.preventDefault();
  alterVolume("-");
});

alterVolume = function (dir) {
  currentVolume = Math.floor(videoElement.volume * 10) / 10;
  if (dir === "+") {
    if (currentVolume < 1) videoElement.volume += 0.1;
  } else if (dir === "-") {
    if (currentVolume > 0) videoElement.volume -= 0.1;
  }
};

[拡大表示]ボタンは、クリック時にビデオコンテナの最大幅を調整するCSSクラスを切り替えます。

$largeView.on("click", function (e) {
  e.preventDefault();
  $(e.target).toggleClass("control-button-active");
  $diviVideoContainer.toggleClass("expand-video");
});

また、この例には、デフォルトのビデオコントロールで使用できるすべてのコントロールと機能が含まれているわけではないため、ビデオにカーソルを合わせたときにこれらのコントロール属性を表示する関数を次に示します。

$diviVideo.hover(function () {
  if (!videoElement.controls) {
    videoElement.controls = true;
  } else {
    videoElement.controls = false;
  }
});

最終結果

これが最終結果です。

diviカスタムhtml5ビデオコントロール

そして、これがモバイルでのコントロールのスタック方法です。

diviカスタムhtml5ビデオコントロール

同じ機能を示すこのcodepenをチェックすることもできます。

詳細を見る

HTMLとJavascriptに精通していて、HTML5ビデオにカスタムコントロールと機能を追加することに興味がある場合は、このガイドでビデオプレーヤーを最初から作成する方法を確認できます。 HTMLMediaElement APIをチェックして、そこでの可能性を確認することもできます。

近い将来、HTML5ビデオとDiviを操作するためのより役立つ方法を共有することを楽しみにしています。

最終的な考え

Diviで動画の外部カスタムコントロールを作成すると、独自のデザインと機能への扉が開かれます。確かに、このチュートリアルの例では、使用可能なすべてのオプション（またはコントロール）について説明しているわけではありません。また、機能はページ上の1つのビデオに制限されており、複数ではありません。そのため、特集したいメインビデオの1つをカスタマイズするのに理想的です。しかし、うまくいけば、それはあなたの次のプロジェクトのためにあなた自身のいくつかのカスタムHTML5ビデオコントロールを作成するために必要なものへの確かな紹介として役立つでしょう。

コメントでお返事をお待ちしております。

乾杯！

DiviでビデオのカスタムHTML5ビデオコントロールを作成する方法

スニークピーク

レイアウトを無料でダウンロード

無料でダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

始めるために必要なもの

このチュートリアルの目標の概要

パート1：DiviでのHTML5ビデオの作成

セクションの背景

ビデオ行

ビデオの作成

ビデオファイルをビデオモジュールにアップロードする

ビデオ設定を更新する

パート2：プログレスバーの作成

プログレスバーの行

プログレスバーHTMLの追加

パート3：Diviでのビデオコントロールボタンの作成

行と列の作成

行

列にフレックスを追加する

再生/一時停止ボタン

停止ボタン

ミュートボタン

音量大ボタン

音量小ボタン

ラージビューボタン

パート4：カスタムCSSおよびJSコードの追加

CSS

JavaScript / JQuery

コードの分解

HTML要素とDiviボタンを指す変数

最終結果

詳細を見る

最終的な考え

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。