Замените GIF-файлы видео

Роб Додсон

В этой кодовой лаборатории улучшите производительность, заменив анимированный GIF-файл видео.

Сначала измерьте

Сначала измерьте, как работает веб-сайт:

  1. Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим полноэкранный .
  2. Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
  3. Откройте вкладку «Маяк» .
  4. Убедитесь, что в списке «Категории» установлен флажок «Производительность» .
  5. Нажмите кнопку Создать отчет .

Когда вы закончите, вы увидите, что Lighthouse пометил GIF как проблему в ходе аудита «Использование видеоформатов для анимированного контента».

Получить FFmpeg

Существует несколько способов конвертировать GIF-файлы в видео; в этом руководстве используется FFmpeg . Он уже установлен на виртуальной машине Glitch, и, если хотите, вы можете следовать этим инструкциям, чтобы установить его и на свой локальный компьютер .

Откройте консоль

Дважды проверьте, что FFmpeg установлен и работает:

  1. Нажмите Remix to Edit, чтобы сделать проект доступным для редактирования.
  2. Нажмите «Терминал» (примечание: если кнопка «Терминал» не отображается, возможно, вам придется использовать опцию «Полноэкранный режим»).
  3. В консоли запустите: 
which ffmpeg

Вы должны вернуть путь к файлу:

/usr/bin/ffmpeg

Заменить GIF на видео

  • В консоли запустите cd images чтобы войти в каталог 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 и увидеть два файла:

$ 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

У вас должен быть один GIF и два видео:

$ 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,7 КБ, тогда как версия MP4 — 551 КБ, а версия WebM — только 341 КБ. Это огромная экономия!

Обновите HTML, чтобы воссоздать эффект GIF.

Анимированные GIF-файлы обладают тремя ключевыми характеристиками, которые видео должно воспроизводить:

  • Они играют автоматически.
  • Они зацикливаются непрерывно (обычно, но можно предотвратить зацикливание).
  • Они молчат.

К счастью, вы можете воссоздать это поведение с помощью элемента <video> .

  • В файле index.html замените строку <img> на: 
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

Элемент <video> , использующий эти атрибуты, будет воспроизводиться автоматически, бесконечно зацикливаться, не воспроизводить звук и воспроизводиться в текстовом режиме (то есть не в полноэкранном режиме) — все поведение, ожидаемое от анимированных GIF-файлов! 🎉

Укажите свои источники

Осталось только указать источники видео. Для элемента <video> требуется один или несколько дочерних элементов <source> указывающих на различные видеофайлы, которые браузер может выбирать, в зависимости от поддерживаемого формата. Обновите <video> элементами <source> , которые ссылаются на ваши видеоролики о стаде кошек: 

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

Предварительный просмотр

  • Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим полноэкранный .

Опыт должен выглядеть одинаково. Все идет нормально.

Проверьте с помощью Lighthouse

При открытом действующем сайте:

  1. Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
  2. Откройте вкладку «Маяк» .
  3. Убедитесь, что в списке «Категории» установлен флажок «Производительность» .
  4. Нажмите кнопку Создать отчет .

Вы должны видеть, что проверка «Использование видеоформатов для анимированного контента» проходит! Уууу! 💪