しんぺー 
モーダル内に動画を設置したけど、開いたときに自動で再生させたい。
あと、一度再生するとモーダルを閉じてもずっと動画再生されてる。
バックグラウンドで音だけ聞こえてる、、なんとかして。
モーダルを開いたり閉じたりしたタイミングで、JavaScriptを使って動画をコントロールしましょう。
結構簡単ですよ〜
完成形のイメージ
サンプルはRemodalを使用していますが、ライブラリに依存しない実装方法なので汎用的に使用できるかと思います。
YouTubeの場合は全然違った実装方法になります。APIを使用してコントロールします。
いつか気が向いたら記事にします。
不具合のあるサンプル
まずは不具合のあるサンプルです。
不具合と言っても、ある意味正しい挙動なのですが、、
おそらく何も考えずに実装するとこの状態になります。
致命的なのはモーダルを閉じても動画が再生され続けるところでしょうか。ユーザからしてみれば完全に不具合ですね。
具体的には下記のような不具合があります。
- モーダルが開いたときに動画が自動で再生されない。
- 一度再生すると、モーダルを閉じても停止されず再生されたままになっている。
- 再度モーダルを開いたときに、開始位置が途中のままになっている。
See the Pen remodal play pause currentTime【Error】 by shimpei (@shimpei) on CodePen.
不具合を解消したサンプル
videoタグにはcontrolsを入れてあげてくださいね。
controlじゃなくて、controlsなんですよね。いつも間違える。。
これがないとユーザーは何も操作できなくなります。<video src="" controls></video>
モーダルの開閉に合わせてvideoのコントロールをしています。
- モーダルを開くと動画が再生される
- モーダルを閉じると動画が停止される
- モーダルを再度開くと開始位置が初期化されて、最初から再生される
See the Pen remodal play pause currentTime by shimpei (@shimpei) on CodePen.
不具合を解消するコード
$(document).ready(function () {
// モーダルが開かれたときのイベントリスナー
$('[data-remodal-id=modal]').on('opened', function () {
$('video').get(0).play(); // 再生
});
// モーダルが閉じられたときのイベントリスナー
$('[data-remodal-id=modal]').on('closed', function () {
$('video').get(0).pause(); // 停止
$('video').get(0).currentTime = 0; // 再生位置を初期化
});
});モーダルを開いたときに動画を再生する
$(document).ready(function () {
// モーダルが開かれたときのイベントリスナー
$('[data-remodal-id=modal]').on('opened', function () {
$('video').get(0).play(); // 再生
});
});モーダルを閉じたときに動画を停止、再生位置を初期化
$(document).ready(function () {
// モーダルが閉じられたときのイベントリスナー
$('[data-remodal-id=modal]').on('closed', function () {
$('video').get(0).pause(); // 停止
$('video').get(0).currentTime = 0; // 再生位置を初期化
});
});videoタグの操作一覧
今回は動画の再生、停止、再生位置の操作だけでしたが他にもコントロール可能です。
| メソッド / プロパティ | 説明 |
|---|---|
| play() | ビデオを再生します。 |
| pause() | ビデオの再生を一時停止します。 |
| paused | ビデオが一時停止しているかどうかを示すプロパティです。 |
| currentTime | 現在の再生位置を取得または設定します。 |
| duration | ビデオの総再生時間を取得します。 |
| muted | ミュート状態を取得または設定します。 |
| volume | 音量を取得または設定します。 |
| ended | ビデオが終了したかどうかを示すプロパティです。 |
| loop | ビデオをループ再生するかどうかを示すプロパティです。 |
| playbackRate | 再生速度を取得または設定します。 |
| seekable | ビデオの再生可能な範囲を示すオブジェクトです。 |
| buffered | ビデオのバッファリングされた範囲を示すオブジェクトです。 |
他にも色々できるみたいですが、あまり使ったことないので詳しくはMDNをどうぞ。
まとめ
モーダル開閉時に動画をコントロールをするときは、videoタグのイベントをjQueryで操作しよう。
基本的な操作サンプルを紹介しましたが、必要に応じてその他のメソッドも使用してみてください。
今回は下記のjQueryでコントロールしました。
$(document).ready(function () {
// モーダルが開かれたときのイベントリスナー
$('[data-remodal-id=modal]').on('opened', function () {
$('video').get(0).play(); // 再生
});
// モーダルが閉じられたときのイベントリスナー
$('[data-remodal-id=modal]').on('closed', function () {
$('video').get(0).pause(); // 停止
$('video').get(0).currentTime = 0; // 再生位置を初期化
});
});以上になります。