Web Sitesinde Video: Ne Zaman İşe Yarar, Ne Zaman Yavaşlatır

Video, sayfada yazıyla anlatması zor olan şeyi anlatır: bir kurulumun nasıl yapıldığını, bir arayüzün tıklandığında nasıl davrandığını, bir işin gerçekte neye benzediğini. Bunun dışındaki kullanımların çoğu süstür ve bedelini sayfanın açılma süresi öder. Karar iki soruya iniyor: göstereceğiniz şey hareket taşıyor mu, ve ziyaretçi onu izlemeyi kendisi mi seçti?

Videoyu hangi durumda koyarsınız

Hareket taşıyan içerik videoyu hak eder. Bir ürünün kutudan çıkışı, bir formun doldurulma akışı, bir makinenin çalışması, montaj sırası. Bunları üç ekran görüntüsü ve dört paragrafla anlatmaya çalışmak hem sizi hem okuyucuyu yorar.

Hareket taşımayan içerik videoyu hak etmez. Şirket tanıtımı, değerler anlatısı, ofiste yürüyen insanların stok görüntüsü. Bunlar sayfaya ağırlık ekler, bilgi eklemez. Aynı bütçeyi düzgün bir ürün fotoğrafına ve dürüst yazılmış bir açıklamaya verin.

İnsan yüzü gören videoların daha çok izlendiği doğru. Ama izlenme kendi başına bir hedef değil. Videonun sonunda kullanıcının yapması gereken bir şey yoksa izlenme süresi sadece bir grafiktir.

Otomatik oynatmanın faturası

Web için sıkıştırılmış 1080p bir görüntü kabaca 2 Mbit/sn ister. On saniyelik bir arka plan videosu bu bitrate'te 20 megabit, yani 2,5 megabayt eder. Aynı sayfadaki iyi sıkıştırılmış bir kapak görselini 200 kilobayt civarında tutabilirsiniz. Yani otomatik oynayan kısa bir hero videosu, yerine geçtiği görselin on katından fazlasına mal oluyor (arka planda dönüp duran videoları genelde gereksiz buluyorum).

Bunun görünür sonucu ilk boyama süresinde çıkar. Hero alanına video koyduğunuzda tarayıcı önce poster görselini basar, hemen ardından video akışını çekmeye başlar ve aynı anda inen CSS ile yazı tipleri bant genişliği için sırada bekler. Masaüstü fiberde fark etmezsiniz. Şehirlerarası yolda 4G ile açan kullanıcı fark eder.

Gömme işini doğru kurmak

Kendi barındırdığınız videoda birkaç öznitelik pazarlık konusu değil:

<video src="tanitim.mp4" poster="tanitim.jpg" preload="none" muted playsinline controls></video>

poster yoksa kullanıcı siyah bir dikdörtgen görür. preload="none" yoksa tarayıcı, kimse oynat demeden dosyayı indirmeye başlar. playsinline yoksa iOS videoyu tam ekrana alır ve kullanıcı sayfadan kopar. Otomatik başlatacaksanız muted zorunlu, çünkü sesli videoyu hiçbir mobil tarayıcı kendiliğinden oynatmaz.

YouTube gömüyorsanız iframe'i doğrudan sayfaya yerleştirmeyin. Kimsenin oynatmadığı boş bir gömme bile birkaç yüz kilobayt betik ve bir dizi çerez getirir. Yerine kapak görselini basın, tıklandığında iframe'i oluşturun. Kapak görseli ve tek bir tıklama dinleyicisinden ibaret bir iş.

Altyazı isteğe bağlı değil

Video izleyicilerinin büyük kısmı sesi açmıyor. Sadece sesle verilen bilgi, altyazı yoksa hiç verilmemiş sayılır. <track kind="captions"> ile bir VTT dosyası bağlamak yarım saatlik iştir, üstelik aynı metni sayfaya döküm olarak koyduğunuzda videonun içeriği arama tarafında da bir karşılık bulur.

Yalnızca görüntüyle anlatılan bir adım varsa onu da yazıya geçirin. Ekran okuyucu kullanan biri için "burada görüldüğü gibi" cümlesi hiçbir şey taşımaz.

Ölçmeyi izlenme sayısından çıkarın

Kaç kez oynatıldığı size neredeyse hiçbir şey söylemez. İki ölçü işe yarar: videoyu sonuna kadar izleyenlerin oranı ve videoyu izleyenlerle izlemeyenlerin aynı sayfadaki dönüşüm farkı. Bir üçüncüsü ise bu ikisini birden iptal edebilir, o yüzden ayrı tutun: videoyu ekledikten sonra sayfanın açılma süresi. Sayfa iki saniye yavaşladıysa video ne kadar iyi olursa olsun toplamda kaybediyorsunuzdur.