MP4動画プレーヤーをドロワーメニューで表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

ドロワーメニュー

MP4動画プレーヤーをドロワーメニューで表示する方法

MP4動画プレーヤーをドロワーメニューで表示する方法を紹介します。ボタンをクリックすると画面左側からドロワーメニューがスライド表示され、その中でMP4動画を再生できるサンプルです。動画を専用エリアへ表示したい場合や、ページを切り替えずに動画を見せたい場面で利用できます。

HTMLで画面構成、CSSでドロワーメニューや動画プレーヤーのデザイン、JavaScriptで開閉処理と動画の停止処理を実装しています。モーダルウインドウとは異なり、サイドメニューのようなレイアウトで動画を表示できるため、商品紹介や操作ガイド、チュートリアル動画などにも活用できます。

サンプルにはMP4動画は含まれていません。再生したい動画を各自で用意して配置するだけで利用できます。タイトルや説明文、ボタンの文字、ドロワーの幅やデザインも自由に変更できるため、自分のサイトに合わせて簡単にカスタマイズできます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本記事のコードを利用したことにより発生した損害について、当サイトは一切の責任を負いません。

デモ

MP4動画プレーヤー ドロワーデモ

ボタンをクリックするとドロワーメニュー内でMP4動画を再生できます。

MP4動画プレーヤー

ドロワーメニュー内で動画を再生できます。

「動画プレーヤーを開く」をクリックするとドロワーメニューが表示され、MP4動画を再生できます。デモではサンプル動画が再生されますので、音量にご注意ください。「閉じる」をクリックするとドロワーメニューを閉じると同時に動画も停止し、再生位置が先頭へ戻ります。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>MP4動画プレーヤーをドロワーメニューで表示</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- ドロワーメニューを開く操作エリア -->
  <div class="mp4-video-player-drawer-menu_wrap">

    <!-- 操作エリアのタイトル -->
    <div class="mp4-video-player-drawer-menu_title">
      MP4動画プレーヤー
    </div>

    <!-- 操作エリアの説明文 -->
    <p class="mp4-video-player-drawer-menu_text">
      ボタンをクリックすると、ドロワーメニュー内でMP4動画を再生できます。
    </p>

    <!-- MP4ファイルについての注意書き -->
    <p class="mp4-video-player-drawer-menu_notice">
      このサンプルにはMP4ファイルは含まれていません。再生するMP4ファイルを用意し、movieフォルダへ配置してください。
    </p>

    <!-- ドロワーメニューを開くボタン -->
    <button
      class="mp4-video-player-drawer-menu_open"
      type="button"
      data-mp4-drawer-open>
      動画プレーヤーを開く
    </button>

  </div>

  <!-- ドロワーメニュー表示時の背景 -->
  <div
    class="mp4-video-player-drawer-menu_overlay"
    data-mp4-drawer-overlay
    aria-hidden="true">

    <!-- ドロワーメニュー本体 -->
    <div
      class="mp4-video-player-drawer-menu_drawer"
      role="dialog"
      aria-modal="true"
      aria-labelledby="mp4-video-player-drawer-menu-title">

      <!-- ドロワーメニューのタイトル -->
      <div
        class="mp4-video-player-drawer-menu_drawer-title"
        id="mp4-video-player-drawer-menu-title">
        MP4動画プレーヤー
      </div>

      <!-- ドロワーメニューの説明文 -->
      <p class="mp4-video-player-drawer-menu_drawer-text">
        ドロワーメニュー内でMP4動画を再生できます。
      </p>

      <!-- MP4動画プレーヤー -->
      <video
        class="mp4-video-player-drawer-menu_video"
        data-mp4-drawer-video
        controls
        preload="metadata">

        <!--
          再生するMP4ファイル

          movieフォルダ内へsample.mp4を配置する。
          別のファイル名を使用する場合はsrc属性を書き換える。

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

        お使いのブラウザはvideoタグに対応していません。

      </video>

      <!-- ドロワーメニューを閉じるボタン -->
      <button
        class="mp4-video-player-drawer-menu_close"
        type="button"
        data-mp4-drawer-close>
        閉じる
      </button>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されており、ボタンをクリックするとドロワーメニュー内でMP4動画を再生できます。HTMLで画面構成、CSSでドロワーメニューや動画プレーヤーのデザイン、JavaScriptで開閉処理と動画の停止処理を行う構成です。

配布するサンプルにはMP4動画ファイルは含まれていません。再生したいMP4動画を各自で用意し、movieフォルダへ配置してください。動画ファイルを差し替えるだけで、さまざまな用途に利用できます。

ドロワーメニューを閉じると動画の再生が停止し、再生位置も先頭へ戻ります。動画を最後まで再生しなくても、毎回最初から再生できるため、商品紹介や操作説明、チュートリアル動画などにも利用しやすいサンプルです。 

sample/
├── index.html
├── style.css
├── script.js
└── movie/
    └── sample.mp4（各自で用意）

各ファイルの役割
index.html
ドロワーメニュー、動画プレーヤー、開閉ボタンを配置しています。タイトルや説明文、動画ファイルの読み込み先を変更できます。

style.css
ドロワーメニュー全体のデザインやレイアウトを管理しています。背景色、文字色、余白、角丸、影、動画サイズなどを変更できます。

script.js
ドロワーメニューの表示・非表示を制御しています。閉じる際には動画を停止し、再生位置を先頭へ戻す処理も行います。

movie/sample.mp4
再生するMP4動画ファイルです。サンプルには含まれていないため、利用者自身で用意して配置してください。

設置方法・使い方
sampleフォルダを任意の場所へ配置し、再生したいMP4動画をsample/movieフォルダへ保存してください。動画ファイル名を変更した場合は、index.html内のsourceタグのsrc属性も同じ名前へ変更します。準備ができたらsample/index.htmlをブラウザで開き、「動画プレーヤーを開く」ボタンをクリックするとドロワーメニュー内で動画を再生できます。

カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンの文字、動画ファイルを変更できます。style.cssではドロワーメニューの幅、背景色、余白、角丸、影、動画サイズ、ボタンデザインなどを変更できます。script.jsではドロワーメニューの開閉処理や動画停止処理を変更できます。

数値調整
style.cssのwidthはドロワーメニューの横幅です。max-widthは小さい画面での最大幅、paddingは余白、border-radiusは角丸の大きさを変更できます。animation:0.35sはドロワーメニューが表示される速度を表しており、値を大きくするとゆっくり、小さくすると速く表示されます。transition:0.2sはボタンの色が変化する速度を表しています。

レスポンシブ対応
style.cssでwidth:100%、max-width、@mediaを使用してレスポンシブ対応しています。スマートフォン・タブレット・PCでも画面サイズに合わせてドロワーメニューや動画プレーヤーが自動で調整され、快適に利用できます。

こちらもおすすめ

ドロワーメニュー
ドロワーメニューのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント