🚀 HTML5 Video: Dinamik Arayüzler ve Medya Yönetimi

Video etiketinin niteliklerini, tarayıcıların otomatik oynatma politikalarını ve güvenilir kaynak hiyerarşisini öğreniyoruz.

Selam, ben Ovid Game ekibinden. Bugün modern web'in en sevilen ama bazen de en çok baş ağrıtan konularından birine; <video> etiketine dalıyoruz.

Bir zamanlar video oynatmak için taklalar atardık ama artık her şey çok daha 'native'. Web'de video kullanırken sadece dosyayı oraya koymak yetmiyor; kullanıcının internetini, tarayıcısını ve en önemlisi kullanıcı deneyimini düşünmek gerekiyor. Özellikle oyun geliştirirken, örneğin bizim OvidRacer projesinde ana menüde arka planda dönen o akıcı yarış videolarını hazırlarken, tarayıcıların 'otomatik oynatma' (autoplay) politikalarıyla epey ter dökmüştük.

Temel Nitelikler (Attributes)

Bir video etiketini yöneten anahtar kelimeler şunlardır:

  1. controls: Oynat, durdur ve ses gibi kontrolleri tarayıcının kendi arayüzüyle sunar.
  2. autoplay: Video yüklendiği an oynamaya başlar. Kritik Not: Modern tarayıcılar, kullanıcıyı rahatsız etmemek için muted (sessiz) olmadığı sürece autoplay özelliğini genellikle engeller.
  3. loop: Video bittiğinde en başa döner. Arka plan videoları için vazgeçilmezdir.
  4. muted: Videonun sesini varsayılan olarak kapatır.
  5. poster: Video yüklenirken veya oynatılmadan önce gösterilecek kapak fotoğrafı.

Kaynak Hiyerarşisi ve Fallback Mekanizması

Her tarayıcı her video codec'ini (sıkıştırma biçimini) desteklemez. Bu yüzden tek bir src kullanmak yerine, <source> etiketleriyle alternatifler sunarız. Tarayıcı yukarıdan aşağıya bakar, ilk desteklediğini çalıştırır. Eğer hiçbirini çalıştıramazsa, en sona yazdığımız Fallback (Yedek) metni devreye girer.

🚀 Sanal Kodlama Alanı Yükleniyor...

Kod bloğunda gördüğünüz gibi, dosya yollarını assets/movie.mp4 gibi yerel şablonlar üzerinden kurguladık. Gerçek bir projede, videolarınızı CDN üzerinden veya sunucunuzdaki statik klasörden bu şekilde çağırırsınız. Unutmayın, video etiketi içine yazdığınız her <source>, tarayıcıya sunduğunuz bir 'B planı'dır.

Oyun içi sinematiklerde veya web sitenizin 'hero' alanlarında video kullanırken poster özelliğini asla atlamayın; video yüklenene kadar boş bir siyah ekran görmek kullanıcının siteden hemen çıkmasına neden olabilir.

Geliştirmeye devam, Ovid Game Teknik Arşiv ovidgame.com