Zastąp GIF-y filmem

W tym ćwiczeniu poprawisz wydajność, zastępując animowany GIF filmem.

Najpierw zmierz skuteczność witryny:

  1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran pełny ekran.
  2. Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
  3. Kliknij kartę Lighthouse.
  4. Na liście Kategorie sprawdź, czy zaznaczone jest pole wyboru Skuteczność.
  5. Kliknij przycisk Wygeneruj raport.

Po zakończeniu Lighthouse powinien zgłosić GIF-a jako problem w ramach audytu „Używanie formatów wideo do animowanych treści”.

Pobieranie FFmpeg

Istnieją różne sposoby konwertowania GIF-ów na filmy. W tym przewodniku użyjemy narzędzia FFmpeg. Jest ona już zainstalowana na maszynie wirtualnej Glitch. Jeśli chcesz, możesz też zainstalować ją na swoim lokalnym komputerze, postępując zgodnie z tymi instrukcjami.

Otwieranie konsoli

Sprawdź, czy FFmpeg jest zainstalowany i działa:

  1. Kliknij Remixuj do edycji, aby umożliwić edycję projektu.
  2. Kliknij Terminal (uwaga: jeśli przycisk Terminal nie jest widoczny, być może trzeba będzie użyć opcji Pełny ekran).
  3. W konsoli wykonaj te czynności:
which ffmpeg

Powinieneś otrzymać ścieżkę do pliku:

/usr/bin/ffmpeg

Przekształcanie GIF-a w film

  • W konsoli uruchom cd images, aby przejść do katalogu images.
  • Aby wyświetlić zawartość, uruchom ls.

Powinien pojawić się ekran podobny do tego:

$ ls
cat-herd.gif
  • W konsoli wykonaj te czynności:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

Polecenie to informuje FFmpeg, aby wejściowe dane (oznaczone flagą -i) z pliku cat-herd.gif przekonwertować na film o nazwie cat-herd.mp4. Wykonanie tego polecenia powinno zająć sekundę. Po zakończeniu wykonywania polecenia możesz ponownie wpisać ls i zobaczyć 2 pliki:

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

Tworzenie filmów WebM

Format MP4 istnieje od 1999 r., a WebM jest stosunkowo nowym formatem, który został po raz pierwszy udostępniony w 2010 r. Pliki wideo WebM mogą być znacznie mniejsze niż pliki MP4, więc warto wygenerować oba formaty. Na szczęście element <video> umożliwia dodanie wielu źródeł, więc jeśli przeglądarka nie obsługuje formatu WebM, może użyć formatu MP4.

  • W konsoli wykonaj te czynności:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • Aby sprawdzić rozmiary plików, wykonaj te czynności:
ls -lh

Powinieneś mieć 1 GIF-a i 2 filmy:

$ 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

Zwróć uwagę, że oryginalny GIF ma rozmiar 3,7 M, wersja MP4 – 551 K, a wersja WebM – tylko 341 K. To ogromna oszczędność!

Zaktualizuj kod HTML, aby odtworzyć efekt GIF

Animowane GIF-y mają 3 kluczowe cechy, które muszą być odzwierciedlone w filmach:

  • Są one odtwarzane automatycznie.
  • Zazwyczaj są one odtwarzane w pętli (można jednak zablokować tę funkcję).
  • Są wyciszone.

Na szczęście możesz odtworzyć te zachowania za pomocą elementu <video>.

  • W pliku index.html zastąp wiersz z elementem <img> tym:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

Element <video>, który używa tych atrybutów, będzie odtwarzany automatycznie w nieskończoność bez dźwięku i wbudowany (czyli nie na pełnym ekranie). To właśnie oczekuje się od animowanych GIF-ów. 🎉

Określ źródła

Teraz wystarczy określić źródła filmów. Element <video> wymaga co najmniej jednego elementu podrzędnego <source> wskazującego różne pliki wideo, spośród których przeglądarka może wybrać, w zależności od obsługi formatu. Zaktualizuj element <video> elementami <source>, które prowadzą do filmów o kotach:

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

Podgląd

  • Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran pełny ekran.

Użytkownicy powinni mieć takie same wrażenia. Idzie Ci dobrze.

Weryfikacja za pomocą Lighthouse

Gdy witryna jest aktywna:

  1. Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
  2. Kliknij kartę Lighthouse.
  3. Na liście Kategorie sprawdź, czy zaznaczone jest pole wyboru Skuteczność.
  4. Kliknij przycisk Wygeneruj raport.

Powinieneś/powinnaś zobaczyć, że audyt „Używanie formatów wideo do animowanych treści” jest teraz pozytywny. Super! 💪

O ile nie stwierdzono inaczej, treść tej strony jest objęta licencją Creative Commons – uznanie autorstwa 4.0, a fragmenty kodu są dostępne na licencji Apache 2.0. Szczegółowe informacje na ten temat zawierają zasady dotyczące witryny Google Developers. Java jest zastrzeżonym znakiem towarowym firmy Oracle i jej podmiotów stowarzyszonych.

Ostatnia aktualizacja: 2018-11-05 UTC.