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

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

Büyük olasılıkla, sitenize eklediğiniz video dosyaları, indirilen en büyük dosyalar olur. 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

Çok bariz görünüyor, 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. En üst düzeyde, web'e video eklemek için tüm ihtiyacınız olan budur. Ancak videonun düzenini ve yayınlanması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 yapmanın yolu <source> etiketini kullanmaktır:

<video>
  <source src="myWebmVideo.webm" type="video/webm">
  <source src="myh265Video.mp4" type="video/mp4">
  <source src="myh264Video.mp4" type="video/mp4">
</video>

Bu metin, üç ayrı kaynak dosyasına referans verir. 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'sidir. 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 video, tüm küresel kullanıcıların% 92'sini destekler, ancak daha eski bir biçimdir ve bu nedenle 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

Videolar indirilip yerel olarak depolanana kadar oynatma işlemi başlatılamaz. Ön 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 düğmesine bassa da basmadan da 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, tam video indirme işlemiyle ilgili tüm veriler israf edilir.

preload='metadata'

Bu, Chrome ve Safari'de ön yükleme için varsayılan ayardır. 'metadata' kullanıldığında 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 şekilde en fazla veri kaydedilir ancak ayarda belirtildiği gibi videonun sıfır kilobayt değeri cihaza yerel olarak önceden yüklendiğinden oynatma tuşuna basıldığında videonun başlatılması yavaşlar. Mevcut olan ancak oynatılma olasılığı düşük videolar için bu uygun ayardır. Bu, kullanıcı tarayıcısında basit modu etkinleştirdiyse de kullanılabilir.

poster

Video oynatılmaya başlamadan önce video penceresinde gösterilen 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 plan veya döngü videoları için bu özelliği çıkarabilirsiniz.

ses kapatıldı

muted özelliği, oynatmanın sessiz bir şekilde başlatılmasına neden olur. Herhangi bir kontrol sağlanmazsa oynatma boyunca ses kapalı 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 video oynatma

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.