このページは Cloud Translation API によって翻訳されました。

GIF を動画に置き換える

Rob Dodson

この Codelab では、アニメーション GIF を動画をご覧ください。

最初に測定

まず、ウェブサイトのパフォーマンスを測定します。

サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示 。
Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
[Lighthouse] タブをクリックします。
[カテゴリ] リストで [パフォーマンス] がオンになっていることを確認します。
[Generate report] ボタンをクリックします。

完了すると、Lighthouse によって GIF が「アニメーションコンテンツに動画フォーマットを使用する」の問題で監査です。

FFmpeg を入手する

GIF を動画に変換するにはいくつかの方法があります。このガイドでは、 FFmpeg。Glitch VM にインストール済みです必要に応じて、こちらの手順に沿ってローカルマシンできます。

コンソールを開く

FFmpeg がインストールされ、動作していることを再度確認します。

[Remix to Edit] をクリックして、プロジェクトを編集可能にします。
[ターミナル] をクリックします（注: ターミナルボタンが表示されない場合は、[全画面表示] オプションをご利用ください）。
コンソールで次のコマンドを実行します。

which ffmpeg

ファイルパスが返されます。

/usr/bin/ffmpeg

GIF を動画に変更

コンソールで、cd images を実行してイメージディレクトリに移動します。
ls を実行して内容を確認します。

次のように表示されます。

$ ls
cat-herd.gif

コンソールで次のコマンドを実行します。

ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

これにより FFmpeg は、-i フラグで示される入力を受け取り、 cat-herd.gif をダウンロードし、cat-herd.mp4 という動画に変換します。この処理にはなります。コマンドが終了すると、再度 ls と入力できるようになります。次の 2 つのファイルが表示されます。

$ ls
cat-herd.gif  cat-herd.mp4

WebM 動画を作成する

MP4 は 1999 年から存在していますが、WebM は比較的新しく、 2010 年に初めてリリースされましたWebM 動画は MP4 動画よりもはるかに小さいため、両方を生成するのが合理的です。幸い <video> 要素を使用すると、複数のソースを追加するため、ブラウザが WebM をサポートしていない場合、 MP4。

コンソールで次のコマンドを実行します。

ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm

ファイルサイズを確認するには、次のコマンドを実行します。

ls -lh

1 つの GIF と 2 つの動画が必要です。

$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm

元の GIF は 3.7M であるのに対し、MP4 バージョンは 551K であり、 WebM のバージョンは 341K のみです。かなりの節約になります。

HTML を更新して GIF 効果を再作成する

アニメーション GIF には、動画で再現する必要がある 3 つの重要な特徴があります。

自動的に再生されます。
連続してループします（通常は、ループを防ぐこともできます）。
何も言わないから。

幸い、<video> 要素を使用して、これらの動作を再現できます。

index.html ファイルで、<img> の行を次の内容に置き換えます。

<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

これらの属性を使用する <video> 要素は、自動的に再生されます。音声なしの再生、全画面表示ではなくインライン再生、アニメーション GIF に期待される動作🎉

ソースを指定する

あとは動画のソースを指定するだけです。<video> 要素には、異なる動画ファイルを参照する 1 つ以上の <source> 子要素サポートされる形式に応じて、ブラウザが選べるようになります。 cat-herd の動画にリンクする <source> 要素で <video> を更新します。

<video autoplay loop muted playsinline>
  <source src="/images/cat-herd.webm" type="video/webm">
  <source src="/images/cat-herd.mp4" type="video/mp4">
</video>

注: ブラウザはどの <source> が最適かを予測できないため、<source> の順序が重要です。たとえば、最初に MP4 動画を指定し、ブラウザが WebM をサポートしている場合、ブラウザは WebM <source> をスキップし、代わりに MPEG-4 を使用します。WebM <source> を最初に使用したい場合は、それを最初に指定します。

プレビュー

サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示 。

エクスペリエンスは同じに見えるはずです。ここまでは順調です。

Lighthouse で確認

公開サイトを開いて、次の操作を行います。

Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
[Lighthouse] タブをクリックします。
[カテゴリ] リストで [パフォーマンス] がオンになっていることを確認します。
[Generate report] ボタンをクリックします。

[アニメーションコンテンツに動画フォーマットを使用する]監査が合格です。おめでとうございます！💪