投稿内のGIFがローカルでダウンロードされた後に一時停止する

こんにちは、

ScreenToGif で作成したカスタム GIF を Discourse の投稿に埋め込む際に問題が発生しています。GIF を埋め込むと、一瞬は表示されるものの、すぐに最初のフレームで止まってしまうのです。例如下記の通りです:

投稿プレビューでは正常に動作し、アップロードされた GIF を新しいタブで開いても問題なく再生されます。しかし、Discourse 上では止まってしまうのです。

私は以下の 4 つの回避策を試しました:

  1. GIF を別のウェブサイト(例:S3 バケット)にアップロードし、そこにリンクを貼る方法です。これはシステムボットがローカルにダウンロードしてくるまでは機能しますが、ダウンロードされると再び止まってしまいます。

  2. 画像のリサイズが原因ではないかと考え、画像の Markdown 書式を削除してみました。例えば:

    ![](upload://4IHl8zz0sJiYl5Vm3H21YTEFo9z.gif) 
    

    というように変更し、以下のように記述する代わりにしました:

    ![example|690x383](upload://4IHl8zz0sJiYl5Vm3H21YTEFo9z.gif) 
    
  3. 新しいタブでリンクを開いたときは GIF が正常に動作したため、短縮形の「upload」URI を、アップロードされた画像の完全な URL に置き換えてみました。例えば:

    ![example|690x383](https://d11a6trkgmumsb.cloudfront.net/original/3X/2/1/211635b9ae2b0960e8e135299b3a91189b00c289.gif)
    
  4. 最後に、Discourse の Markdown コードの解釈に問題があるかもしれないと考え、アップロードされた画像の完全な URL を使った生 HTML の画像タグを試みました:

    <img src="https://d11a6trkgmumsb.cloudfront.net/original/3X/2/1/211635b9ae2b0960e8e135299b3a91189b00c289.gif">
    

しかし、残念ながらどれも効果はありませんでした。投稿先のフォーラムを自分で管理できていれば、ローカルダウンロードを無効化できることは分かっています。ですが、残念ながらそれはできないのです!

こちらでは動作しているようですが、あなたのサイトでは動作していないとのことですので、サイトの再構築を行い、再度お試しください。最近、GIF に関連する変更を多数行っています。ある期間、あなたの報告と同様のバグが発生しており、あなたのサイトが影響を受けたバージョンの可能性があります。

それは問題ではないと思います。私の環境では動作していません。最初のフレームしか表示されません。

Chrome の他のデフォルト設定が干渉している可能性はありませんか?

ああ、Chrome でも再現できました。なんだか不思議ですね。

元のもの

Gifscicle で最適化したもの
weird_optimized

Gifscicle を経由させてからだと動作します:

再現ありがとうございます。最適化のためにどの gifcicle コマンドを実行しましたか?

シンプルです:

gifscicle original.gif -o fixed.gif

ちなみに、Discourse には自動再生対応の MP4 と WEBP の両方のサポートが標準で搭載されています。こちらの方が良い結果が得られるかもしれません!

ファイルサイズの問題ではないと思います。もっと大きくても小さくてもGIFを扱ってみましたが、同じ結果でした。

素晴らしい、これが実際の GIF に使えるか試してみます。終わったら更新します。

ファイルサイズではなく、gifscicle が修正している「不正な」ファイルのことです。一部のツールが不正なファイルを作成するのはよくあることです。私は共有する前に ffmpeg のような優れたツールで GIF を処理するようにしています。しかし、それでも解像度が奇数などの場合、不正なファイルができやすくなります。

GIF は複雑な形式であり、現在の多くの用途では MP4 や WEBP のようなより良い選択肢があります。

すべての GIF で機能しました。場合によっては --colors 256 フラグを追加する必要もありました。

気になる方のために補足すると、最初にバグが発生した GIF は ScreenToGif の「Neural Network」GIF 生成機能を使って作成しました。

ご協力いただきありがとうございます、@Falco さん。

@nbianca なぜGIFのサムネイルがアニメーションしないのか、理由がわかりませんか?元のGIFは制限内に収まっているようです。

Firefox ではアニメーションします。これは不正な GIF または Chrome のバグのどちらかです。

最新の FF / Windows 10 では、私の環境ではアニメーションされません。

興味深いですね!私の環境(Linux、Firefox)では、左が Firefox、右が Chrome のように表示されます:

このトピックのすべての GIF は、私にとってはアニメーション表示されています(Arch Linux の Chrome 環境)。しかし、現在の FastImage のバージョンは、このバグ のため、アニメーションではないと判断しています。

その場合は、できるだけ早くマージされるよう推進しましょう :+1:

参考までに、gifsicle が動作しないケースがいくつか見つかりました。具体的には、機能する GIF を得るために --colors 256 の使用が必要になる場合もあれば、逆にこのフラグを省略する必要がある場合もあります。

こんにちは、

ご質問の修正が承認され、最新バージョンで利用可能になりました。