勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

  JavaScript

あるページに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と組み合わせると良さそう。

 - JavaScript

  関連記事

ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)

あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミン ...

CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法

CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公 ...

「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法

「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...

JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法

サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...

フォームで画像をとりあつかう際にBase64エンコードした上で送信する方法

PHP等サーバサイド系の言語は利用不可(JSは利用可)な環境でformを作成し画 ...