Temel videoları öğrenin. Etkileşimi artırın.
Web sitenize video eklemeyi mi düşünüyorsunuz? Cihazlar ve ağ bağlantıları daha hızlı ve daha güçlü hale geldikçe, görüntülerin ötesine geçebilir ve web'i oluşturmak için gerekli teknik araçlarınıza video ekleyebilirsiniz. Araştırmalar, video içeren web sitelerinin daha yüksek etkileşim ve satış sağladığını gösteriyor. Dolayısıyla, sitelerinize henüz video eklememiş olsanız bile, eklemenin yapılması uzun sürer.
Büyük olasılıkla, sitenize eklediğiniz video dosyaları, indirilen en büyük dosyalar olacaktır. Bu nedenle, dosyaların tüm müşterileriniz için hızlı ve dengeli bir şekilde oynatılabilmesi amacıyla oluşturulmuş olması son derece önemlidir.
Video, etkileşimi ve müşteri memnuniyetini artırsa da oynatılmayan veya
oynatma sırasında duran bir video müşterinin hayal kırıklığına uğramasına neden olabilir.
Bu yayın, video yayınlamak için HTML5 <video> etiketinin kullanımına odaklandığından video akışını kapsamaz.
Artık başlayabiliriz!
<video> etiketi
Çok açık, değil mi? Video eklemek için <video> etiketini ekleyip bir kaynağın üzerine gelmeniz gerekir. Sonrasında yarışa hazır olursunuz.
<video src="myVideo.mp4">
Doğru bildiniz. Özetle, web'e video eklemek için ihtiyacınız olan tek şey budur. Ancak videonun düzenini ve yayınını iyileştirmek için video etiketine ekleyebileceğiniz birçok özellik vardır.
<source> etiketi
Web'de video sunumunu iyileştirmenin en iyi yolu, muhtemelen tarayıcıya gönderilen dosyaları optimize etmektir. Bunu yapmak için <source> etiketini kullanabilirsiniz:
<video>
<source src="myWebmVideo.webm" type="video/webm">
<source src="myh265Video.mp4" type="video/mp4">
<source src="myh264Video.mp4" type="video/mp4">
</video>
Bu, üç ayrı kaynak dosyasına başvuruda bulunur. Tarayıcı en üstte başlar ve kullanabileceği ilk biçimi ve codec'i seçer. Video dünyasında, genellikle kapsayıcı olarak adlandırılan dosya biçimi, her biri farklı özelliklere sahip olan farklı codec'lerle kaydedilebilir. (Bu konuyla ilgili daha fazla bilgiyi burada bulabilirsiniz.) Yukarıdaki örnekte ilk seçenek WebM biçimidir (VP8 veya VP9 codec'leriyle kodlanabilir) ve küresel kullanıcıların% 78'i tarafından desteklenir (yazım sırasında). İkinci seçenek, iOS ve daha yeni Mac'lerde desteklenen mp4 H.265 codec'idir. Bu codec'ler daha yenidir ve veri sıkıştırmayı iyileştirirken eski video biçimleriyle aynı kalitede video sunar.
Listemizdeki son seçenek, tüm dünyadaki kullanıcıların% 92'sini destekleyen H.264 mp4'tür, ancak daha eski bir biçimdir ve bu nedenle genellikle WebM veya H.265 videolarından çok daha büyüktür. Bir örnekte, iki dakikalık bir filmin farkını görebilirsiniz:
| Codec | Dosya boyutu |
|---|---|
| VP8 | 5,5 MB |
| VP9 | 4,2 MB |
| H.265 | 5,4 MB |
| H.264 | 16,1 MB |
Daha küçük dosyalar yayınlamak, videolarınızı daha iyi sunmak için yapabileceğiniz en iyi performans optimizasyonudur. Daha küçük bir video indirildiğinde video oynatma daha erken gerçekleşir ve video arabelleği daha hızlı dolar. Bu da video oynatılırken daha az duraklatılmasına neden olur. Ayrıca, sunucu yükü azalır ve bu da birden fazla video dosyasının artan depolama alanı gereksinimlerini karşılar.
Preload özelliği
Bir miktar video indirilip yerel olarak depolanana kadar videolar oynatılmaya başlayamaz. Preload özelliğini kullanarak, sayfa yüklemesinde ne kadar videonun indirileceğini kontrol edebilirsiniz. Önceden yükleme özelliği için üç değer vardır:
auto, metadata ve none.
preload='auto'
'auto' kullanılırsa kullanıcı oynat düğmesine basıp basmadığına bakılmaksızın tüm video indirilir. Bu şekilde, video kullanıcı oynat düğmesine basmadan önce yerel olarak indirildiği için hızlı video oynatılabilir. Veri kullanımı (ve sunucu yükü açısından) açısından, bu yalnızca videonun izleniyor olma olasılığı son derece yüksek olduğunda kullanılmalıdır. Aksi takdirde, videonun tamamının indirilmesiyle ilgili tüm veriler kaybedilir.
preload='metadata'
Bu, Chrome ve Safari'de önceden yükleme için varsayılan ayardır. 'metadata' kullanıldığında videonun ilk% 3'ü indirilir. Bu durumda 'auto' ile ilgili uyarılar paylaşılsa da, videonun yalnızca% 3'ünün indirilmesi, tüm videodan çok daha küçük bir sunucu/veri kullanım maliyetine neden olur. Aynı zamanda, videonun bir bölümünün hızlı video başlatma için yerel olarak depolanmasını sağlar.
preload='none'
Bu şekilde en yüksek miktarda veri kurtarılır. Ancak ayarda belirtildiği gibi cihaza yerel olarak sıfır kilobaytlık önceden yüklenmiş video olduğundan oynatma tuşuna basıldığında videonun daha yavaş başlatılmasına neden olur. Mevcut olan ancak oynatılma olasılığı düşük olan videolar için bu ayar uygun ayardır. Bu, kullanıcı tarayıcısında Basit modu etkinleştirdiğinde de kullanılabilir.
poster
Video oynatılmaya başlamadan önce video penceresinin üzerinde görüntülenecek bir poster resmi ekleyebilirsiniz:
<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
Afişsiz bir video başlamadan önce siyah ekran görünüyor.
Posterli bir video çok daha ilgi çekicidir.
Sayfaya siyah kutu yerine bir fotoğraf ekleyerek web sitenizi daha ilgi çekici ve etkileşimli hale getirirsiniz. Ancak poster özelliği kullanıldığında video indirme işlemi başlamadan önce bir resim indirme işlemi eklenir. Bu nedenle, otomatik oynatılan videolar için poster eklemekten kaçınabilirsiniz (ek indirme işlemi videonun indirilmesini geciktireceğinden).
Oynatma denetimleri
controls özelliği eklendiğinde oynatma kontrolleri de eklenir. Bunlar olmadan müşterileriniz videonuzu
başlatamaz veya durduramaz. Kullanıcıların durdurup duraklatabilmesi, ses düzeyini değiştirebilmesi ve diğer işlemleri
bu şekilde devam edebilmesi için videolara bunu eklemeniz gerekir. Arka plan veya döngü şeklinde videolar için bu özelliği çıkarabilirsiniz.
ses kapatıldı
muted özelliği, oynatmanın sessiz durumda başlamasını sağlar. Hiçbir kontrol sağlanmazsa ses, oynatmanın tamamı boyunca kapalı kalır. Bilerek yapmadıysanız ses parçasını videodan kaldırmak mantıklı olabilir. Bu da müşteriye teslim edilen video dosyasının boyutunu daha da küçültür.
Kapsayıcılar ve codec'lerde olduğu gibi, tekilleştirme olarak da adlandırılan ses dosyasının kaldırılması da bu makalenin kapsamı dışındadır. Talimatları Medya Manipülasyonuyla İlgili Yardımcı Kısa Bilgiler'de bulabilirsiniz.
loop
İçeriği döngüye alan bir video (animasyonlu GIF gibi) yayınlamak için loop özelliğini ekleyin. Video dosyaları genellikle animasyonlu GIF'lerden çok daha küçük olduğundan bu mekanizma, GIF'lerinizi video dosyalarıyla değiştirmenize olanak tanır.
Video otomatik oynatılıyor
Videonuzun hemen oynatılmasını istiyorsanız (örneğin, arka plan videosu veya animasyonlu GIF gibi döngü oluşturan bir video) autoplay özelliğini ekleyebilirsiniz:
<video src="myVideo.mp4" autoplay>
Bununla birlikte, bir videonun mobil tarayıcılarda otomatik olarak oynatılması için muted özelliğinin de eklenmesi gerekir:
<video src="myVideo.mp4" autoplay muted>
Sonuç
Web sitenize video eklemek müşterilerinize yeni bir etkileşim alanı ekleyecektir ancak video oynatmanın kesintisiz ve kesintiler olmadan olmasını sağlayarak içeriği doğru şekilde sunmanız önemlidir. <video> etiketinin yerleşik özelliklerini kullanmak, web sitenizi ziyaret eden herkese kusursuz videolar sunmanıza çok yardımcı olabilir.