Web Programlama

Web Programlama

DERS PROGRAMI
Web Programlama 201 Ders Programı
Sınava Gir

HTML5 Çokluortam Elemanları

Lisans: Creative Commons 11.12.2020 tarihinde güncellendi
Bakabileceğiniz Etiketler: Eğitmen: Geleceği Yazanlar Ekibi

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
Sınava Gir