W tym ćwiczeniu z programowania zwiększ wydajność, zastępując animowany GIF filmem.
Najpierw zmierz
Najpierw sprawdź skuteczność witryny:
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran .
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Lighthouse.
- Upewnij się, że na liście Kategorie jest zaznaczone pole wyboru Skuteczność.
- Kliknij przycisk Wygeneruj raport.
Gdy skończysz, zauważysz, że narzędzie Lighthouse oznaczyło plik GIF jako problem podczas kontroli „Używaj formatów filmów do tworzenia treści animowanych”.
Pobierz FFmpeg
GIF-y można konwertować na filmy na kilka sposobów. W tym przewodniku używana jest usługa FFmpeg. Jest już zainstalowana w maszynie wirtualnej Glitch. Jeśli chcesz, możesz też wykonać te instrukcje, aby zainstalować ją na komputerze lokalnym.
Otwórz konsolę
Sprawdź, czy FFmpeg jest zainstalowany i działa:
- Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.
- Kliknij Terminal (uwaga: jeśli nie widać przycisku terminala, może być konieczne użycie opcji pełnego ekranu).
- W konsoli uruchom następujące polecenie:
which ffmpeg
Powinna zostać zwrócona ścieżka do pliku:
/usr/bin/ffmpeg
Zmień GIF-a na film
- W konsoli uruchom polecenie
cd images
, aby przejść do katalogu obrazów. - Uruchom
ls
, aby wyświetlić zawartość.
Powinien pojawić się ekran podobny do tego:
$ ls
cat-herd.gif
- W konsoli uruchom następujące polecenie:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4
Dzięki temu FFmpeg pobierze wejściowy (oznaczony flagą -i
) pliku cat-herd.gif i przekonwertuje go na film o nazwie cat-herd.mp4. To powinno chwilę potrwać. Po zakończeniu wykonywania polecenia możesz ponownie wpisać ls
i wyświetlić 2 pliki:
$ ls
cat-herd.gif cat-herd.mp4
Twórz filmy WebM
Format MP4 jest dostępny od 1999 r., ale WebM to względnie nowy format, którego premiera rozpoczęła się w 2010 r. Filmy WebM są znacznie mniejsze niż pliki MP4, więc warto wygenerować je oba. Na szczęście element <video>
pozwala dodawać wiele źródeł, więc jeśli przeglądarka nie obsługuje WebM, może użyć formatu MP4.
- W konsoli uruchom następujące polecenie:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
- Aby sprawdzić uruchamiane rozmiary plików:
ls -lh
Musisz mieć 1 GIF 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 3,7 MB, wersja MP4 to 551K, a wersja WebM – tylko 341K. To ogromna oszczędność.
Zaktualizuj kod HTML, aby odtworzyć efekt GIF
Animowane pliki GIF mają 3 kluczowe cechy, które pozwalają odtworzyć w filmach te cechy:
- Odtwarzają się automatycznie.
- Są one odtwarzane w pętli (zazwyczaj, ale można zapobiec zapętleniu).
- Nie odzywają się.
Na szczęście możesz odtworzyć te zachowania, używając elementu <video>
.
- W pliku
index.html
zastąp wiersz wierszem<img>
ciągiem:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>
Element <video>
korzystający z tych atrybutów będzie odtwarzany automatycznie, zapętlony bez końca, bez dźwięku i odtwarzany bezpośrednio (czyli bez pełnego ekranu). To wszystko, co jest zgodne z działaniami oczekiwanymi w przypadku animowanych GIF-ów. 🎉
Określ źródła
Musisz tylko określić źródła wideo. Element <video>
wymaga co najmniej jednego elementu podrzędnego <source>
wskazującego różne pliki wideo, które przeglądarka może wybrać, w zależności od obsługi formatu.
Dodaj w polu <video>
elementy <source>
, które prowadzą do Twoich filmów Short:
<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ę, a potem Pełny ekran .
Proces powinien wyglądać tak samo. Idzie Ci doskonale.
Zweryfikuj w Lighthouse
Po otwarciu opublikowanej witryny:
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Lighthouse.
- Upewnij się, że na liście Kategorie jest zaznaczone pole wyboru Skuteczność.
- Kliknij przycisk Wygeneruj raport.
Wygląda na to, że kontrola „Używaj formatów wideo w treściach animowanych” została zakończona. Super! 💪