В этой кодовой лаборатории улучшите производительность, заменив анимированный GIF-файл видео.
Сначала измерьте
Сначала измерьте, как работает веб-сайт:
- Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .
- Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
- Откройте вкладку «Маяк» .
- Убедитесь, что в списке «Категории» установлен флажок «Производительность» .
- Нажмите кнопку Создать отчет .
Когда вы закончите, вы должны увидеть, что Lighthouse пометил GIF как проблему в ходе аудита «Использование видеоформатов для анимированного контента».
Получить FFmpeg
Существует несколько способов конвертировать GIF-файлы в видео; в этом руководстве используется FFmpeg . Он уже установлен на виртуальной машине Glitch, и, если хотите, вы можете следовать этим инструкциям, чтобы установить его и на свой локальный компьютер .
Откройте консоль
Дважды проверьте, что FFmpeg установлен и работает:
- Нажмите Remix to Edit, чтобы сделать проект доступным для редактирования.
- Нажмите «Терминал» (обратите внимание: если кнопка «Терминал» не отображается, возможно, вам придется использовать опцию «Полноэкранный режим»).
- В консоли запустите:
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
При открытом активном сайте:
- Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
- Откройте вкладку «Маяк» .
- Убедитесь, что в списке «Категории» установлен флажок «Производительность» .
- Нажмите кнопку Создать отчет .
Вы должны увидеть, что проверка «Использование видеоформатов для анимированного контента» проходит! Уууу! 💪