JavaScript入門[HTML5編]再生速度とループの設定

再生速度とループ

再生速度とループを制御する命令は以下の通りです。

media.defaultPlaybackRate = 速度

動画・音声の元の再生スピードを変更します。

速度の指定は、1.0が標準で、2なら2倍速、0.5なら半分の速度となります。

media.playbackRate = 速度

再生速度を変更します。

media.loop = true/false

trueを指定すると、繰り返し再生になります。

mediaはメディアオブジェクトを表します。 例えば、以下のように使います。

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

defaultPlaybackRateは動画の元の再生速度を変更するので、始めから終わりまで指定した速度で再生されます。

playbackRateの場合は、再生途中で速度変更が可能です。しかし1回再生を止めて再び再生を始めると、もとのスピードに戻っています。

再生速度とループを指定するサンプル

以下のサンプルでは、動画をループ再生させて、再生速度を半分にするボタンを２つ設置しています。 それぞれのボタンの挙動についてはサンプルの後に説明があります。

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

<!-- 速度変更ボタン２つ --> ▼
<button type="button" onclick="pSpeed()">playbackRate</button>
<button type="button" onclick="dSpeed()">defaultPlaybackRate</button>

<script>
//メディアオブジェクトの取得 ▼
var media = document.getElementById("mv");

//ループ再生を指定 ▼
media.loop = true;

//playbackRateによる速度変更 ▼
function pSpeed()
{
  media.playbackRate = 0.5;
}

//defaultPlaybackRateによる速度変更 ▼
function dSpeed()
{
  media.defaultPlaybackRate = 0.5;
}
</script>

playbackRateの場合

「playbackRate」ボタンを押すと、再生速度が半分になる。
↓

動画を一時停止する
↓

再び再生すると、速度が元に戻っている。また「playbackRate」ボタンを押すと速度は変わるが、停止のたび元に戻る。

defaultPlaybackRateの場合

「defaultPlaybackRate」ボタンを押しても再生速度は変わらない。
↓

動画を一時停止する
↓

動画をリスタートすると、速度が半分になっている。以後一時停止→リスタートを繰り返しても速度は半分のまま。

スクリプトの説明

では上記のスクリプトを詳しく見ていきましょう。

Videoタグ

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

まずはビデオタグです。id名「mv」を付けてJavaScriptで操作できるようにしています。

速度変更ボタン

<button type="button" onclick="pSpeed()">playbackRate</button>
<button type="button" onclick="dSpeed()">defaultPlaybackRate</button>

速度変更関数を呼び出す２つのボタンを設置しています。最初がplaybackRateによる変更、次がdefaultPlaybackRateによる変更を行ないます。

メディアオブジェクトの取得

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

document.getElementById()でvideoタグの動画を取得します。

ループ再生を指定

media.loop = true;

loopを使ってループ再生を指定します。右辺にtrueを指定すればループ再生になります。

playbackRateで速度変更

function pSpeed()
{
  media.playbackRate = 0.5;
}

関数pSpeed()は、playbacRateを使って再生速度を変更しています。 右辺が0.5ですが、通常の半分の速度で再生するように指定しています。

defaultPlaybackRateで速度変更

function dSpeed()
{
  media.defaultPlaybackRate = 0.5;
}

反対に関数dSpeed()は、defaultPlaybackRateを使って再生速度を変更します。 動画のデフォルトの速度を半分に書き換えます。以後この動画は半分のスピードで再生されます。