こんにちは、制作部デザイナーのぺちこです。
近頃動画を使ったサイト制作に関わらせていただく機会に恵まれておりますが、
お恥ずかしながらvideo実装をしたことがなかったので、
ひたすら勉強三昧でした。
背景に動画を使ったサイトも、今ではだいぶん主流になってきた印象ですが、
動画を1つのコンテンツとして、長めにしっかりと載せているサイトも増えてきましたね！
動画を大事なコンテンツの一部とすると、
YouTubeやVimeoで簡易的に載せるだけではどうしても物足りず…。
せっかくなので<video>タグを使用してオリジナルのコントローラーやシークバーを作ってしまおう！というのが今回の記事の内容です。
では早速行きましょう！
オリジナルUIの全画面動画を<video>で実装する方法
JSを使用すればvideoをがっつりコントロールできるのですが、
これがまた調べてもスクリプトが出てくるばかりで、実際作ろうと思うと本腰を入れてかからないといけなかったりします。
この記事を読んでできるようになること
今回実装していくのは、次の通り。
- 今回実装する内容
-
- 全画面で動画再生
- シークバーの表示
- シークバー上にチャプター再生のポイントを設置
- 再生・停止・音声ミュートのコントローラー
- 動画再生完了後にウィンドウを立ち上げる
全画面再生以外は、機能を使用するかしないかも選ぶことができます。
基本の作り方
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種類を用意して読み込ませてください。
動画の変換についは、以前別記事でもご紹介した「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="https://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クイックリファレンス
https://www.htmq.com/video/
シークバーの実装
やり方としては以下の方法をとっています。
- 動画全体の時間を取得
- 現在の再生位置を取得
- 全体のうち現在が何%の位置にあるのかを計算
- シークバーの幅をリアルタイムに上書きしていく
実際の記述内容は以下です。
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 = 秒数;
})オプションで好きな数だけチャプターを追加できるように、再生時間（秒数）を配列に入れてeachで回すようにしました。
が、基本的にやっていることは上記なので、この記述を覚えておけば応用できます！
まとめ
いかがでしたか？ videoって便利ですね―。
html5非対応ブラウザなんてもう消……いえ、なんでもありません。
それでは、また！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
