このページの本文へ

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

マウスホバーで動き出す動画ページの作り方

2014年09月18日 11時00分更新

利倉健太 / Stronghold

  • この記事をはてなブックマークに追加
本文印刷

今回の注目サイト:
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>
 

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');

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');

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;
}

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング