モーダルウィンドウで動画を再生（Modaal.js）

モーダルウィンドウのサンプルです。モーダルウィンドウとはブラウザ内に開くウィンドウのことで、ウィンドウ内で指定された操作を完了、またはキャンセルするまで他のウィンドウを開くことができない機能を持っているものを指します。「Demo」をクリックすると以下のコードで作成できるモーダルウィンドウのサンプルを見ることができます。

DEMO

このモーダルウィンドウに必要なデータをまとめたzipファイル「modaal-sample.zip」をダウンロードします。

DOWNLOAD

modaal-sample.zip を解凍すると中には「modaal」フォルダと「images」フォルダが入っています。「modaal」フォルダを自身のポートフォリオ作成フォルダ内の直下にフォルダごとコピーします。また「images」フォルダ内にある画像はすべて、ポートフォリオ作成フォルダ内にある「images」フォルダ内にコピーしましょう。

下記のHTMLコードを、index.htmlの head 要素内の style.css を読み込む link 要素より上にコピー＆ペーストします。
HTML CODE

index.html
```
<link href="modaal/modaal.css" rel="stylesheet">
```
クリックしてモーダルウインドウを開きたい画像やテキストに a 要素でハイパーリンクを設定します。クリックしたとき開きたいモーダルウインドウの id 名を href 属性に指定しておきます。また、モーダルウインドウとして開くためのトリガーとなるように a 要素にクラス属性に「modal」を指定します。
HTML CODE

index.html
```
<p><a href="#window1" class="modal">モーダルウィンドウを開く</a></p>
```
モーダルウインドウ部分の HTML の要素を任意の場所に記述してください。クリックしてモーダルウインドウを開きたい要素で href 属性に指定した id 名を id 属性に指定しておきます。またページが開いたときに表示されてしまわないように「style="display:none;"」を指定しておきます。

モーダルウインドウの内容は、一番外側の div 要素を除いて通常の HTML のように自由に設定することができます。このサンプルでは動画ファイル（.mp4）を埋め込みます。
HTML CODE

index.html
```
<div id="window1" style="display:none;">
    <div class="window">
        <video src="mov/mov_samp.mp4" controls muted class="video"></video>
    </div>
</div>
```
HTMLでの<video> 要素を使った動画の埋め込み方法

Webサイトに動画を埋め込む場合、大きく分けて下記の2種類の方法があります。
- 外部の（YouTubeやVimeoなど）動画配信サービスを使って動画を埋め込む（iframe）
- サーバーにファイルをアップロードして<video> 要素で動画を埋め込む
ここでは、自分でサーバーに動画ファイルをアップロードして<video> 要素を使って埋め込む方法を紹介します。動画のファイル形式はMP4（.mp4）で用意しておきましょう。

<video> 要素の使い方

<video> 要素は、<img> 要素と同様に、 src 属性に表示したい動画ファイルへのパスを記述します。
HTML CODE

index.html
```
<video src="video.mp4"></video>
```
<video> 要素には多くの属性があり、動画の幅や高さ、自動再生やループをするかどうか、ブラウザーの標準の動画コントロールを表示するかなどの情報を指定することができます。

videoタグの属性と役割

videoタグで使える属性は様々ありますが、よく使用する属性には、下記のようなものがあります。
- autoplay：自動再生
- loop：ループ再生
- muted：ミュート
- controls：コントロール表示
- playsinline：インライン再生
- preload：事前読み込み
- poster：サムネイル画像
autoplay：自動再生

autoplay属性を指定すると、ページを開いた時に自動で動画を再生することができます。
背景に動画を使用するなど、ユーザーが能動的に動画の再生開始などを行わない時にはautoplay属性を指定しておきます。

iOS（iPhoneやiPad）のSafariではplaysinline属性が指定されていないとautoplay属性を有効にしていても自動再生されません。playsinline属性は動画を再生するときににインラインで再生させる、つまり動画を全画面表示にさせないという指定です。ほとんどの端末ではplaysinline属性を記述していなくても動画をインライン再生しますがiPhoneやiPadではインラインで自動再生しないということになります。
HTML CODE

index.html
```
<video src="video.mp4" autoplay playsinline></video>
```
loop：ループ再生

loop属性を指定すると、動画をループ再生することができます。
HTML CODE

index.html
```
<video src="video.mp4" loop autoplay playsinline></video>
```
muted：ミュート

muted属性を指定すると、動画再生時にミュート（消音）にすることができます。

Google Chromeなどのブラウザではmuted属性が指定されていないと、autoplay属性が動作しません。

Webサイトを開いた時に勝手に音声が再生されることは一般的に望ましくないとされているので、ユーザーが明確に音声が再生されることが分からない場合は、muted属性を指定するようにしましょう。
HTML CODE

index.html
```
<video src="video.mp4" loop autoplay muted playsinline></video>
```
controls：コントロール表示

controls属性を指定すると、動画の再生位置や音量などコントロールパーツを表示することができます。
autoplay属性が指定されていない場合は、controls属性を指定してユーザーが動画を再生できるようにしておく必要があります。

ユーザーが、再生位置を変更したり、再生と停止を切り替えたり、音量をコントロールできるようにしたい場合はこの属性を指定しておくといいでしょう。
HTML CODE

index.html
```
<video src="video.mp4" controls></video>
```
下記のCSSコードはモーダルウィンドウの設定です。このコードもstyle.cssにコピー＆ペーストしておきます。
CSS CODE

style.css
```
.modaal-container {
    max-width: 800px !important;
}

.window video {
    width: 100%;
}
```
下記のJavScriptコードにはjQueryのスクリプトファイル（jquery-3.x.x.min.js）が必要です。読み込みコードが記述していない場合には⑥のコードの前（上の行）に下記のコードをコピー＆ペーストします。
JavaScript CODE

index.html
```
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
```

下記の JavScript コードを、index.html の jquery のスクリプトファイル（jquery-3.x.x.min.js）を読み込む<script>タグ下にコピー＆ペーストします。

<script src="modaal/modaal.js"></script>
<script>
    $('.modal').modaal({
        after_close: closeAndPause
    });

    function closeAndPause() {
        const videoElement = $('.video').get(0);
        videoElement.pause();
    }
</script>

HTMLでの<video> 要素を使った動画の埋め込み方法

<video> 要素の使い方

videoタグの属性と役割

autoplay：自動再生

loop：ループ再生

muted：ミュート

controls：コントロール表示