Web için temel videolarla resimlerin ötesine geçin

Temel video hakkında bilgi edinin. 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, web'i oluşturmak için resimlerin ötesine geçip videoları da araç kutunuza ekleyebilirsiniz. Araştırmalar, video içeren web sitelerinin etkileşimi ve satışları artırdığını gösteriyor. Bu nedenle, sitelerinize henüz video eklemediyseniz bunu yapmanız muhtemelen sadece zaman meselesidir.

Sitenize eklediğiniz video dosyaları, indirilen en büyük dosyalar olma eğilimindedir. Bu nedenle, dosyaların tüm müşterileriniz için hızlı ve istikrarlı oynatılmaya uygun şekilde oluşturulduğundan emin olmanız son derece önemlidir. Video, etkileşimi ve müşteri memnuniyetini artırabilir ancak oynatılmayan veya oynatma sırasında duraklayan videolar müşterilerin canını sıkabilir. Bu yayında, video yayınlamak için HTML5 <video> etiketinin kullanımına odaklanıldığından akışlı video ele alınmayacaktır.

Haydi başlayalım.

<video> etiketi

Bu açık bir durum, değil mi? Video eklemek için <video> etiketini eklemeniz, bir kaynağa işaret etmeniz ve ardından yola koyulmanız gerekir.

<video src="myVideo.mp4">

Doğru söylüyorsunuz. Web'e video eklemek için en üst düzeyde yapmanız gereken 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 yayınlamayı iyileştirmenin en iyi yolu, tarayıcıya yayınlanan dosyaları optimize etmektir. Bunu yapmak için <source> etiketini kullanın:

<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 dosyaya referans veriyor. Tarayıcı en üstten 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 farklı codec'lerle kaydedilebilir. (Bu konu hakkında daha fazla bilgiyi burada bulabilirsiniz.) Yukarıdaki örnekte, ilk tercih WebM biçimidir (VP8 veya VP9 codec'leriyle kodlanabilir) ve dünya genelindeki kullanıcıların% 78'i tarafından desteklenmektedir (bu makalenin yazıldığı sırada). İkinci seçenek, iOS ve daha yeni Mac'lerde desteklenen mp4'ün H.265 codec'idir. Bu codec'ler daha yenidir ve eski video formatlarıyla aynı kalitede video sunarken veri sıkıştırmasını iyileştirir.

Listemizdeki son seçenek H.264 mp4'tür. Bu biçim, tüm dünyadaki kullanıcıların% 92'sinde destek görse de eski bir biçim olduğundan genellikle WebM veya H.265 videolarından çok daha büyüktür. İki dakikalık bir film için farkı aşağıdaki örnekte görebilirsiniz:

Codec Dosya boyutu
VP8 5,5 MB
VP9 4,2 MB
H.265 5,4 MB
H.264 16,1 MB

Videolarınızı daha iyi yayınlamak için yapabileceğiniz en iyi performans optimizasyonu, daha küçük dosyalar yayınlamaktır. Daha küçük bir video indirildiğinde video oynatma işlemi daha erken başlar ve video arabelleği daha hızlı dolar. Bu sayede video oynatma sırasında daha az takılma yaşanır. Ayrıca, sunucu yükü azalır. Bu da birden fazla video dosyasının artan depolama alanı gereksinimlerini telafi eder.

Önyükleme özelliği

Yerel olarak indirilip depolanan videolar olmadığı sürece videolar oynatılmaya başlayamaz. Önceden yükleme özelliğini kullanarak, sayfa yüklenirken ne kadar videonun indirileceğini kontrol edebilirsiniz. Ön yükleme özelliğinin üç değeri vardır: auto, metadata ve none.

preload='auto'

'auto' kullanılırsa kullanıcı oynat tuşuna basmış olsun veya olmasın videonun tamamı indirilir. Bu sayede, kullanıcı oynat düğmesine basmadan önce video yerel olarak indirildiği için video hızlı bir şekilde oynatılabilir. Veri kullanımı (ve sunucu yükü açısından) açısından bu seçenek yalnızca videonun izlenme olasılığı yüksek olduğunda kullanılmalıdır. Aksi takdirde, videonun tamamının indirilmesi için kullanılan tüm veriler boşa gider.

