Önceki modülde, yaşam döngüsü boyunca Resim reklamlar, web'de yaygın olarak kullanılan ve tüketilebilecek bant genişliğinin yüksek olması, reklamın optimize edilmesine ve kullanıcının dikkate alacağız.
Bununla birlikte, web'de yaygın olarak görülen tek medya türü resimler değildir. Videolar
web sayfalarında sıklıkla kullanılan diğer bir popüler medya türüdür. Bu proje yönetimi metodolojilerinden
önce <video>
dönüşüm hunisinin nasıl
öğesi çalışır.
Video kaynak dosyaları
Medya dosyalarıyla çalışırken, işletim sisteminizde tanıdığınız dosya
(.mp4
, .webm
ve diğerleri) kapsayıcı olarak adlandırılır. Bir kapsayıcı,
veya daha fazla akış sunar. Çoğu durumda bu video ve ses akışıdır.
Her bir akışı codec kullanarak sıkıştırabilirsiniz. Örneğin, video.webm
VP9 kullanılarak sıkıştırılmış bir video akışı ve bir ses içeren WebM kapsayıcısı
Vorbis kullanılarak sıkıştırılan akış.
Container'lar ve codec'ler arasındaki farkı anlamak önemlidir, çünkü medya dosyalarınızı, çok daha az bant genişliği kullanarak sıkıştırmanıza yardımcı olur. Bu da genel sayfa yüklenme sürelerinin azalmasına neden olur. Ayrıca, çalışmalarınızın sayfanın kullanıcı odaklı bir metrik olan Largest Contentful Paint (LCP) ve üç Core Web Vitals'tan biri olmalıdır.
Video dosyalarını sıkıştırmanın bir yolu FFmpeg kullanmaktır:
ffmpeg -i input.mov output.webm
Bir önceki komut (FFmpeg kullanılırken ne kadar basit olsa da)
input.mov
dosyası oluşturur ve varsayılan FFmpeg'i kullanarak output.webm
dosyası çıkarır.
seçenekleri vardır. Önceki komut, tüm video videolarında çalışan daha küçük bir video dosyası
yardımcı olabilir. Video veya FFmpeg'in sunduğu ses seçenekleri üzerinde küçük değişiklikler yapmak,
bir videonun dosya boyutunu daha da küçültmenize yardımcı olur. Örneğin projenin
zamanlamasıyla ilgili
GIF yerine <video>
öğesi kullanıyorsanız ses parçasını kaldırmanız gerekir:
ffmpeg -i input.mov -an output.webm
Daha ayrıntılı ince ayar yapmak isterseniz FFmpeg, -crf
kullanarak değişken bit hızı kodlaması
kullanmadan videoları sıkıştırmak. -crf
, anlamına gelir.
Sabit Hız Faktörü. Bu ayar, etki düzeyini belirleyen
ve bunu belirli bir aralıktaki bir tam sayı kabul ederek yapar.
H.264 ve VP9 gibi codec'ler -crf
işaretini destekler ancak kullanımı şunlara bağlıdır:
yardımcı olur. Daha fazla bilgi için
videoları H.264'te kodlamayı ve videoları otomatik olarak kodlama sırasında
VP9
Birden fazla biçim
Video dosyalarıyla çalışırken birden fazla biçim belirtmek yedek olarak çalışır tarayıcılarla uyumludur.
<video>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
Tüm modern tarayıcılar H.264 codec'ini desteklediğinden, MP4 yedek olarak kullanabilirsiniz. WebM sürümü daha yeni AV1 codec'ini kullanabilir. henüz yaygın olarak desteklenmeyen veya önceki VP9 codec'ini AV1'den daha iyi desteklenir ancak genellikle AV1 kadar sıkıştırmaz.
poster
özelliği
Videonun poster resmi, <video>
öğesindeki poster
özelliği kullanılarak eklenir.
öğesi oluşturun. Bu öğe, oynatmadan önce video içeriklerinin ne
başlatıldı:
<video poster="poster.jpg">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
Otomatik Oynatma
HTTP Arşivi'ne göre web'deki videoların% 20'sinde
autoplay
özelliği. autoplay
, bir videonun oynatılması gerektiğinde kullanılır
anında (örneğin, video arka planı olarak veya video URL'si yerine
animasyonlu GIF'ler seçeneğini de kullanabilirsiniz.
Animasyonlu GIF'ler, özellikle de birden fazla kare içeren resimlerde çok büyük olabilir
karmaşık ayrıntılara sahip. Animasyonlu GIF'lerde çok sayıda dosya yer alır.
megabayt veri, yani bant genişliğinin daha uygun şekilde harcanmasına yol açabilir,
gözden geçirin. Animasyonlu resim biçimlerinden genellikle
Bunun nedeni, bu tür medyaların <video>
eşdeğerleri için çok daha verimli olmasıdır.
Web siteniz için otomatik video oynatma gerekiyorsa
autoplay
özelliği doğrudan <video>
öğesinde:
<!-- This will automatically play a video, but
it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
poster
özelliğini Intersection Observer API ile birleştirerek
Sayfanızı yalnızca videolar görüntü alanına girildikten sonra indirilecek şekilde yapılandırın.
poster
resmi, ilk fotoğraftaki gibi düşük kaliteli bir resim yer tutucusu olabilir.
belirir. Video görüntü alanında göründüğünde tarayıcı
video indirilir. Bu,
ilk görüntü alanıdır. Olumsuz açıdan, autoplay
için poster
resmi kullanırken,
kullanıcılarınıza, video kaldırılana kadar yalnızca kısa bir süre gösterilecek bir resim
yüklenir ve çalmaya başlar.
Kullanıcı tarafından başlatılan oynatma
Genelde tarayıcı, bir video dosyasını HTML kodu anında indirmeye başlar
ayrıştırıcı, <video>
öğesini keşfeder. <video>
Kullanıcı oynatmayı başlatırsa videonun indirilmeye başlanmasını muhtemelen
kullanıcı etkileşimde bulunana kadar.
<video>
kullanarak video kaynakları için indirilenleri etkileyebilirsiniz.
öğesinin preload
özelliği:
preload="none"
politikasının ayarlanması, tarayıcıya video içeriklerinin hiçbirinin olmadığını bildirir önceden yüklenmesi gerekir.preload="metadata"
ayarlandığında yalnızca videonun meta verileri (ör. video meta verileri) getirilir. muhtemelen başka kısa bilgiler de sunar.
Yüklüyorsanız en çok tercih edilen durum preload="none"
kurulumudur
Kullanıcıların oynatmaya başlaması gereken videolar.
Bu durumda poster
resmi ekleyerek kullanıcı deneyimini iyileştirebilirsiniz.
Bu, kullanıcıya videonun içeriği hakkında bilgi verir. Ayrıca,
poster resmi LCP öğenizdir. poster
resminin
<link rel="preload">
ipucunu kullanarak öncelik
fetchpriority="high"
:
<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">
Yerleştirmeler
Video içeriğini optimize etme ve sunmanın tüm karmaşıklığı düşünüldüğünde, sorunu, bu tür özel video hizmetlerine YouTube veya Vimeo gibi. Bu tür hizmetler, videoların yayınlanmasını sizin için optimize eder üçüncü taraf bir hizmetten video yerleştirmek çünkü yerleşik video oynatıcılar çoğu zaman çok daha fazla tercih edebilirsiniz.
Bu gerçeklik göz önüne alındığında, üçüncü taraflara ait video yerleştirmeleri sayfa içeriğini önemli ölçüde etkileyebilir. bazı yolları da görmüştük. HTTP Arşivi'ne göre YouTube yerleştirmeleri ana iş parçacığını engeller. medyan web sitesi için 1,7 saniyeden uzun bir süre boyunca. Ana ileti dizisi şunun için engelleniyor: uzun süre çalışması, bir kullanıcı deneyimini olumsuz yönde etkileyebilecek sayfasındaki Sonraki Boyamayla Etkileşim (INP) bölümüne gidin. Ama elinizden gelenin en iyisini yerleşik öğeyi ilk sayfa yükleme sırasında hemen yüklememeyi, bunun yerine yerleştirme için, yerleştirilmiş gerçek video ile değiştirilen bir yer tutucu oluşturun Kullanıcı etkileşimde bulunduğunda.
Video demoları
Bilginizi test etme
<source>
öğelerinin bir
üst <video>
öğesi belirlemez
indirilebilecek video kaynağıdır.
<video>
öğesinin poster
özelliği
LCP adayı olarak kabul edilir.
Sıradaki: Web yazı tiplerini optimize edin
Belirli kaynak türlerini optimize etme kapsamamızın bir sonraki konusu yazı tipleridir. Web sitenizin yazı tiplerini optimize etme genellikle gözden kaçan bir konudur, ancak web sitenizin genel yükleme hızı üzerinde önemli bir etkisi vardır ve LCP ve Cumulative Layout Shift (CLS) olarak değiştirin.