マウスホバーを基点とした動画再生
今回は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;
}