GIF'leri videoyla değiştirin

Rob Dodson

Bu codelab'de, animasyonlu bir GIF'i videosunu izleyin.

Önce ölçüm yapın

Öncelikle web sitesinin performansını ölçün:

  1. Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran tam ekran.
  2. Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
  3. Lighthouse sekmesini tıklayın.
  4. Kategoriler listesinde Performans onay kutusunun seçili olduğundan emin olun.
  5. 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:

  1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
  2. Terminal'i tıklayın (not: Terminal düğmesi görünmüyorsa Tam Ekran seçeneğini kullanmanız gerekebilir).
  3. 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 tam ekran.

Deneyim aynı şekilde görünmelidir. Şu ana kadar her şey yolunda.

Lighthouse ile doğrulama

Canlı site açıkken:

  1. Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
  2. Lighthouse sekmesini tıklayın.
  3. Kategoriler listesinde Performans onay kutusunun seçili olduğundan emin olun.
  4. Rapor oluştur düğmesini tıklayın.

"Animasyonlu içerik için video biçimlerini kullanın" denetim şimdi pas geçti! Harika! 💪