【開発日誌#27】fullPage.jsで背景に動画を入れてみた

はじめまして！フロントエンドエンジニアをやらせていただいてる笠原です。職業訓練校を経て未経験で入社いたしました。

今回の開発日誌ではfullPage.jsを使った案件で、動画との組み合わせに苦労したので自分なりにまとめてみました。

はじめに

fullPage.jsとは？

fullPage.jsとはフルスクリーンのコンテンツを1ページずつスクロールで表示できるjqueryのライブラリです。使い方はfullPage.jsの公式サイトからダウンロード、もしくはCDNで読み込みます。見本は公式サイト 上にありますのでご覧になってみてください。

今回はfullPage.js-2.9.6 こちらの無料バージョンを使用します。ダウンロードし、jquery.fullpage.js と jquery.fullpage.css を読み込ませます。基本のファイルはこの2つですが、オプション(fullPage.jsには各種パラメータで色々な設定が出来るようになっています)を変更するため jquery.easings.min.js と scrolloverflow.js も一緒に読み込みます。

header内（任意のパスで入れてください）

<link rel="stylesheet" media="print,screen" href="./_assets/lib/fullpage/jquery.fullpage.css">

footer内

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./_assets/lib/fullpage/scrolloverflow.js"></script>
<script src="./_assets/lib/fullpage/jquery.easings.min.js"></script>
<script src="./_assets/lib/fullpage/jquery.fullpage.js"></script>

実装していく

HTMLマークアップ

フルページでスクロールさせたいコンテンツをsectionで囲み、そのsectionをid="fullpage"の要素で囲みます。今回は2番目のセクションの背景をフルで動画にするためvideo要素を入れます。その際、動画をPC版と容量を軽くしたSP（スマートフォン）版で出し分けます。

<main class="main">
        <div class="inner" id="fullpage">
            <section class="sec1 section">
                <div class="slide">
                    <p class="text">1</p>
                </div>
            </section>
            <section class="sec2 section" id="sec2">
                <div class="sec2__videoArea">
                    <video src="./_assets/images/movie.mp4" autoplay loop muted playsinline class="sec2__bgVideo u-pcDb" id="video"></video>
                    <video src="./_assets/images/movie-sp.mp4" autoplay  loop muted playsinline class="sec2__bgVideo u-spDb" id="videoSp"></video>
                </div>
            </section>
            <section class="sec3 section">
                <div class="slide">
                    <p class="text">3</p>
                </div>
            </section>
        </div>
    </main>

jsを書いていく

jsファイルを作成し、記述していきます。通常のfullPage.jsを動かすためには最低限の記述で動きます。

$(function(){
  $('#fullpage').fullpage();
});

ナビゲージョンを入れるためオプションの記述を入れます。

$('#fullpage').fullpage({
        navigation: true,
        controlArrows:false,
        slidesNavigation:true,
    });

ここまで記述してfullPage.js自体は問題なく動作しますが、動画のセクションから次のセクションに行き、戻ってきた時に動画の再生が止まってしまいます。どうやらページがロードされた時に最初に動画のセクションに到達した時にしか動画は再生されないようです。

作成したdemo

動画の再生をjsで制御する

fullpage.js のオプション「onLeave」を使って、動画のセクションに移動するときに動画を再生する記述を書きます。

まずは動画を再生させる記述を書く

function videoPlay() {
        var video = document.getElementById('video');
        video.play();
    }

セクション1を下にスライドした時、セクション3を上にスライドした時に動画が再生されるよう「onleave 」オプションを追加。

$('#fullpage').fullpage({
        navigation: true,
        controlArrows:false,
        slidesNavigation:true,
        onLeave: function (index, nextIndex, direction) {
            if (index == 1 && direction == 'down') {
                videoPlay();
            } else if (index == 3 && direction == 'up') {
                videoPlay();
            }
        }
    });

これで動画のセクションに到達した時でも動画が再生されるようになりました！

コンテンツ量の少ないサイトではここまでで大丈夫かと思います。しかしコンテンツ量が多いサイトでは特にSPの時に動画の読み込み自体に時間がかかってしまいます。

2018年のGoogleによる調査（英文）では、表示速度と直帰率について以下のような発表がありました。

• 表示に3秒かかると、直帰の確率は32%増加
• 表示に5秒かかると、直帰の確率は90%増加
• 表示に6秒かかると、直帰の確率は106%増加
• 表示に10秒かかると、直帰の確率は123%増加

ページの読み込みに時間がかかると離脱率が高くなってしまうため、次にこちらを改善してきます！

ユーザビリティに配慮したサイト作り

動画読み込みに時間をかけないようにする

動画の読み込み自体を遅延させるための手段はいくつかありますが、試した中でスムーズに動いたのはjsでvideo要素を作り、ページがロードされたときに動画を再生する、という方法でした。

html

<main class="main">
        <div class="inner" id="fullpage">
            <section class="sec1 section">
                <div class="slide">
                    <p class="text">1</p>
                </div>
            </section>
            <section class="sec2 section" id="sec2">
                <div class="sec2__videoArea">
                    <div id="videoWrap"></div>
                </div>
            </section>
            <section class="sec3 section">
                <div class="slide">
                    <p class="text">3</p>
                </div>
            </section>
        </div>

    </main>

section2のvideo要素を消し、video要素を入れるためのdivを作成します。

js

let video = document.createElement('video');
    video.muted = true;
    video.loop = true;
    video.autoplay = false;
    video.setAttribute('playsinline', '');
    if (window.matchMedia('(max-width: 768px)').matches) {
       //sp
        video.src = './_assets/images/movie-sp.mp4';
        $(window).on('load', function(){
            video.play();
        });
     }else {
       //pc
       video.src = './_assets/images/movie.mp4';
    }
    document.getElementById('videoWrap').appendChild(video);

createElement でvideo要素を生成し、自動再生されるようオプションの記述を入れていきます。最後にhtmlで作成した空divの中にvideo要素を入れます。

ここでPCとSPの時の出しわけをします。それぞれ読み込ませる動画ファイルが違うので、window.matchMedia で出し分けていきます。今回はSP（スマートフォン）の時のみ画面が読み込まれたら動画を再生する、という記述を入れました。

最後にvideoPlay()の記述を変えます。

function videoPlay() {
        video.play();
    }

これで動画の読み込みを遅延させるようになり、サイトの読み込みに支障をきたす事態は避けられました！

完成したdemo

まとめ

今回試行錯誤しながらfullPage.jsのサイトを作成しましたが、「できた！」と思っても次から次へと問題が浮上していきます。1つ1つ解決しながら今後も今回のようにユーザーに見てもらってストレスの無いような、ユーザビリティに配慮したサイト作りを意識していきたいです。

おわりに

当社の案件はとにかく「多彩」！
求められる技術レベルも日に日に高まっています。
今後はモダンな技術を用いたサイト／アプリケーション構築が増えていく見込みです。
多彩な案件や大型案件に挑戦してみたい方は、まずはカジュアル面談にお越しください！