HTML Medya Etiketleri

HTML Medya Etiketleri; HTML5 ile gelen ActiveX, Flash Player, Quicktime gibi web eklentilerine gerek duymadan video ve ses gibi medya dosyalarını oynatabildiğimiz etiketlerdir. Bu Medya Etiketleri ses ve video dosyalarını hiçbir eklenti ya da programa ihtiyaç duymadan kullanıcıya sunmamızı sağlar.

Başlıca Medya Etiketleri

HTML5 ile gelen başlıca etiketler arasında Medya Etiketleri de bulunmaktadır. Bunlardan en yaygın kullanılanları Ses ve Video etiketleridir. HTML5 ten önce bu etiketler olmadığı zamanlarda web sitelere ses ve video dosyaları yüklemek oldukça güçtü. Bunları eklemek için öncelikle eklentiler kullanıp daha sonra da dosyaları gömmek gerekiyordu. Bu etiketler sayesinde böyle bir derdimiz kalmadı.

Ses Etiketi (<audio>)

Web sitemizde bir ses dosyası açmak istediğimizde kullandığımız etikettir. Daha önceden web sitelerinde müzik çalmak için ilk önce flash player eklentisini eklememiz daha sonra da dosyamızı sayfamıza embed etmemiz, yani gömmemiz gerekiyordu. Artık tek yapmamız gereken ‘audio’ etiketini kullanmak. Bu etiket sayesinde artık hiçbir eklentiye ihtiyaç duymadan ses dosyalarını web sitemizde yayınlayabilecez.

<audio controls preload="none" style="width: 500px;">
    <source src="http://muzik.mp3" type="audio/mpeg">
    <source src="http://muzik.ogg" type="audio/ogg">
    Tarayıcınız HTML5 Audio formatını desteklemiyor
</audio>

Ses Etiketi içinde yazılan atıflardan bahsedelim biraz. controls atfı müzikçaların tarayıcımızda gösterilmesini sağlıyor. preload=”none” ile kullanıcılar web sitemize girdiğinde müziğin önceden yüklenmesini engelliyor. style atfı ile müzik çaların genişliğini belirledik.

Burada asıl önemli etiket source‘tur. source dilimizde kaynak manasına gelir ve müzikçalarda çalacak parçanın kaynak adreslerini içerir. type atfı ile dosyanın formatını belirtmeliyiz. mp3 formatını Google, Chrome ve Safari tarayıcıları desteklemektedir. Buna rağmen diğer birçok tarayıcı hâlâ bu formatı desteklemediği için ikinci bir seçenek olarak ogg formatını kullanıyoruz.

Video Etiketi (<video>)

Bir Web siteniz olmazsa olmazları arasında yer alan videolar artık her web sitede yer almaktadır. Kullanıcıları daha fazla sitede tutup daha fazla vakit geçirmelerini sağlayan videolar bir hayli önem taşısa da web sitelerde yayınlanması da bi o kadar zordu ta ki HTML5 ile gelen Video Etiketi ortaya çıkana kadar.

<video width="500" controls>
    <source src="http://video.mp4" type="video/mp4"/>
    <source src="http://video.ogv" type="video/ogg"/>
    Tarayıcınız HTML5 Video formatını desteklemiyor
</video>