ブラウザ上のGifアニメーションをクリックで再生したい

ブラウザ上のGifアニメーションをクリックで再生したい:

HTMLなドキュメントにGifアニメ埋め込もうと思ったけど、普通に埋め込むと勝手に再生されるので、開始地点がわからなくなる。クリックしたら初めて再生みたいな感じにしたい。

一通り書いた後に、Giffferの存在を知ったので、そちらを使えば良いとおもいます。

Demo

https://jsfiddle.net/j84c5nLk/

再生は出来たけど、停止は出来そうになかった。

ネット上に画像を用意できなかった都合上、手元でキャプチャした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タグが対応してくれると嬉しいんですが・・・