MP4動画プレーヤーをドロワーメニューで表示する方法
MP4動画プレーヤーをドロワーメニューで表示する方法を紹介します。このサンプルでは、「動画プレーヤーを開く」ボタンをクリックすると、画面左側からドロワーメニューがスライドして表示され、その中に配置したHTMLのvideo要素でMP4動画を再生できます。動画プレーヤーを普段は画面外へ隠しておき、必要なときだけ表示できるため、ページ内の表示領域を広く使いながら動画コンテンツを設置できます。
商品やサービスの紹介動画、ECサイトの商品説明、会員サイトの動画コンテンツ、管理画面の操作説明など、現在のページを表示したまま動画を確認してもらいたい場面に利用できます。ドロワーメニューを開いている間はページ側へ半透明の背景を表示し、「閉じる」ボタンをクリックすると動画を停止して再生位置を先頭へ戻してからドロワーメニューを閉じます。背景部分をクリックしても閉じないため、閉じる操作はボタンだけに統一しています。
HTMLでは見出し、説明文、MP4ファイルのURL、ボタンの文字を変更でき、CSSではドロワーメニューの横幅、余白、動画プレーヤーの角丸、背景色、スライド速度などを調整できます。JavaScriptではis-activeクラスの追加と削除によってドロワーメニューと背景を切り替え、閉じるときにvideo要素のpause()とcurrentTimeを使用して動画を初期状態へ戻します。画面幅640px以下では余白を小さくしているため、スマートフォン・タブレット・PCで利用できる動画プレーヤー付きドロワーメニューとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
コードをコピーして使おう！
<!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-drawer-menu_wrap">
<!-- タイトル -->
<div class="mp4-video-drawer-menu_title">
MP4動画プレーヤー
</div>
<!-- 説明文 -->
<p class="mp4-video-drawer-menu_text">
ボタンをクリックすると、左側から動画プレーヤーが表示されます。
</p>
<!-- ドロワーメニューを開くボタン -->
<button
class="mp4-video-drawer-menu_open"
type="button"
data-mp4-video-drawer-open="">
動画プレーヤーを開く
</button>
</div>
<!-- ドロワーメニュー表示中の半透明背景 -->
<div
class="mp4-video-drawer-menu_overlay"
data-mp4-video-drawer-overlay=""></div>
<!-- MP4動画プレーヤーを表示するドロワーメニュー -->
<div
class="mp4-video-drawer-menu_drawer"
data-mp4-video-drawer=""
role="dialog"
aria-modal="true"
aria-labelledby="mp4-video-drawer-menu-heading">
<!-- ドロワーメニューの見出し -->
<div
class="mp4-video-drawer-menu_heading"
id="mp4-video-drawer-menu-heading">
MP4動画プレーヤー
</div>
<!-- 動画の説明文 -->
<p class="mp4-video-drawer-menu_description">
ドロワーメニュー内で動画を再生できます。
</p>
<!-- 動画プレーヤー -->
<div class="mp4-video-drawer-menu_video">
<video
controls=""
data-mp4-video-drawer-player="">
<!--
【MP4動画の設置方法】
1. sampleフォルダ内へmovieフォルダを作成します。
2. 再生したいMP4動画をmovieフォルダへ配置します。
3. このサンプルではファイル名をsample.mp4として読み込みます。
4. 別のファイル名を使用する場合は、下記のsrcも同じ名前へ変更してください。
配置先：
sample/movie/sample.mp4
-->
<source
src="movie/sample.mp4"
type="video/mp4">
お使いのブラウザはvideoタグに対応していません。
</video>
</div>
<!-- ドロワーメニューを閉じるボタン -->
<button
class="mp4-video-drawer-menu_close"
type="button"
data-mp4-video-drawer-close="">
閉じる
</button>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されており、「動画プレーヤーを開く」ボタンをクリックすると画面左側からドロワーメニューが表示され、その中でMP4動画を再生できます。HTMLで画面構成と動画の読み込み、CSSでドロワーメニューや動画プレーヤーのデザイン、JavaScriptで開閉処理と動画の停止処理を行います。
配布するサンプルにはMP4動画ファイルは含まれていません。再生したいMP4動画を利用者自身で用意し、sampleフォルダ内のmovieフォルダへ配置してください。このサンプルではmovie/sample.mp4を読み込む構成になっているため、用意した動画をsample.mp4というファイル名で保存すれば、そのまま再生できます。
ドロワーメニューを閉じると、再生中の動画を停止して再生位置を先頭へ戻します。半透明の背景部分をクリックしても閉じない仕様で、ドロワーメニューを閉じる操作は「閉じる」ボタンだけで行います。
sample/
├── index.html
├── style.css
├── script.js
└── movie/
└── sample.mp4（各自で用意）
各ファイルの役割
index.html
サンプル表示エリア、ドロワーメニュー、半透明背景、MP4動画プレーヤー、開くボタン、閉じるボタンを配置するファイルです。タイトルや説明文、ボタンの文字、動画ファイルの読み込み先を変更できます。
style.css
サンプル表示エリア、ドロワーメニュー、半透明背景、動画プレーヤー、ボタンのデザインを設定するファイルです。ドロワーメニューの横幅、余白、背景色、影、動画の角丸、開閉時のスライド速度などを変更できます。
script.js
ドロワーメニューの表示・非表示を制御するファイルです。「動画プレーヤーを開く」をクリックするとドロワーメニューと半透明背景へis-activeクラスを追加します。「閉じる」をクリックすると動画を停止して再生位置を先頭へ戻し、is-activeクラスを削除します。
movie/sample.mp4
ドロワーメニュー内で再生するMP4動画ファイルです。このファイルは配布するZIPには含まれていないため、利用者自身で用意してsample/movie/へ配置してください。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、その中へmovieフォルダを作成します。再生したいMP4動画をsample.mp4という名前でmovieフォルダへ保存してください。配置場所はsample/movie/sample.mp4です。
動画ファイル名を変更する場合は、index.htmlにあるsrc="movie/sample.mp4"のsample.mp4も実際のファイル名へ変更してください。例えばmovie/product.mp4へ配置する場合は、src属性もsrc="movie/product.mp4"へ変更します。
準備ができたらsample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsを読み込む構成になっています。「動画プレーヤーを開く」をクリックすると左側からドロワーメニューが表示され、video要素の標準コントロールからMP4動画を再生できます。「閉じる」をクリックすると動画が停止し、再生位置が先頭へ戻ってからドロワーメニューが閉じます。
カスタマイズできる内容
index.htmlでは「MP4動画プレーヤー」のタイトル、説明文、「動画プレーヤーを開く」「閉じる」のボタン文字、再生するMP4動画のファイル名を変更できます。別のMP4動画を使用する場合はmovieフォルダ内の動画を差し替え、必要に応じてsource要素のsrc属性を変更します。
style.cssではサンプル表示エリアの横幅や余白、ドロワーメニューの横幅、半透明背景の濃さ、動画プレーヤーの角丸、ボタンの色、ドロワーメニューの影、スライド速度などを変更できます。script.jsでは、閉じるときにpause()で動画を停止し、currentTime=0で再生位置を先頭へ戻す処理を行っています。
数値調整
style.css
max-width:700px;
サンプル表示エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
サンプル表示エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
サンプル表示エリアの内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
サンプル表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
padding:12px 26px;
「動画プレーヤーを開く」ボタンの内側余白です。上下の12pxを大きくすると高さが増え、左右の26pxを大きくすると横幅が広がります。
background:rgba(15,23,42,.35);
半透明背景の濃さです。.35を大きくすると背景が濃くなり、小さくすると薄くなります。
width:420px;
ドロワーメニューの横幅です。値を大きくすると動画プレーヤーの表示領域も広がり、小さくするとコンパクトになります。
max-width:90%;
ドロワーメニューが画面幅に対して占める最大幅です。値を変更すると、狭い画面でのドロワーメニューの表示幅を調整できます。
padding:32px 24px;
ドロワーメニューの内側余白です。上下の32pxと左右の24pxを変更すると、動画や文章とドロワーメニュー端との間隔を調整できます。
transform:translateX(calc(-100% - 40px));
閉じている状態のドロワーメニューを画面左側へ隠す位置です。40pxを大きくすると、さらに左側へ移動します。
transition:transform .3s ease, visibility .3s ease;
ドロワーメニューを開閉する時間です。.3sを大きくするとゆっくり、小さくすると速く切り替わります。
box-shadow:12px 0 30px rgba(15,23,42,.18);
開いたドロワーメニューの右側へ表示する影です。12pxは横方向の位置、30pxはぼかしの大きさです。値を変更すると影の位置や広がりを調整できます。
margin:0 0 28px;
動画プレーヤーと「閉じる」ボタンの間隔です。28pxを大きくすると間隔が広がり、小さくすると狭くなります。
border-radius:10px;
動画プレーヤーの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではサンプル表示エリアへwidth:100%とmax-width:700pxを設定し、ドロワーメニューにはwidth:420pxとmax-width:90%を設定しています。動画プレーヤーにもwidth:100%を指定しているため、ドロワーメニューの横幅に合わせて動画が縮小されます。
画面幅640px以下では、サンプル表示エリアをpadding:24px 18px;、ドロワーメニューもpadding:24px 18px;へ変更して左右の余白を抑えています。スマートフォン・タブレット・PCの画面幅に合わせてドロワーメニューと動画プレーヤーを表示できます。
コメント