HTML Dersleri 15 HTML 5 Media Etiketleri

YENİ ETİKETLER VE ANLAMSAL WEB

HTML 5 ile gelen ActiveX, Flash Player, Quicktime gibi web eklentilerine ihtiyaç duymadan ses ve video gibi medya dosyalarımızın oynatılabildiği etiketlerdir. HTML 5 öncesi HTML versiyonlarda hatırlarsanız sayfamıza video eklediğimizde, eklediğimiz bu videoyu tarayıcımıza flash player eklentisi kurmadan çalıştıramazdık. HTML 5′ de video eklemek çok kolay hale getirilmiş.

Medya Etiketleri

HTML 5, herhangi bir eklentiye gerek duymadan görüntü ve ses çalabilir. Henüz bu konuda flash teknolojisinin kullanılabilirliğine ve kabiliyetine ulaşmış değildir. Öncelikle yeni gelen medya etiketlerini listeleyip sonra onlar hakkında bilgi verelim.

  • <audio>
  • <video>
  • <source>
  • <embed>
  • <track>

<audio> Etiketi

Sayfamızda bir ses dosyası çalmak istediğimizde kullandığımız etikettir. Daha önceden sayfamızda 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. Mp3, Waw ve Ogg formatlarını desteklemektedir.

Örnek kullanımı şu şekildedir:

Ekran çıktısı şu şekildedir:

<audio> etiketi içine yazılan atıflardan bahsedeyim biraz. controls atfı müzik çaların tarayıcımızda gözükmesini sağlıyor ve aynı zamanda çal (play) dur (pause) gibi kontrol düğmelerinin çıkmasını sağlar. Ayrıca autoplay (otomatik başlama), muted (sessiz), loop (sesi kontrol etmemizi sağlar) ve preload gibi özellikleri de vardır.

Örneğimizde,  preload=”none” ile kullanıcı sayfaya girdiğinde müziğin önceden yüklenmesini engelledik ve style atfı ile müzik çaların genişliğini belirledik. 

Burada asıl dikkat edilmesi gereken etiket <source>‘ tur. source dilimizde kaynak anlamına gelir ve müzikçalarda çalacak parçanın kaynak adreslerini içerir. src özelliğine çalınacak ses dosyasının adresini yazmalıyız.  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. Bu formatı ise Firefox ve Opera tarayıcıları desteklemektedir. Örneğin; Firefox kullanan bir kullanıcı bu sayfaya girdiğinde mp3 formatı çalışmayacak ve tarayıcı parçayı ogg formatında çalmaya başlayacaktır. Eğer tarayıcının desteklemediği bir format ise “Tarayıcınız audio etiketini desteklemiyor.” diye uyarı verecektir.

Eğer bir parçayı sayfanın içine gömüp, kullanıcı tarafından görüntülenmesini istemiyorsak ve sayfaya girdiği andan itibaren ses dosyamızı çalıştırmak istiyorsak aşağıdaki kodları kullanmalısınız.

Sinir bozucu olmaması adına bu kodların çıktısını vermiyorum. Çünkü verilebilecek çıktı yok. 🙂

<video> Etiketi

<audio> etiketinde olduğu gibi artık HTML5 ile Flash eklentisi yüklemenize gerek yok. Sitenize doğrudan <video> etiketi ile video yükleyebilirsiniz. Adından da tahmin edebileceğiniz bu etiket video dosyalarının çalmasını sağlar. Mp4, WebM ve Ogg formatlarını desteklemektedir. 

Örnek kullanımı şu şekildedir:

Ekran görüntüsü ise şu şekildedir:

<audio> etiketinde olduğu gibi sayfanızı ziyaret edenlerin doğrudan video izlemesini sağlayabilirsiniz. Bunun için aşağıdaki kodları kullanmalısınız. Bununla birlikte loop özelliği videonuzun bir döngü içinde sonsuza dek çalışmasını sağlar. Bu özelliği kaldırırsanız videonuz sadece bir kez gösterilecektir.

Sayfanızı ziyaret eden kullanıcıların video çalıştırmaya başlamadan önce videonun önceden yüklenmesini isteyebilirsiniz. Bunun için ise preload özelliğini kullanmalısınız.

<source> Etiketi

Birçok ses ve video dosyasını alternatifli olarak audio veya video gibi etiketleri eklemek için kullanılır. Amacı aynı dosyanın farklı formatlarını listeleyip tarayıcının desteklediği formatı seçmesini sağlamaktır.

Örnek kullanımı şu şekildedir:

Yukarıdaki her iki örnekte de tarayıcı 3 tane seçenek sunuyor. Aynı dosyanın audio etiketi için bir mp3 formatındaki hali bir de ogg ve mpeg, video etiketi için ise aynı dosyanın bir mp4 formatındaki halini bir de ogg ve webm formatını sunuyor. Tarayıcı hangi formatı destekliyorsa onu seçip çalacaktır.

<embed> Etiketi

embed etiketi harici bir uygulamanın veya eklentinin web sayfasına gömülmesini sağlar. Genişlik (width) ve yükseklik (height) özellikleri ile ekrandaki boyutu düzenlenebilir.

Örnek kullanımı şu şekildedir:

Yukarıda ki örnekte bir swf dosyasının web sayfasının içine gömülmesi sağlanıyor.

<track> Etiketi

track etiketi bir noktada source etiketine benziyor yani audio ve video etiketleri içerisinde yer alıp ilgili dosya çalarken o dosya ile ilgili yazıların (altyazı, başlık, tanım) çıkmasını sağlar.

Örnek kullanımı şu şekildedir:

Yukarıda ki örnekte video etiketi içerisinde üç farklı formattaki hali verilmiştir. Tarayıcı bunlardan desteklediğini çalacaktır. Aynı zamanda da iki tane de altyazı dosyası verilmiş. Kullanıcı hangisini isterse o gösterilecektir. kind özelliği ile bu yazının türü ayarlanabilmektedir. Değer olarak captions (başlık), descriptions (tanım), metadata (bilgi) ve subtitles (altyazı) gibi değerler alabilir. kind olarak subtitle kullanıldığında srclang özelliği ile dil belirtilmelidir.

Evet arkadaşlar bu dersimizinde sonuna geldik. Bu dersimizde HTML 5 ile gelen yeni media etiketlerini tanıdık ve uygulamalı olarak öğrendik. Bir sonraki dersimizde HTML 5 ile grafik vs. çizim için kullanılan canvas etiketini tanıyacağız. Bir sonraki dersimizde görüşmek üzere…

About egitimkanalim.com

Check Also

HTML Dersleri 14 Yeni Veri Giriş (Input) Tipleri ve Form Özellikleri

Bir önceki konuda HTML 5 ile gelen yeni etiketlerden bahsettik. Bu dersimizde de yeni veri …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir