先端サイトに学ぶCSS3/jQueryアニメーションデザイン ― 第8回

マウスホバーで動き出す動画ページの作り方 (1/2)

今回の注目サイト：
CONTROL FILMS

http://controlfilms.tv/en/home

　パリを拠点に、コマーシャルやミュージックビデオを制作する映像制作会社。

マウスホバーを基点とした動画再生

　「CONTROL FILMS」は、一見するとサムネイルを並べただけの非常にシンプルなサイトだ。だが、サムネイル上にマウスホバーすると動画の再生が始まり、にぎやかなサイトに一変。コンテンツの魅力を引き出し、第一印象を覆すことに成功している。

　今回はCONTROL FILMSを参考に、マウスホバーで動画を自在に制御するサイトを作ってみよう。

STEP 1：video要素の設置

　最初に、動画を再生するためのvideo要素を設置する。video要素は、自動再生やループ、サムネイルの指定、コントローラーの表示/非表示等を属性値で設定できる。例では動画の自動再生（autoplay） / ループ（loop） / サムネイル画像（poster）を指定している。

■ソースコード（HTML）

<video autoplay loop poster="img/thumb.jpg" width="400" height="225">
    <source src="audio/video.mp4">
    <source src="audio/video.ogv">
    <p>動画を再生するには、videoタグをサポートしたブラウザーが必要です。</p>
</video>
 

DEMO > http://zxcvbnmnbvcxz.com/demonstration/as/008/1.html

STEP 2：クリックによる動画の再生と停止

　次に、動画の再生・停止機能を実装する。video要素は、JavaScriptのplay()／pause()メソッドを使って再生／停止を制御できるので、video要素のautoplay属性を外し、jQueryを使ってマウス操作に対応する。

　まずはクリックによる動画の再生／停止を試してみよう。「PLAY」の文字をクリックすると動画の再生が始まり、「PAUSE」をクリックすると停止する。

■ソースコード（HTML）

<video class="v" loop poster="img/thumb.jpg" width="400" height="225">
    <source src="audio/video.mp4">
    <source src="audio/video.ogv">
    <p>動画を再生するには、videoタグをサポートしたブラウザーが必要です。</p>
</video>
<a class="play" href="#">PLAY</a>
<a class="pause" href="#">PAUSE</a>

■ソースコード（JavaScript）

// 再生
$(document).on({
    click:function(e){
        e.preventDefault();
        $('.v')[0].play(); 
    }
},'.play');

// 停止
$(document).on({
    click:function(e){
        e.preventDefault();
        $('.v')[0].pause(); 
    }
},'.pause');

DEMO > http://zxcvbnmnbvcxz.com/demonstration/as/008/2.html

STEP 3：マウスホバーによる動画の再生と停止

　続いて、サムネイル画像をマウスホバーすると、動画を再生／停止するようにしよう。jQueryのon()メソッドにmouseenter／mouseleaveイベントを指定し、マウスが要素に重なったとき（mouseenter）にplay()、要素から外れたとき（mouseleave）にpause()を実行する。イベントの発生条件をvideoの親要素（例では「.stage」）とすることで、ページ内にvideoが複数ある場合でも個別に制御できる。

■ソースコード（HTML）

<div class="stage">
    <video class="v" loop poster="img/thumb.jpg" width="400" height="225">
        <source src="audio/video.mp4">
        <source src="audio/video.ogv">
        <p>動画を再生するには、videoタグをサポートしたブラウザーが必要です。</p>
    </video>
</div>

■ソースコード（JavaScript）

$(document).on({
    mouseenter:function(){
        $(this).find('.v')[0].play(); 
    },
    mouseleave:function(){
        $(this).find('.v')[0].pause();
    }
},'.stage');

DEMO > http://zxcvbnmnbvcxz.com/demonstration/as/008/3.html

STEP 4：ブラッシュアップする

　STEP 3でマウスホバーによる動画の操作はできたものの、実際のサイトで使うときはもう少しブラッシュアップが必要だ。

　video要素は、未対応のブラウザーではサムネイルが表示されないため、video要素の上に画像を設置し、何も表示されないリスクを回避する。また、pause()で途中停止された場合は動画が途中から再生されるため、マウスオーバー時には初期化（0秒へリセット）してから再生を始めるように改良する。

■ソースコード（HTML）

<div class="stage">
    <a href="#"><img src="img/thumb.jpg" width="400" height="225" alt=""></a>
    <video class="v" loop poster="img/thumb.jpg" width="400" height="225">
        <source src="audio/video.mp4">
        <source src="audio/video.ogv">
        <p>動画を再生するには、videoタグをサポートしたブラウザーが必要です。</p>
    </video>
</div>

■ソースコード（JavaScript）

$(document).on({
    mouseenter:function(){
        $(this).addClass('on');
        $(this).find('.v')[0].currentTime = $(this).find('.v')[0].initialTime || 0;
        $(this).find('.v')[0].play();
    },
    mouseleave:function(){
        $(this).removeClass('on');
        $(this).find('.v')[0].pause();
    }
},'.stage');

■ソースコード（CSS）

.stage{
    width: 400px;
    height: 225px;
    margin: 30px auto 0 auto;
    position: relative;
}

.stage img{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition:opacity 0.3s;
}

.stage.on img{
    opacity: 0;
}

DEMO > http://zxcvbnmnbvcxz.com/demonstration/as/008/4.html