Gif画像に再生ボタンを設置し、ユーザーの操作により再生⇔停止が行える「gifffer」ライブラリの利用方法

あるページにGif画像を設置し、当該画像が表示されても自動再生させず、再生ボタンをクリックすることで再生させたいというケースがあった。最初はjpg画像等を表示しておいてクリックするとjQuery等でGif画像に差し替えようかと思ったが「gifffer」というライブラリで簡単に対応できるみたい。以下に利用方法をメモ。

サンプル

https://taitan916.info/sample/gifffer/

gifffer

公式サイト

http://krasimir.github.io/gifffer/

GitHub

https://github.com/krasimir/gifffer

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdn.jsdelivr.net/npm/gifffer@1.5.4/build/gifffer.min.js"></script>

利用方法

ソースコード

<img data-gifffer="test.gif">

<script src="https://cdn.jsdelivr.net/npm/gifffer@1.5.4/build/gifffer.min.js"></script>
<script>
window.onload = function() {
    const option = {
        playButtonStyles: {
            'width': '60px',
            'height': '60px',
            'border-radius': '30px',
            'background': 'rgba(255, 0, 0, 1)',
            'position': 'absolute',
            'top': '50%',
            'left': '50%',
            'margin': '-30px 0 0 -30px'
        },
        playButtonIconStyles: {
            'width': '0',
            'height': '0',
            'border-top': '14px solid transparent',
            'border-bottom': '14px solid transparent',
            'border-left': '18px solid rgba(255,255,255, 1)',
            'position': 'absolute',
            'left': '24px',
            'top': '16px'
        }
    }
    const gifs = Gifffer(option);
}
</script>

任意のタイミングで再生させたい場合

以下でGif画像を再生できる。

gifs[0].click();

Gif画像が表示された場合に再生させたい等の場合は過去記事のIntersectionObserverと組み合わせると良さそう。