背景動画２

以前背景動画に関する記事を書いたんだけど、その続きのような感じ。
ちょっと背景に動画を使う機会があって、その時にあれこれしたこと。
落書き的なメモ。

最初は黒色の背景なんだけど、一定時間たったら背景に動画が流れる・・・みたいなのを作る時があった。何とは言わないけど。
前回の記事ではページが読み込んだ瞬間に動画が開始される簡易的なものだったからhtmlのvideoタグでできたんだけど、今回は制御する必要がある。

HTML

<video autoplay class="bg_video" id="Video">
	<source src="sample.mp4" type="video/mp4">
	<source src="sample.webm" type="video/webm">
</video>

sourceのところには他の形式もあるならそれも入れた方がいい。
あとは前回記事とほぼ同様。属性とかはお好みで。

CSS

.bg_video {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background: url(../aaa.jpg) no-repeat;
  background-size: cover;
  transition: 1s opacity;
}

ここら辺は変わらずだからこの前のと同じ

Javascript

$(function () {
  var bgv = $(".bg_video");
  var video = document.getElementById("Video");
  function moviestart(){
    bgv.fadeIn(3000);
    video.currentTime = 0;
    bgv.get(0).play();
  }
  bgv.hide();
  setTimeout(moviestart,3000);
});

変数名bgvと変数名videoを作成。
document.getElementByIdは要素を取得する。
関数名moviestartを作成。
まずbgvをhideさせる。hideは隠す。showの反対。もっというとdisplay:noneのCSSプロパティを対象に与える感じ。
その後、setTimeoutを実行。3000ミリ秒後にmoviestartが実行される。
moviestartの中身は、まずbgvを3000ミリ秒かけてフェードインさせる。
fadeinは、対象のdisplayプロパティをblockにして、opacityプロパティを指定された時間かけて0から1にしていくやつ。
次の、video.currentTime = 0が重要。ここのvideoっていうのは変数名video（つまりdocument.getElementByIdで取得したID名Videoを持つ要素）。
currentTimeっていうのは、動画の再生時間。0が最初。つまりここに書いてある。
hideしてると、動画は画面上では写ってないけど、実は裏で再生自体はされてて、要するにこれ書かないと途中から始まってるみたいになる。
後はplayで再生。いえーい。

補足

ちなみに、今回はcurrentTimeとか使ったけど、他にもvideoで使えるのがいろいろある
http://www.htmq.com/video/

例えば、endedを使えば動画終了後に要素を表示させたりできる。あとは動画が一定時間再生されたらボタンが表示されて、その後一定時間たったらそのボタン消えるみたいなこともできる。
美容関係の動画を背景に流しつつ、シャボン玉の形をしたボタンが出ては消えて出ては消えてみたいなこととか。
なんていうか、擬似的にFlashみたいなことをhtmlとjsでできてしまう時代だなって。Flashのが（多分）軽いけど。

ポートフォリオとかのヒントになった出来事でした。