STEP 5：ドラッグによる動画の操作
video要素は再生／停止以外に再生時間も操作できる。以下は、<input type="range">を使い、ドラック操作で再生位置を変更できるようにしたシンプルなデモだ。
■ソースコード（HTML）
<div class="stage">
<video class="v" loop poster="img/thumb.jpg" width="400" height="225">
<source src="audio/long.mp4">
<source src="audio/long.ogv">
<p>動画を再生するには、videoタグをサポートしたブラウザーが必要です。</p>
</video>
<a class="play" href="#">PLAY</a>
<a class="pause" href="#">PAUSE</a>
<div class="bar_body">
<span class="bar"></span>
<input type="range" min="0" max="100" value="0">
</div>
</div>
■ソースコード（JavaScript）
$(function(){
audio = $('.v')[0];
// 再生
$(document).on({
click:function(e){
e.preventDefault();
audio.play();
}
},'.play');
// 停止
$(document).on({
click:function(e){
e.preventDefault();
audio.pause();
}
},'.pause');
// 変更
$(document).on({
change:function(){
var VAL = $(this).val();
var TOTAL = audio.duration; // 合計時間の取得
var SET = VAL/100 * TOTAL; // 変更後の再生時間（%）
audio.currentTime = SET;
audio.play();
}
},'.bar_body input');
audio.addEventListener('timeupdate', function() {
var TOTAL = audio.duration; // 合計時間の取得
var NOW = audio.currentTime; // 現在の再生時間の取得
var PERCE = NOW / TOTAL * 100; // 変更後の再生時間（%）
$('.bar').css('width',PERCE+'%');
}, true);
});
■ソースコード（CSS）
.bar_body{position: relative; width: 100%; height: 20px; background: #ccc;}
.bar_body *{position: absolute;}
.bar_body input{opacity: 0.5; width: 100%; height: 20px; z-index: 1; cursor:pointer;}
.bar_body span{display: block; height: 20px; background: #f00;}
STEP 6：音声の操作
ここまでは動画の制御方法を紹介してきたが、音声も同様に再生できる。音声の場合はaudio要素を使うが、基本的な設定はvideo要素と同じだ。ただし、サムネイルの指定が必要なく、容量が比較的軽くなるので動画よりも扱いやすいだろう。
クリックによる再生と停止
■ソースコード（HTML）
<audio class="v" controls loop>
<source src="audio/sound.mp3">
<p>音源を再生するには、audioタグをサポートしたブラウザーが必要です。</p>
</audio>
<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');
マウスホバーによる再生と停止
■ソースコード（HTML）
<div class="stage">
<img src="img/image.jpg" alt="" width="400" height="400">
<audio class="v" loop>
<source src="audio/sound.mp3">
<p>音源を再生するには、audioタグをサポートしたブラウザーが必要です。</p>
</audio>
</div>
■ソースコード（JavaScript）
$(document).on({
mouseenter:function(){
$(this).find('.v')[0].play();
},
mouseleave:function(){
$(this).find('.v')[0].pause();
}
},'.stage');
音量の操作
■ソースコード（HTML）
<audio class="v" controls autoplay loop>
<source src="audio/sound.mp3">
<p>音源を再生するには、audioタグをサポートしたブラウザーが必要です。</p>
</audio>
<input type="range" name="" value="0" min="0" max="100">
■ソースコード（JavaScript）
$(document).on({
change:function(e){
e.preventDefault();
var vol = ($(this).val())/100
$('.v')[0].volume = vol;
}
},'input[type="range"]');
マウス移動に応じた音量の操作
マウス座標を取得して動画や音声を制御するのもおもしろい。以下は、マウスの座標が任意の座標に近づけば近づくほど音量が大きくなり、離れると小さくなる仕掛けだ。
■ソースコード（HTML）
<audio class="v" controls autoplay loop>
<source src="audio/sound.mp3">
<p>音源を再生するには、audioタグをサポートしたブラウザーが必要です。</p>
</audio>
■ソースコード（JavaScript）
$(function(){
var audio = $('.v')[0];
audio.volume = 0;
var pointer = {
range : 500,
x:$('.pointer').offset().left + $('.pointer').width()/2,
y:$('.pointer').offset().top + $('.pointer').height()/2
}
$(document).on({
mousemove:function(e){
cX = e.clientX;
cY = e.clientY;
dX = cY - pointer.y;
dY = cX - pointer.x;
distance = Math.sqrt(Math.pow(dX,2) + Math.pow(dY,2));
vol = (pointer.range - distance) / pointer.range
if(vol > 0){
audio.volume = vol;
}
}
});
});
著者：利倉健太（としくら・けんた）
1985年生まれ。株式会社レターズのデザイナー。2010年からWebデザイナーとして働き始める。Webに関する活動拠点「Stronghold」というサイトでブログを書いたり、デザインの実験をしている。
