数年前、ヒーローヘッダーに動画を配置するサイトが流行りました。最近はその流行も少し落ち着いたように感じますが、それでもまだこのような需要はあるようです。

一つの動画ファイルをhtml5で再生させることは結構簡単ですが、複数のショート・ムービーを順番に、またはランダムに再生することはできるのでしょうか?

JavaScriptで「HTMLMediaElement」の「loadeddata」と「end」のイベントを取得すると、動画ファイルの「読み込み」と「再生完了」を取得することができるので、複数動画のコントロールが可能です。

複数のシーンを編集して一つの動画としてまとめれば、このような複数動画ファイルのコントロールは本来必要ないのですが、それでもやはり、個別動画のランダム再生などのニーズもあるかと思います。

それで今回は、以前仕事で書いた複数の動画ファイルを制御するコードをベースにそのやり方を解説していきたいと思います。

スポンサーリンク




目次

  1. htmlのサンプルコード
  2. JavaScriptのサンプルコード
  3. まとめ

1. htmlのサンプルコード

まずhtmlを準備しましょう。下記にサンプルコードを示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
</head>
<body>
  <section>
    <video id="hero-movie" muted>
      <source type="video/mp4" id="hero-movie-mp4">
      <source type="video/webm" id="hero-movie-webm">
    </video>
  </section>
  <script src="js/movie-control.js"></script>
</body>
</html>

ここでは動画を配置するDOM要素を「hero-movie」としています。

videoタグに関してですが、音声の再生を禁止する属性「muted」を指定しておかないと、iOSのSafariなどでユーザー以外の再生コントロールができなくなるので必ず指定してください。

また、このサンプルでは動画ファイルとして「mp4」以外に「webm」を代替動画形式として用意する場合の記述となっています。この場合、一番上に記述のある「mp4」が優先して読み込まれ、それが読み込みできない環境では「webm」が読み込まれます。他にも代替動画形式としては「ogv」などが知られています。

ですが、ほとんどのモダンブラウザではmp4」を再生できますので、代替動画形式の準備は必ずしも必要ないかもしれません。必要に応じて書き換えてください。

2. JavaScriptのサンプルコード

それでは次にJavaScriptのサンプルコードです。

// 再生アイテム
var play_item = 
[
	'movie_01',
	'movie_02',
	'movie_03'
];

// 配列シャッフル
play_item = shuffle(play_item);

// 設定初期化
var play_num = 0;
var play_movie;
var movie = document.getElementById("hero-movie");

// 初回の表示要素を設定
play_movie = play_item[play_num];

// 初回再生
moviePlay();

// 動画再生とコピーの入れ替え
function moviePlay()
{
	// 動画入れ替え
	document.getElementById('hero-movie-mp4').setAttribute('src', 'mov/' + play_movie + '.mp4');
	document.getElementById('hero-movie-webm').setAttribute('src', 'mov/' + play_movie + '.webm');
	movie.load();

	// 再生開始
	movie.addEventListener("loadeddata", function()
	{
		movie.play();
	}, false);

	// 再生終了
	movie.addEventListener("ended", function()
	{
		nextSetting();
	}, false);
}

// 次の動画を準備して再生
function nextSetting()
{
	if(play_num >= play_item.length - 1)
	{
		play_num = 0;
	} else {
		play_num++;
	}

	// 次を予約
	play_movie = play_item[play_num];

	// 動画再生
	moviePlay();
}

// 配列シャッフル
function shuffle(array)
{
	var n = array.length, t, i;
	while (n)
	{
		i = Math.floor(Math.random() * n--);
		t = array[n];
		array[n] = array[i];
		array[i] = t;
	}
	return array;
}

2行目:
動画ファイルのファイル名を格納した配列です。適宜動画ファイルを格納してください。

10行目:
ここで動画ファイル名の配列をランダムにシャッフルしているので、ランダム再生が必要なければコメントアウトしてください。

27、38行目:
ここでは「getElementById」でDOM要素を指定し「setAttribute」でsrc属性を上書きしています。代替動画ファイル「webm」を用意しない場合は、必要ないので削除してください。

32〜35行目:
動画の読み込みイベントを取得して、動画を再生します。

38〜41行目:
動画の再生終了イベントを取得して、次の動画を読み込む準備を行なっています。

3. まとめ

今回は、以前仕事で書いた複数の動画ファイルを制御するコードをベースに、html5のvideoタグとJavaScriptを使って複数動画の再生コントロールに関する方法について解説してみました。ヒーローヘッダーに動画を配置して、複数の動画ファイルを再生するといったようなニーズでまだまだ使えると思います。