動画の再生・一時停止－JavaScript入門（HTML5編）

HOME
JavaScript入門[HTML5編]
動画の再生・一時停止

ここから、HTML5で動画やオーディオを扱う方法について見ていきます。最初はHTMLの記述と、再生・停止させる方法を見てみましょう。

なおビデオの再生はサーバー負荷が高くなるため、サンプルは無く画像のみの解説となります。ご了承下さい。

ビデオ再生のためのHTML5の記述

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

動画を表示するには、<video>～</video>にsourceタグで動画ファイルを指定します。現時点でブラウザによって再生可能な動画ファイルの形式が違うため、幾つかのファイルをこのような方法で指定しなければなりません。動画変換はMoo0 動画変換器などを利用することができます。

videoタグにあるautobuffer属性は、自動的にバッファさせるためのものです。

またHTML5に対応していないブラウザのために、再生できない旨をメッセージ表示させるよう指定しておくと良いでしょう。

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

videoタグにcontrols属性を記述すると、上図のようにコントローラを表示することができます。こうすれば閲覧者は自分で好きなように再生・停止できます。しかしコントローラが表示されていなければ、 JavaScriptで再生・停止をユーザーに提供することになります。

JavaScriptで動画を再生・一時停止させる

JavaScirptで動画を再生・停止させるには、以下のようにします。

document.getElementById("id名").play(): id名の付いたvideoタグの動画を再生します。
document.getElementById("id名").pause(): id名の付いたvideoタグの動画を一時停止します。

以下は動画再生停止スクリプトの一例です。再生・一時停止のボタン2つを配置し、ユーザーが操作できるようにしています。

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

<form> ▼
<button type="button" onclick="movplay(0)">再生</button>
<button type="button" onclick="movplay(1)">一時停止</button>
</form>

<script>
function movplay(num) ▼
{
  var obj = document.getElementById("mv");
  var n = parseInt(num);
  if ( n == 0 )
  {
    obj.play();
  }
  else
  {
    obj.pause();
  }
}
</script>

コントローラが表示されていなくても、再生ボタンを押すと、
↓

動画が再生されて・・・キャッチ！
↓

着地も無事でき、動画も終了しました

スクリプトの説明

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

videoタグ

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

videoタグについては上で説明済みですが、id名「mv」を付けてJavaScriptで操作できるようにしています。 controls属性は記述していないので、コントローラは表示されていません。

スクリプトへ

再生・一時停止ボタン

<form>
<button type="button" onclick="movplay(0)">再生</button>
<button type="button" onclick="movplay(1)">一時停止</button>
</form>

続いてボタンを２つ配置し、それぞれ「再生」,「一時停止」ボタンとしました。呼び出している関数はどちらも同じですが、引数で動作を切り替えるようにしています。

スクリプトへ

再生・一時停止関数

function movplay(num)
{
  var obj = document.getElementById("mv");
  var n = parseInt(num);
  if ( n == 0 )
  {
    obj.play();
  }
  else
  {
    obj.pause();
  }
}

今度は、scriptの中を見ていきます。関数movplay()があります。関数の最初で、変数objにid名「mv」の付いたvideoタグを取得して格納しています。

また引数numをparseInt()で数値に変換して、変数nに代入しています。このnの値を調べて、再生か停止か振り分けます。

if文で、nの値が0かどうかを調べます。0の時はplay()で再生させます。それ以外だとpause()で一時停止させます。

スクリプトへ

INDEXへ次へ