Flash Player’ın uzun yıllar boyunca web’deki multimedya içeriğinin omurgasını oluşturduğu günler geride kaldı. Adobe Flash, etkileşimli animasyonlar, oyunlar ve en önemlisi ses ve video oynatma için standart bir araçtı. Ancak, güvenlik açıkları, performans sorunları, mobil cihaz uyumsuzluğu ve açık web standartlarına olan eğilim, Flash’ın sonunu getirdi. 2020 sonunda resmi desteğin kesilmesiyle, web geliştiricileri ses ve video dosyalarını doğrudan tarayıcılar aracılığıyla oynatmanın yeni ve modern yollarını benimsemek zorunda kaldı. Bu değişim, HTML5’in <audio> ve <video> etiketlerinin yükselişini beraberinde getirdi. Bu makale, Flash sonrası modern web’de ses ve video içeriğinin sayfaya nasıl gömüldüğünü, özellikle HTML5’in yerel medya oynatma yeteneklerini ve controls, autoplay, loop gibi önemli özelliklerini detaylı bir şekilde inceleyecektir.
The html5 multimedia revolution
Flash Player’ın devrinin kapanmasıyla birlikte, web standartları evriminde önemli bir boşluk doğdu. Bu boşluk, Dünya Çapında Ağ Konsorsiyumu (W3C) tarafından geliştirilen HTML5 ile başarıyla dolduruldu. HTML5, tarayıcıların herhangi bir üçüncü taraf eklentiye ihtiyaç duymadan ses ve video içeriğini doğrudan oynatmasına olanak tanıyan yerel destek sunarak multimedya için yeni bir çağ başlattı. Bu yenilik, hem geliştiricilere daha basit ve standartlara uygun bir yöntem sunmuş hem de son kullanıcılara daha güvenli, daha performanslı ve mobil uyumlu bir deneyim sağlamıştır. HTML5 medya elemanları, cihazın donanım hızlandırmasını kullanarak daha akıcı oynatma sunar ve tarayıcılar arası uyumluluğu artırır.
Modern web’de ses ve video gömmek için temel etiketler <audio> ve <video>‘dur. Bu etiketler, medya dosyasının konumunu belirtmek için src özelliğini kullanabilir veya farklı tarayıcı ve cihazlarda en iyi uyumluluğu sağlamak amacıyla çeşitli formatlarda medya dosyaları sunmak için <source> etiketini içeren bir yapıyı benimseyebilirler. Örneğin, bir video için MP4, WebM ve Ogg formatlarını sunmak, tarayıcının desteklediği ilk formatı seçmesini sağlar ve böylece geniş bir erişilebilirlik garantilenir. Bu yaklaşım, medya içeriğinin mümkün olan en geniş kitleye ulaşmasını sağlamanın anahtarıdır.
Embedding audio with the audio tag
HTML5’in <audio> etiketi, web sayfalarına ses dosyalarını kolayca dahil etmek için tasarlanmıştır. Bu etiket sayesinde kullanıcılar, web sitesinden ayrılmadan doğrudan tarayıcılarında müzik, podcast veya diğer sesli içerikleri dinleyebilirler. <audio> etiketinin temel kullanımı oldukça basittir ve birçok isteğe bağlı nitelikle özelleştirilebilir.
En temel kullanımda, ses dosyasının yolunu doğrudan src niteliği ile belirtmek yeterlidir. Ancak, tarayıcılar arası uyumluluğu artırmak için <source> etiketi ile birden fazla format sunulması önerilir. Bu, tarayıcının desteklediği ilk ses formatını oynatmasını sağlar.
Medya oynatıcının görünürlüğünü ve etkileşimini kontrol eden önemli nitelikler şunlardır:
controls: Bu nitelik mevcut olduğunda, tarayıcı ses çalma/duraklatma düğmesi, ses seviyesi kontrolü, ilerleme çubuğu gibi standart kontrolleri görüntüler. Kullanıcının medya üzerindeki kontrolünü sağlar.autoplay: Sayfa yüklendiğinde sesin otomatik olarak çalmaya başlamasını sağlar. Ancak, modern tarayıcılar kullanıcı deneyimini iyileştirmek ve istenmeyen sesleri engellemek amacıyla genellikle bu özelliğin otomatik ses çalmasını engeller veya kullanıcıdan etkileşim bekler (örneğin, sayfanın bir kez tıklanması).loop: Ses dosyasının sona erdiğinde otomatik olarak baştan başlamasını sağlar. Arka plan müziği veya tekrar eden ses efektleri için kullanışlıdır.
İşte bir örnek:
<audio controls autoplay loop>
<source src="sesim.mp3" type="audio/mpeg">
<source src="sesim.ogg" type="audio/ogg">
<p>Tarayıcınız ses etiketini desteklemiyor.</p>
</audio>
Yukarıdaki örnekte, tarayıcı önce “sesim.mp3” dosyasını deneyecek, eğer desteklemezse “sesim.ogg” dosyasını deneyecektir. Kullanıcılar oynatma/duraklatma, ses seviyesi gibi kontrolleri görecek, ses sayfa yüklendiğinde otomatik olarak başlayacak ve sona erdiğinde tekrarlanacaktır. Eğer hiçbir format desteklenmezse, paragraf içindeki mesaj görüntülenecektir.
Embedding video with the video tag
<video> etiketi, web sayfalarına Flash Player gibi eklentilere gerek kalmadan video içeriği eklemenin modern ve standart yoludur. Tıpkı <audio> etiketi gibi, <video> de medya dosyalarının yolunu belirtmek için src niteliğini kullanır veya çoklu format desteği için <source> etiketinden yararlanır.
<video> etiketi, ses etiketindeki controls, autoplay ve loop niteliklerine ek olarak videoya özel bazı nitelikler de sunar:
controls: Bu nitelik, kullanıcının videoyu oynatması, duraklatması, ses seviyesini ayarlaması, tam ekran moduna geçmesi ve ilerleme çubuğunu kullanması için tarayıcının varsayılan video kontrollerini görüntülemesini sağlar.autoplay: Video sayfa yüklendiğinde otomatik olarak oynatmaya başlar. Sesli medyada olduğu gibi, bu özellik tarayıcılar tarafından kısıtlanabilir veya kullanıcı etkileşimi gerektirebilir. Genellikle, sesin kapatıldığı (mutedniteliği ile) otomatik oynatma daha kabul edilebilir durumdadır.loop: Video sona erdiğinde otomatik olarak baştan başlar ve sürekli tekrarlar. Arka plan videoları veya kısa animasyonlar için idealdir.widthveheight: Videonun piksel cinsinden genişliğini ve yüksekliğini belirler. Bu, video yüklenmeden önce sayfa düzeninin kaymasını önlemeye yardımcı olur.poster: Video yüklenirken veya kullanıcının oynat düğmesine basmasını beklerken görüntülenecek bir resmin URL’sini belirtir. Bu, videonun içeriği hakkında bir önizleme sunar.muted: Video oynatmaya başladığında sesin kapalı olmasını sağlar. Otomatik oynatma ile birlikte kullanıldığında tarayıcı kısıtlamalarını aşmaya yardımcı olabilir.
İşte bir örnek:
<video width="640" height="360" controls autoplay loop poster="videoposter.jpg" muted>
<source src="videom.mp4" type="video/mp4">
<source src="videom.webm" type="video/webm">
<p>Tarayıcınız video etiketini desteklemiyor.</p>
</video>
Bu örnekte, video 640×360 piksel boyutunda olacak, kontrolleri gösterecek, otomatik olarak başlayacak (sesi kapalı), sürekli döngü yapacak ve yüklenirken “videoposter.jpg” resmini gösterecektir. Yine, tarayıcı desteklediği ilk formatı seçecek, eğer hiçbirini desteklemezse yedek metin görüntülenecektir.
“`html
HTML5’in <audio> ve <video> etiketleri, Flash Player’ın web’deki multimedya hegemonyasına son veren ve modern web’in temel taşlarından biri haline gelen güçlü, standart tabanlı çözümlerdir. Bu etiketler sayesinde, geliştiriciler üçüncü taraf eklentilere bağımlılık olmadan ses ve video içeriklerini doğrudan HTML içine gömebilirler. controls, autoplay ve loop gibi nitelikler, geliştiricilere medya oynatma üzerinde kapsamlı bir kontrol sağlarken, aynı zamanda son kullanıcıya özelleştirilebilir ve erişilebilir bir deneyim sunar. Tarayıcılar arası uyumluluk için birden fazla <source> etiketi kullanma yeteneği, web’in geniş ve çeşitli ekosisteminde içeriğin sorunsuz bir şekilde oynatılmasını garanti eder. Bu modern yaklaşım, güvenlik, performans, mobil cihaz uyumluluğu ve genel kullanıcı deneyimi açısından Flash tabanlı çözümlere göre önemli avantajlar sunarak, web’i daha dinamik ve etkileşimli bir platform haline getirmiştir. Web’in geleceği, bu açık standartlar ve onların getirdiği esneklik üzerine inşa edilmeye devam edecektir.
“`
Resim Sahibi: Stephan Müller
https://www.pexels.com/@stephanthem