201: HTML5 & CSS Başlangıç seviyesi derslerde Web Programlama uygulama geliştirme ortamını detaylı olarak inceliyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

HTML5 Çokluortam Elemanları

Kategori : Mobil | Lisans : Creative Commons (by-nc-sa) | En son 12.09.2019 tarihinde güncellendi
Eğitmen : Geleceği Yazanlar Ekibi
Etiketler : html5-coklu-ortam html5-media audio video embed embeding html5-embeding web-programlama

HTML5'te çokluortam (multimedia) dosyalarını, Silverlight ya da Flash gibi eklentilere ihtiyaç duymadan web sayfanıza gömebilirsiniz. 

 

<audio> etiketi

<audio> etiketi, ses içeriğini tanımlamak için kullanılır.

 

<video> etiketi

<video> etiketi, video ya da filmleri web sayfasına yerleştirmek için kullanılır.

 

<source> etiketi

<source> etiketi, çokluortam kaynaklarını tanımlamak için kullanılır.

 

<embed> etiketi

<embed> etiketi, bir dış uygulama ya da etkileşimli bir içerik (eklenti) taşıyıcıyı tanımlamak amacıyla kullanılır.

 

Bir videonun web sayfasına gömülmesi (embeding)

Bir videoyu web sayfanıza gömmek için <video> etiketini kullanabilirsiniz. Bu etikete aşağıdaki özellikleri (attribute) atamanız yararlı olur.

  • src: Medya kaynağını (source) belirtmek için kullanılır.
  • controls: Kullanıcı bunun sayesinde yüklediği çokluortam dosyasını harekete geçirir ya da durdurur.
  • width ve height: Videonun genişlik ve yüksekliğidir. Yükleme sırasında çerçevenin değişmemesi için genişlik ve yükseklik özelliklerini önceden atayın.

HTML5 şu anda MP4, WebM ve OGG video dosya biçimlerini destekliyor.

Aşağıda web sayfasına video gömmenin bir örneğini bulabilirsiniz:

<!DOCTYPE html>
<html>
    <body>
        <video height="200" width="600" controls>
            <source src="deneme.mp4" type="video/mp4">                
        </video>   
    </body>
</html>

 

Aşağıdaki tabloda hangi tarayıcıların hangi video formatlarını desteklediğini görebilirsiniz:

TARAYICI MP4 WebM OGG
Internet Explorer 10+ EVET ELLE KURULUM ELLE KURULUM
Chrome 46.0+ EVET EVET EVET
Firefox 40.0+ EVET EVET EVET
Safari 9+ EVET ELLE KURULUM ELLE KURULUM
Opera 10.6+ EVET EVET EVET

 

Bir ses dosyasının web sayfasına gömülmesi

Videoya benzer şekilde, <audio> etiketiyle de ses ve şarkılar web sayfasına gömülebilir. Desteklenen dosya biçimleri MP3, WAV ve OGG'dur.

<!DOCTYPE html>
<html>
    <body>
    <div>
      <audio controls id="ses1" width="420">
        <source src="deneme.mp4" type="audio/wav">
      </audio>
    </div>
    </body>
</html>

Aşağıdaki tabloda hangi tarayıcıların hangi ses dosya biçimlerini desteklediğini görebilirsiniz:

TARAYICI MP3 WAV OGG
Internet Explorer 10+ EVET HAYIR HAYIR
Chrome 46.0+ EVET EVET EVET
Firefox 40.0+ HAYIR EVET EVET
Safari 9+ EVET HAYIR HAYIR
Opera 10.6+ HAYIR EVET EVET