メインビジュアルの背景を動画にする

2017.07.05

自社のサイトリニューアルの際に、メインビジュアルで動画を流すことになったので、
html5のvideoタグと、再生を制御するjavascriptについて解説します。

■HTMLソース

<div id="mainVisual">
  
  <div id="cover"></div>
    <video autoplay id="bgvid">
      <source src="asset/movie/video.mp4" type="video/mp4">
    </video>

</div>
<!-- /mainVisual -->

</video>

</div>

■css

html, body {
    height: 100%;
}
#mainVisual {
    width: 100%;
    height: 100%;
}
#mainVisual video#bgvid {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
}
#cover {
    background: url(../../asset/movie/cover.jpg) no-repeat;
    background-size: cover;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: 5s;
}
#cover.fade {
    opacity: 0;
}

html, body {

height: 100%;

}

#mainVisual {

width: 100%;

height: 100%;

}

#mainVisual video#bgvid {

position: fixed;

right: 0;

bottom: 0;

min-width: 100%;

min-height: 100%;

width: auto;

height: auto;

z-index: -100;

}

#cover {

background: url(../../asset/movie/cover.jpg) no-repeat;

background-size: cover;

z-index: -1;

width: 100%;

height: 100%;

opacity: 1;

transition: 5s;

}

#cover.fade {

opacity: 0;

}

今回は、動画をフェードインさせる必要があったので、video要素の直前にカバー画像用のdivを作りました。
video自体をjQueryでフェードインさせると、処理が重たくなり再生がスムーズにされなかったので、
フェードイン効果はcss3で実装しています。

■javascript

<script>
$(window).load(function() {
  $('#cover').addClass('fade'); //#coverにクラスを付与
});
$(function() {
        var video = document.getElementById('bgvid');
        //再生位置を秒で設定する
        video.currentTime = 11;
        // 再生速度を変更する
        video.playbackRate = 1;
        // 再生開始
        video.play();
    });
</script>