(jQuery版) video要素にマウスオンで動画を自動再生。

HTMLのvideo要素でmp4などの動画ファイルをサイトに埋め込み表示させているとき、jQueryを使って、マウスオーバーで再生、マウスアウトで停止させる方法のメモ。

※ ライブラリーを使わずにネイティブJavaScript(Vanilla JavaScript)だけで実装する方法は前の記事を参照。

※ HTMLのvideo要素で動画ファイルをサイトに埋め込み表示する方法は前の記事を参照。

HTMLのマークアップ

マウスオンの判定領域となる親要素と、その中に「video」要素を入れ子にして記述。

1. マウスオンの判定領域となる親要素に任意のクラス名を付与。(ここでは「ag2video」。)
2. 「video」要素に「muted」属性を付与。(Chromeなどでは消音状態でないと自動再生できない仕様なので。)

<div class="ag2video">
	<video src="movie/foo.mp4" muted="true"></video>
</div>

jQueryで実装

マウスイベントでマウスポインタの動きを捕捉し、親要素の領域への流入・流出を判別し、「HTMLMediaElement」が持つJavaScriptのメソッドで動画の再生・停止を実行する。

• 「mouseover」イベント : 指定した要素の領域へのマウスの流入で発火。
• 「mouseout」イベント : 指定した要素の領域からのマウスの流出で発火。

マウスの挙動を捕捉して実装

1. マウスポインタがクラス名「ag2video」を持つ要素に流入した場合、その要素が内包する「video」要素を取得。
2. 取得した「video」要素を「play()」メソッドで再生。
3. マウスポインタが「ag2video」の要素から流出した場合、「video」要素を「pause()」メソッドで停止。

※ 指定した秒数から再生したい場合は、「video」要素の「currentTime」プロパティーに任意の秒数を設定。

※ 「poster」属性を設定していて、停止後に画像を再表示させたい場合は、「video」要素を「load()」メソッドで再読み込みする。

//初期設定値
const ag2videoSettings = {
  classWrap: 'ag2video', //親要素に付与してあるクラス名
  classActive: 'ag2videoOn' //マウスオンで親要素に付与するクラス名
};
//現在再生中のvideo要素を保持する変数
let currentVideo = null;

const ag2video = {
  on: function(t){
    //クラスを付与
    $(t).addClass(ag2videoSettings.classActive);
    //現在のvideo要素を代入して保持
    currentVideo = $(t).find('video')[0];

    //頭に戻す場合
    // currentVideo.currentTime = 0;
    //再生
    currentVideo.play();
  },
  off: function(t){
    //停止
    currentVideo.pause();
    //posterを再表示させる場合(リロード)
    // currentVideo.load();

    //クラスを削除
    $(t).removeClass(ag2videoSettings.classActive);
    currentVideo = null;
  }
};

$('.'+ag2videoSettings.classWrap).on('mouseover', function(e){
  if(!$(this).hasClass(ag2videoSettings.classActive)) ag2video.on(this);
});
$('.'+ag2videoSettings.classWrap).on('mouseout', function(e){
  if($(this).hasClass(ag2videoSettings.classActive)) ag2video.off(this);
});