JavaScript入門[HTML5編]再生時間と長さ

現在の時間・全体時間の取得

ビデオやオーディオの全体時間や、再生中の現在の時間は以下のようにして取得できます。

media.currentTime

再生中のメディアの現時点での再生時間（秒数）を示します。

media.duration

ビデオやオーディオの全体の長さ（秒数）を取得します。

頭のmediaは、document.getElementById()で取得したvideoタグやaudioタグが入ります。

durationは全体の長さを取得するだけですが、currentTimeは数値を代入して再生位置を変更することが可能です。

長さ取得・再生時間変更サンプル

以下のサンプルスクリプトでは、「再生時間/全体時間」を表示するボタンと、 「最初から再生」ボタンを設置してみました。

<video id="mv" controls autobuffer width="320"> ▼
  <source src="movie/dog.mov">
  <source src="movie/dog.ogv">
  <p>HTML5に対応していません。</p>
</video>

<form> ▼
<button type="button" onclick="getMdTime()">再生時間</button>
<button type="button" onclick="goZero()">最初から再生</button>
</form>

<script>

//videoオブジェクトの取得 ▼
var media = document.getElementById("mv");

//長さと再生時間を取得する関数 ▼
function getMdTime()
{
  media.pause();  //動画停止

  var movtime = media.duration;
  var plytime = media.currentTime;

  alert( plytime + "/" + movtime );

  media.play();  //再生再開
}

//最初から再生する関数 ▼
function goZero()
{
  media.currentTime = 0; //先頭に戻す
  media.play();
}
</script>

動画を再生させ、少しして「再生時間」をクリックしてみる
↓

再生時間/全体時間が表示される。
アラートを消すと、動画再生が再開される。
「最初から再生」を押してみる。
↓

動画が最初に戻り、再生される。

スクリプトの説明

ではサンプルスクリプトを詳しく見ていきましょう。

Videoタグ

<video id="mv" controls autobuffer width="320">
  <source src="movie/dog.mov">
  <source src="movie/dog.ogv">
  <p>HTML5に対応していません。</p>
</video>

videoタグは前のページで説明しました。controls属性を記述してコントローラを表示しています。 また今回はwidth属性で横幅も指定しました。

あと、id名「mv」を付けてJavaScriptで操作できるようにしています。

ボタン部分

<form>
<button type="button" onclick="getMdTime()">再生時間</button>
<button type="button" onclick="goZero()">最初から再生</button>
</form>

また、今回もボタンを２つ設置しています。最初のものは再生時間を表示させる関数getMdTime()を呼び出します。

２つめのボタンは、最初から再生させる関数goZero()を呼び出します。

videoオブジェクトの取得

var media = document.getElementById("mv");

続いてscript部分です。最初にグローバル変数mediaを宣言し、document.getElementById()を使ってvideoタグのvideoオブジェクトを格納しています。

長さと再生時間を取得する関数

function getMdTime()
{
  media.pause();

  var movtime = media.duration;
  var plytime = media.currentTime;

  alert( plytime + "/" + movtime );

  media.play();
}

今度は、ビデオの長さと再生時間を取得する関数getMdTimeを見ていきます。

最初にpause()を使って再生を一時停止させています。 alert表示中に動画が進まないようにして、alertを閉じた後play()を使って再び再生させます。

続く部分で２つの変数movtimeとplytimeを宣言し、ビデオの長さと再生時間を格納させています。 ビデオの長さはduration、再生時間はcurrentTimeで取得でした。

それぞれの長さを取得後、alert()を使って２つの時間を「 / 」で区切り表示させます。 サンプルでは取得した値をそのまま表示させましたが、適当なところで四捨五入して表示した方が分かりやすいと思います。

最初から再生する関数

function goZero()
{
  media.currentTime = 0;
  media.play();
}

もう１つの関数は、ビデオを最初に戻して再生させるものです。 これはcurrentTimeに0を指定して、再生させればOKです。

別に0でなくても、他の数値を指定して途中から再生させることも可能です。 これを応用すれば、チャプターを提供することもできるでしょう。