Bu codelab'de, animasyonlu bir GIF'i videosunu izleyin.
Önce ölçüm yapın
Öncelikle web sitesinin performansını ölçün:
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından,
Tam ekran
.
- Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Lighthouse sekmesini tıklayın.
- Kategoriler listesinde Performans onay kutusunun seçili olduğundan emin olun.
- Rapor oluştur düğmesini tıklayın.
İşiniz bittiğinde Lighthouse'un GIF'i "Animasyonlu içerik için video biçimleri kullanma" denetli.
FFmpeg al
GIF'leri birkaç şekilde videoya dönüştürebilirsiniz: bu kılavuzda kullanılan FFmpeg. Glitch sanal makinesinde zaten yüklü. ve isterseniz uygulamanıza yüklemek için bu talimatları yerel makine de faydalı olabilir.
Konsolu aç
FFmpeg'in yüklü ve çalışır durumda olduğunu bir kez daha kontrol edin:
- Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
- Terminal'i tıklayın (not: Terminal düğmesi görünmüyorsa Tam Ekran seçeneğini kullanmanız gerekebilir).
- Konsolda şu komutu çalıştırın:
which ffmpeg
Şu şekilde bir dosya yolu alırsınız:
/usr/bin/ffmpeg
GIF'i video olarak değiştirin
- Konsolda, görseller dizinine girmek için
cd images
komutunu çalıştırın. - İçeriği görmek için
ls
komutunu çalıştırın.
Aşağıdakine benzer bir tablo görürsünüz:
$ ls
cat-herd.gif
- Konsolda şu komutu çalıştırın:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4
Bu işlem, FFmpeg'e -i
işaretiyle belirtilen girişi
cat-herd.gif dosyasını açıp cat-herd.mp4 adlı bir videoya dönüştürebilirsiniz. Bu,
ikincisi çalıştırılacak. Komut tamamlandığında tekrar ls
yazabilirsiniz.
ve şu iki dosyayı görürsünüz:
$ ls
cat-herd.gif cat-herd.mp4
WebM videoları oluşturun
MP4, 1999 yılından beri piyasada olsa da WebM, günümüzde kullanılan
ilk olarak 2010'da piyasaya sürüldü. WebM videoları, MP4 videolardan çok daha küçük olabilir.
her ikisini de oluşturmak mantıklı. Neyse ki <video>
öğesi sayesinde
birden fazla kaynak ekleyin. Böylece, bir tarayıcı WebM'yi desteklemiyorsa
MP4'e dokunun.
- Konsolda şu komutu çalıştırın:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
- Dosya boyutlarını kontrol etmek için şu komutu çalıştırın:
ls -lh
Bir GIF'iniz ve iki videonuz olmalıdır:
$ 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
Orijinal GIF'in 3, 7 M, MP4 versiyonunun 551K ve WebM sürümü yalnızca 341K'dır. Bu muazzam bir tasarruf!
GIF efektini yeniden oluşturmak için HTML'yi güncelleyin
Animasyonlu GIF'lerin videolarda taklit etmesi gereken üç temel özelliği vardır:
- Otomatik olarak oynatılırlar.
- Döngüler sürekli olarak döngüye girer (genellikle ancak döngüyü önlemek mümkündür).
- Sessizdirler.
Neyse ki <video>
öğesini kullanarak bu davranışları yeniden oluşturabilirsiniz.
index.html
dosyasında<img>
içeren satırı şununla değiştirin:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>
Bu özellikleri kullanan bir <video>
öğesi otomatik olarak oynatılır, döngü
sonsuza kadar, hiç ses çalmaz ve satır içinde (yani tam ekranda değil) oynatırsınız.
animasyonlu GIF'lerden beklenen davranışlar. 🎉
Kaynaklarınızı belirtin
Tek yapmanız gereken video kaynaklarınızı belirtmektir. <video>
öğesi için
farklı video dosyalarına işaret eden bir veya daha fazla <source>
alt öğesi
tarayıcı, biçim desteğine bağlı olarak arasından seçim yapabilir.
<video>
öğesini, kedi yavrusu videolarınıza bağlantı veren <source>
öğeleriyle güncelleyin:
<video autoplay loop muted playsinline>
<source src="/images/cat-herd.webm" type="video/webm">
<source src="/images/cat-herd.mp4" type="video/mp4">
</video>
Önizleme
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından,
Tam ekran
.
Deneyim aynı şekilde görünmelidir. Şu ana kadar her şey yolunda.
Lighthouse ile doğrulama
Canlı site açıkken:
- Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Lighthouse sekmesini tıklayın.
- Kategoriler listesinde Performans onay kutusunun seçili olduğundan emin olun.
- Rapor oluştur düğmesini tıklayın.
"Animasyonlu içerik için video biçimlerini kullanın" denetim şimdi pas geçti! Harika! 💪