🚀 Web'de Multimedya: Eklentisiz Özgürlük ve Native Devrim

Selamlar, ben Ovid Game'in teknik mutfağından. Bugün biraz nostaljiyle karışık, modern web'in en büyük kırılma noktalarından birini konuşacağız: HTML Media.

Eskiden web sitelerinde basit bir video izlemek veya bir ses dosyası dinlemek tam bir işkenceydi. Adobe Flash Player, Silverlight veya QuickTime gibi üçüncü taraf eklentiler (plug-ins) olmadan tarayıcılar resmen 'sağır ve dilsizdi'. Bu eklentiler sürekli güncellenmek zorundaydı, ciddi güvenlik açıkları barındırıyordu ve mobil cihazların (özellikle iPhone'un çıkışıyla) pil ömrünü sömürüyordu.

Yerel (Native) Oynatma Felsefesi

HTML5 ile beraber gelen <video> ve <audio> etiketleri, bu eklenti bağımlılığını kökten bitirdi. Felsefe basitti: "Bir tarayıcı, bir resmi (img) nasıl ek bir yazılım olmadan gösterebiliyorsa, videoyu da öyle oynatabilmeli."

Bu durum biz geliştiriciler için devrimdi. Artık medya dosyaları DOM'un (Document Object Model) birinci sınıf vatandaşı haline geldi. Yani bir videoyu CSS ile döndürebilir, üzerine filtreler ekleyebilir veya JavaScript ile saniyesi saniyesine kontrol edebilir hale geldik.

Biz Ovid Game tarafında, efsanevi NFS Underground 2 projemizi tarayıcıya taşırken bu 'native' güçten çok yararlandık. Devasa doku setlerini ve ses paketlerini yönetirken, tarayıcının medya işleme motorunun ne kadar optimize olduğunu bizzat gördük. Eğer tarayıcı bir videoyu düşük gecikmeyle stream edebiliyorsa, biz de oyun varlıklarını aynı verimlilikle yükleyebiliriz demiştik.

Teknik Detaylar: Codec'ler ve Kaynaklar

Medya etiketlerinde en kritik nokta tarayıcı uyumluluğudur. Her tarayıcı her video formatını sevmez. Bu yüzden <source> etiketini kullanarak tarayıcıya seçenek sunarız:

• MP4 (H.264): Evrensel standart, neredeyse her yerde çalışır.
• WebM (VP9): Google'ın açık kaynaklı, yüksek sıkıştırmalı formatı.
• Ogg: Daha çok açık kaynak dünyasının tercihi.

Modern bir implementasyonda, tarayıcı yukarıdan aşağıya listeyi kontrol eder ve 'anladığı' ilk formatı oynatır. Bu, sadece bir 'video oynatmak' değil, ağ trafiğini ve işlemci yükünü optimize etme sanatıdır.

Burada dikkat etmen gereken en önemli özellik controls özniteliğidir. Eğer bunu eklemezsen, tarayıcı varsayılan oynat/durdur butonlarını göstermez. Kendi butonlarını yapmak istersen (bizim oyunlarda UI tasarlarken yaptığımız gibi), JavaScript'teki .play() ve .pause() metodlarını kullanman gerekir.

Unutma; medya dosyaları ağı yorar. Bu yüzden preload="metadata" kullanarak sadece dosya bilgilerini çekebilir veya loading="lazy" prensiplerini medya elementlerine de uyarlayabilirsin.

Sevgiler, Ovid Game Teknik Ekibi ovidgame.com