HTMLなドキュメントにGifアニメ埋め込もうと思ったけど、普通に埋め込むと勝手に再生されるので、開始地点がわからなくなる。クリックしたら初めて再生みたいな感じにしたい。
一通り書いた後に、Giffferの存在を知ったので、そちらを使えば良いとおもいます。
Demo
再生は出来たけど、停止は出来そうになかった。
ネット上に画像を用意できなかった都合上、手元でキャプチャしたGIFアニメを Data URL にして使っていますが、ちゃんとURLでも機能します。
仕組み
元の画像をcanvasに張り付けてそのイメージを静止画として使い、クリックでgif←→静止画の切り替えをやるだけです。
また、canvasのtoDataURLを使うので、CORSな画像を扱う場合は、crossorigin属性の扱いに注意してください。
canvasのサイズを落としてdrawImageで貼り付けると、縮小されてボケた感じの画像に仕上がります。
あとcanvasで描いているので、静止画のほうにだけ「クリックして再生」みたいな注釈を書き足すこともできそうです。そこまでやるか？というのもありそうですが。
動作確認
PC上で確認。スマホは不明。
| ブラウザ | バージョン | 動作 | 備考 |
|---|---|---|---|
| Chrome | 67.0.3396.99 | 〇 | 再生は最初から |
| FireFox | 61.0.1 | 〇 | 再生は最初から |
| Microsoft Edge | 42.17134.1.0 | △ | 再生は変なところから。裏でgifが再生され続けている状態になっている模様。 |
chromeでしか確認してませんが、WebPでも動きました。
一番はvideoタグが対応してくれると嬉しいんですが・・・