こんにちは、制作部デザイナーのぺちこです。

近頃動画を使ったサイト制作に関わらせていただく機会に恵まれておりますが、お恥ずかしながらvideo実装をしたことがなかったので、ひたすら勉強三昧でした。

背景に動画を使ったサイトも、今ではだいぶん主流になってきた印象ですが、動画を1つのコンテンツとして、長めにしっかりと載せているサイトも増えてきましたね！

動画を大事なコンテンツの一部とすると、
YouTubeやVimeoで簡易的に載せるだけではどうしても物足りず・・。
せっかくなので<video>タグを使用してオリジナルのコントローラーやシークバーを作ってしまおう！というのが今回の記事の内容です。

では早速行きましょう！

オリジナルUIの全画面動画を<video>で実装する方法

JSを使用すればvideoをがっつりコントロールできるのですが、
これがまた調べてもスクリプトが出てくるばかりで、
実際作ろうと思うと本腰を入れてかからないといけなかったりします。

と、言うわけで、案件で学んだことを活かして、
デザイナーさんでも一瞬で実装できるように、サンプルをご用意しました。

videoタグを操作するのでIE8以下は非対応です。
IE8以下の場合はYouTubeなどを表示させてあげましょう…

サンプルダウンロード

実装デモページ（音が鳴ります）
サンプルファイルダウンロード

サンプルファイルでできること

• 全画面で動画再生
• シークバーの表示
• シークバー上にチャプター再生のポイントを設置
• 再生・停止・音声ミュートのコントローラー
• 動画再生完了後にウィンドウを立ち上げる

全画面再生以外は、機能を使用するかしないかも選ぶことが出来ます。

基本の使い方

1. jQueryとダウンロードしたJS・CSSを読み込む

ファイルパスはみなさんの環境に合わせてください。
サンプルのまま使用したい場合は、WEBフォントも読み込みましょう。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/custom.ui.video.js"></script>
<link href="css/style.css" rel="stylesheet" media="all">
<link href='//fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>

2. 読み込むビデオをhtmlに記述

各種ブラウザに対応させる為、
mp4、webm、ogvの3種類を用意して読み込ませてください。

動画の変換についは、以前Windowsユーザー必見！普段使い＆制作に役立つ便利ツール5選でご紹介した「AnyVideoConverter」が便利です。
Mac版もありますので試してみてください。

<video id="video" autoplay>
	<source src="video/sample.mp4">
	<source src="video/sample.webm">
	<source src="video/sample.ogv">
</video>

3. 動画再生完了後の画面を記述

動画が全部再生されたら、「リプレイする」か「次のコンテンツに移動する」か「元のページに戻る」か…いくつか動作があると思います。
div#endedをフェードインするようにしているので、中身は任意で入れてもらえればOKですが、#replayをクリックすると動画がリプレイされるようになっています。

<div id="ended">
	<ul>
		<li><div id="replay">VIDEO REPLAY</div></li>
		<li><a href="http://liginc.co.jp/" target="_blank">BACK TO BLOG</a></li>
	</ul>
</div>

4. スクリプトの実行

今記述した全体を任意のdivで囲み、最後にスクリプトを実行します。
全体を「#video_wrapper」で囲んだ場合は以下のようになります。

$(function(){
	$('#video_wrapper').videocontrol({
		movieWidth: 640, //動画の横幅
		movieHeight: 352, //動画の縦幅
	});
});

チャプター再生を使用する場合

1. チャプター用のhtmlを記述

長い動画だとそれなりに場面転換がありますよね。
転換ポイントでチャプター再生をさせたい場合は、させたい分だけ<li>に追加をしてください。
<li>の中にはチャプター毎のタイトルなどを適当に。

<ol id="chapter">
	<li>0:00 Tunnel</li>
	<li>0:16 Dragonfly</li>
	<li>0:31 Sky</li>
	<li>0:46 River</li>
</ol>

2. スクリプト実行のオプションに記述を追加

上記で設定したチャプターのID名と、再生させたいポイントの秒数を記述します。記述した場合は以下のような感じになります。

