animated GIF test

かにかにクラブ > がらくた置き場 > animated GIF test

Webブラウザがアニメーション画像をどのように表示するかを調査。
本文中のメモは、2012年5月に実験したもの。

繰り返さない動画を先頭フレームからやり直したい
同じ時間長の複数の動画の同期をとりたい
動画に組み込まれている速度を守れない

繰り返さない動画を先頭フレームからやり直したい

●Internet Explorer, Sleipnir(～3): ページの「更新」をする (「F5」キーを押す) だけで、先頭フレームからやり直してくれる。
(キャッシュが有効で、サーバーからの再読み込みが省略される場合に限る。)
●Firefox, Chrome, Safari, SRWare Iron, Sleipnir(4～): ページの「更新」をする (「F5」キーを押す) だけでは、やり直してくれない。
一度開いたページの中にある動画に使うタイマは他のページに移動しても動作し続け、
再びそのページに戻っても動画は移動前の続きになってしまう。
ページの「再読み込み」をする (「Ctrl」+「F5」キーを押す) か、
ブラウザを終了して再度起動してそのページを開きなおせば先頭フレームからやり直してくれるが、
スクロールしないと見えない位置に配置されている場合は、
スクロールしている間に動画が終わってしまうかもしれない。
Javascriptを使って、ページ自体は更新しないで指定の動画だけをサーバーから再読み込みするためのボタンを作ってみた。
　スクリプトファイル → anigif.js
ただし、これだと、クリックした回数分だけキャッシュに同じ動画ファイルを溜め込んでしまう。
また、読み込み途中で再度クリックすると、次回起動時には途中までしか表示されなくなったりといった誤動作が発生する。

(Javascriptが有効だとココに「(Firefox) 動画を最初からやりなおし」ボタンが表示される)

同じ時間長の複数の動画の同期をとりたい

●Internet Explorer, Sleipnir(～3): ページの「更新」をする (「F5」キーを押す) だけでよい。
(キャッシュが有効で、サーバーからの再読み込みが省略される場合に限る。)
ページ内の全ての動画がキャッシュに保存済みならば、全部が同時に先頭フレームからやり直してくれるので同期がとれる。
●Firefox, Chrome, Safari, SRWare Iron, Sleipnir(4～): 上記の「繰り返さない動画～」の説明にあるように、再読み込みしないと先頭フレームからやり直しができない。
(ブラウザを終了して再度起動する場合を除く。)
再読み込みすると、必要な通信が終わるまで表示ができないし、
全ての動画が同じタイミングで通信を終えることはほとんどありえないので、これではまず同期はとれない。
ブラウザを終了して再度起動してそのページを開きなおせばとりあえずできる。
それではあまりにも不便なので、他に上手くできる方法を研究中。

動画に組み込まれている速度を守れない

Webブラウザが対応しているアニメーション速度を確認
各フレーム0.15秒