HTML ve CSS'ye Giriş (Bölüm 23): Web Sitesi için Multimedya (2)

Audio dosyalarını HTML5'te video dosyalarıyla benzer şekilde kolayca entegre edebilirsiniz. HTML5, bu amaçla

<audio src="song.mp3">
   Tarayıcınız audio öğesini desteklemiyor.
</audio>

audio öğesine çalınacak dosyanın adı src özniteliği üzerinden atanır. Ancak dosya henüz çalınmaz. Bunun için kontrol öğelerine ihtiyaç vardır.

Kontrol öğelerini göstermek istiyorsanız, audio öğesine controls özniteliğini tanımlarsınız.

<audio src="song.mp3" controls>
   Tarayıcınız audio öğesini desteklemiyor.
</audio>

Tarayıcıda şu şekilde görünecektir:

controls yoksa, audio öğesi görünmez. Bu özniteliği kullanmak mantıklıdır çünkü JavaScript ile kendi kontrol öğelerini eklemek istiyorsanız.

Ne yazık ki audio öğesinin kullanımı sorunsuz değildir. Bu sorunun sebebi yine tarayıcılardır, her biri farklı formatları destekler. Aşağıdaki tablo size bu konuda özgü güncel bilgiler sunacaktır.

Peki, ne yapmalı? audio öğesi size farklı formatlarda dosyalar sunma imkanı sağlar. Bu dosyalara tarayıcılara uygun formatlar atamak için source öğeleri tanımlarsınız. Bir örnek:

<audio controls>  
    <source src="song.mp3">  
    <source src="song.ogg">  
</audio>

src özniteliklerine farklı formatlardaki dosyalar atanır ve tarayıcılara uygun formatta sunulur.

controls öğesinin yanı sıra audio öğesi için başka öznitelikler de bulunmaktadır. Bunlardan biri autoplay'dur.

<audio controls autoplay>  
    <source src="song.mp3">  
    <source src="song.ogg">  
</audio>

Öznitelik ayarlanırsa, ses dosyası otomatik olarak yüklendikten sonra çalmaya başlar. Normalde bu özniteliği kullanmazsınız, çünkü ziyaretçilere ses dosyasını ne zaman çalmak istediklerine karar vermeyi bırakmalısınız.

Ayrıca dikkat çeken bir özellik de loop özniteliğidir. Bu öznitelik dosyanın döngü içinde çalınmasını sağlar.

Videoları eklerken olduğu gibi, ses dosyaları için de type ve media gibi iki ek öznitelik bulunmaktadır. Burada da ilgili MIME türlerini ve codec'leri belirtebilirsiniz. HTML5 spesifikasyonunda type özniteliği için aşağıdaki typik değerler bulunmaktadır:

• type='audio/ogg; codecs=vorbis'

• type='audio/ogg; codecs=speex'

• type='audio/ogg; codecs=flac'

source öğesinde olmak üzere, sadece audio öğesinde değil type ve media özniteliklerini kullanabilirsiniz.

Flash & Co. entegre etme

Flash filmleri eski HTML sürümlerinde embed ve object kombinasyonuyla entegre edilebiliyordu. Bu şekilde oluşturulan – üstelik oldukça çirkin – sözdizimi şöyle görünüyordu:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="800" height="600">
  <param name=movie value="intro.swf">
 <param name=quality value=high>
 <embed src="intro.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"> </embed>
 </object>

Bu, HTML'ye uzun süredir var olan object ve embed öğeleri üzerinden yapılan klasik entegrasyon yöntemidir.





Ancak "klasik" burada geçmişte W3C tarafından onaylanmış anlamına gelmez. Çünkü HTML 4'te Internet Explorer tarafından doğru şekilde yorumlanan object öğesi favori olarak belirlendi. Farklı olarak Netscape Navigator, embed öğesini kullandı. Bu farklı yorumlama, object ve embed elemanlarının kombinasyonunu gerektirdi.

HTML5, aktif içerikleri entegre etmek için resmi olarak object ve embed öğelerini sunar.

embed, Normalde tarayıcı eklentileri gerektiren, HTML dışı içeriklerin görüntülenmesi için oluşturulan bir konteynerdir ve img, video, audio gibi diğer elemanlar tarafından kapsanmayan içerikler içindir. Entegre içeriğin görüntülenmesi için genellikle tarayıcı eklentilerine ihtiyaç duyulur.

Örneğin embed aracılığıyla Flash filmleri artık standarta uygun bir şekilde entegre edilebilir. İşte böyle bir şeyin nasıl görünebileceğine dair bir örnek:

<embed
    src="http://www.youtube.com/v/v1PgiBpTtao?fs=1&hl=de_DE"
    type="application/x-shockwave-flash"
    width="384"
    height="313"
    allowscriptaccess="always"
    allowfullscreen="true"
  />

embed öğesine çeşitli özellikler atanabilir. En önemli olanı tabii ki yine src özelliğidir. Çünkü nihayetinde entegre edilecek dosyayı belirler. type özelliği üzerinden MIME türü belirtilir.

Flash için bu değer application/x-shockwave-flash'tır. Öte yandan bir LaTeX dosyası entegre etmek isterseniz, application/x-latex yazarsınız. Entegre edilen dosyanın genişliği ve yüksekliği width ve height ile ayarlanır.

Ayrıca HTML5'e resmi olarak dahil olmayan daha fazla özellik bulunmaktadır. Bunlar, kullanılan eklentiyi kontrol etmeyi sağlar. Örneğin önceki örnekte "Flash-Özellikleri" allowscriptaccess ve allowfullscreen ile kullanılabilir olduğu belirlenmiştir. Aynı şekilde quality özelliği ile Flash filmi kalitesi belirlenebilir.

<embed 
    src="flash.swf" 
    width="600" height="300" 
    type="application/x-shockwave-flash" 
    quality="high" 
 />

object Öğesi

object öğesi embed gibi içeriği barındıran bir kap durumundadır. Ancak embed'in aksine, object üç farklı içerik modelini tanır. Tarayıcı, doğrudan görüntülenebilir bir grafik olduğunu algılarsa, o zaman bir img öğesiymiş gibi davranır. Referans alınan nesnenin bir web içeriği olduğunu fark ederse, içeriği bir iFrame içinde gösterir. (Bu konuyla ilgili daha fazla bilgi sırasıyla bu serinin devamında gelecektir). Diğer içeriklerde ise object, embed gibi davranır.

Aşağıdaki örnek, object öğesi üzerinden bir Flash filmi entegre etmeyi göstermektedir.

<object
    type="application/x-shockwave-flash"
    data="http://www.youtube.com/v/BzYBY_9rnuA?version=3&hl=de_DE&rel=0"
    width="400"
    height="300">
    <param name="allowscriptaccess" value="always" />
    <param name="allowfullscreen" value="true" />
    <p>
       Tarayıcınızda Flash eklentisi bulunmamaktadır.
    </p>
 </object>

Son olarak, şüphesiz object mu yoksa embed mi kullanılması gerektiği sorusu ortaya çıkar. İlk bakışta, bu iki öğe neredeyse aynı gibi görünmektedir. Gerçekte, object öğesi embed öğesinin yapabildiği her şeyi yapabilir.





İçerikleri entegre etmek için - resimler hariç - genellikle object öğesine başvurulmalıdır. Bu öğe, entegre edilen öğe yüklenemediğinde gösterilecek alternatif içerikleri belirtmeyi sağlar.