$(function(){
	$('#video_wrapper').videocontrol({
		movieWidth: 640,
		movieHeight: 352,
	    chapterTarget : '#chapter', //ID名
		chapterTimes: [0,16,31,46] //チャプターに追加した分だけ記述
	});
});

その他のオプション

シークバーを非表示にする

オプションに以下を追加

seekbar:false

エンド画面を使用しない

オプションに以下を追加

ended:false

もはやコントローラーもいらない

オプションに以下を追加

control:false

全てをなくすと、ユーザビリティの悪いページになってしまうだけですが…
完全に全画面背景動画とするならば使えるかもしれません。
それぞれ用途に合わせてご利用ください。

videoのコントロールについて

コントロールするための記述

以下はサンプルファイルでも使用している基本的な記述です。

$(function(){
	// 操作対象のvideoを指定
	var video = document.getElementById('video');

	// 動画の全体の時間を取得（秒）
	var fullTime = video.duration;

	// 動画の現在の再生位置を取得（秒）
	var nowTime = video.addEventListener("timeupdate",nowTimeGet,false);
	function nowTimeGet(){
		video.currentTime;
	}

	// 動画の再生
	$('要素名').click(function(){
		video.play();
	});

	// 動画の一時停止
	$('要素名').click(function(){
		video.pause();
	});

	// 動画の頭出し
	$('要素名').click(function(){
		video.currentTime = 0; // 入れた秒の位置へ移動
	});

	// 音声ミュート
	$('要素名').click(function(){
		video.muted = video.muted ? false : true;
	});

	// 音声ミュートの解除
	$('要素名').click(function(){
		video.muted = video.muted ? false : false;
	});

	// メディアの読み込みが完了したら実行
	video.addEventListener("loadedmetadata",実行したい関数名,false);

	// 再生完了時に実行
	video.addEventListener("ended",実行したい関数名,false);

});

この他にも色々とイベントがありますので、もっとより細かく色々したい！という方はリファレンスを読むことをオススメします。
個人的に最近お世話になっていたサイトも載せておきます。

参考：video要素、audio要素をJavaScriptから操作する｜HTMLクイックリファレンス

http://www.htmq.com/video/

シークバーの実装

やり方としては以下の方法をとっています。

1. 動画全体の時間を取得
2. 現在の再生位置を取得
3. 全体のうち現在が何%の位置にあるのかを計算
4. シークバーの幅をリアルタイムに上書きしていく

実際の記述内容は以下です。

video.addEventListener("timeupdate",seekbar,false);

function seekbar(){
	var fullTime = video.duration; // 動画全体の時間
	var nowTime = video.currentTime; // 現在の再生時間
	var setPos = (nowTime/fullTime)*100; // 全体に対する現在の位置

	$('#currenttime').css({'width':setPos+'%'});
}

チャプター再生の実装

チャプター再生のポイントの位置も、シークバー同様に全体の何の位置なのかを取得して配置しています。
少し異なるのは、チャプターについては「リアルタイム」である必要が無いくらいでしょうか。

ポイントを配置し、かつクリックで再生位置を移動させるようにします。

var fullTime = video.duration;	// 動画全体の時間
var chapterPos = (秒数/fullTime)*100; // 各チャプターの位置

$('要素名').css({
	left: chapterPos+'%'
})
$('要素名').click(function(){
	video.currentTime = 秒数;
})

実際にJSを見ていただくと分かるかと思いますが、
サンプルではオプションで好きな数だけチャプターを追加できるように、再生時間（秒数）を配列に入れてeachで回しています。

が、基本的にやっていることは上記なので、この記述を覚えておけば応用できます！

まとめ

いかがでしたか？
サンプルのファイルはそのまま使用していただいても、
画像を差替えて使用していただいても。ご自由にお使いください。

サンプルダウンロード

実装デモページ（音が鳴ります）
サンプルファイルダウンロード

videoって便利ですね―。
html5非対応ブラウザなんてもう消…いえ、なんでもありません。

それでは、また！