preload='metadata'

Bu, Chrome ve Safari'de ön yükleme için varsayılan ayardır. 'metadata' kullanıldığı zaman videonun ilk% 3'ü indirilir. Bu yöntem, 'auto' ile aynı sakıncalara sahip olsa da videonun yalnızca% 3'ünün indirilmesi, videonun tamamına kıyasla çok daha düşük bir sunucu/veri kullanımı maliyeti sağlar. Ayrıca videonun bir kısmının yerel olarak depolanması sayesinde video hızlı bir şekilde başlatılabilir.

preload='none'

Bu ayar, en fazla veri tasarrufu sağlar ancak oynat düğmesine basıldığında videonun sıfır kilobaytlık kısmı cihaza yerel olarak önceden yüklenmediği için videonun daha yavaş başlatılmasına neden olur. Mevcut ancak oynatılma olasılığı düşük olan videolar için bu ayar uygundur. Bu, kullanıcı tarayıcısında basit modu etkinleştirdiyse de kullanılabilir.

poster

Video oynatılmadan önce video penceresinin üzerinde gösterilecek bir poster resmi kullanabilirsiniz:

<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
Posteri olmayan videolar başlamadan önce siyah ekran gösterir.
Poster resmi yok

Posteri olmayan videolar başlamadan önce siyah ekran gösterir.

Afiş içeren videolar çok daha ilgi çekicidir.
Poster resmiyle

Afiş içeren videolar çok daha ilgi çekicidir.

Sayfaya siyah kutu yerine bir fotoğraf ekleyerek web sitenizi daha ilgi çekici ve etkileşimli hale getirebilirsiniz. Ancak poster özelliğini kullandığınızda video indirme işlemi başlamadan önce bir resim indirme işlemi eklenir. Bu nedenle, otomatik oynatılan videolara poster eklemekten kaçınabilirsiniz (ek indirme işlemi video indirme işlemini geciktireceğinden).

Oynatma kontrolleri

controls özelliği eklediğinizde oynatma kontrolleri eklenir. Bu bilgiler olmadan müşterileriniz videonuzu başlatamaz veya durduramaz. Kullanıcıların videoyu durdurup duraklatabilmesi, ses seviyesini değiştirebilmesi vb. için videolara bu özelliği eklemeniz gerekir. Arka planda oynatılan veya tekrarlanan videolarda bu özelliği atlayabilirsiniz.

ses kapatıldı

muted özelliği, oynatmanın sessiz bir şekilde başlatılmasına neden olur. Hiçbir kontrol sağlanmazsa oynatma işleminin tamamı boyunca sessiz kalır. Bu amaçla videodan ses parçasını kaldırabilirsiniz. Bu, müşteriye iletilen video dosyasının boyutunu daha da azaltır.

Container'lar ve codec'ler gibi, ses dosyasını kaldırma (ayrıca "ses akışlarını ayırma" olarak da bilinir) da bu makalenin kapsamı dışındadır. Talimatları Medya Manipülasyonu başlıklı makalede bulabilirsiniz.

loop

İçeriği döngü halinde oynatan 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.

Otomatik oynatılan video

Videonuzun hemen oynatılmasını istiyorsanız (ör. arka plan videosu veya animasyonlu GIF gibi döngü halinde oynatılan bir video) autoplay özelliğini ekleyebilirsiniz:

<video src="myVideo.mp4" playsinline 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" playsinline autoplay muted>

Sonuç

Web sitenize video eklemek, müşterileriniz için yeni bir etkileşim alanı ekler. Ancak içeriği doğru şekilde sunmanız, videonun kesintisiz ve takılmadan oynatılmasını sağlamanız önemlidir. <video> etiketinin yerleşik özelliklerini kullanmak, web sitenizi ziyaret eden herkese kusursuz bir video sunmanıza büyük ölçüde yardımcı olabilir.