Merhaba! HTML'yi keşfettiğimiz bu modülde sıra, medya dosyaları ile nasıl çalışacağımızı öğrenmeye geldi. Bu bölümde HTML kodlarınızla video ve ses medyaları nasıl ekleyeceğinizi ve yönetebileceğinizi inceleyeceğiz.

HTML'ye geçmeden önce, çoklu ortam ve kullanımı ile ilgili bazı noktaları aydınlatmak istiyorum.

Çoklu Ortam Nedir?

En genel haliyle çoklu ortam (multimedia); bir içeriğin metin, ses, görüntü, grafik, animasyon, müzik gibi çeşitli ortamların harmanlanarak sunulmasıdır. Web, geliştiricilere güçlü bir çoklu ortam çalışma alanı sunar. Bu sayede güçlü görsel tasarım unsurlarına sahip yaratıcı uygulamalar geliştirilebilir.

Web'in ilk sürümleri yalnızca tek bir renk ve yazı tipi kullanılarak oluşturulabilen metinleri destekliyordu. Zaman içerisinde web; renkleri, farklı yazı tiplerini ve resimleri desteklemeye başladı. Günümüzde ise video, ses ve animasyonların dahil olduğu çok zengin bir çoklu ortam altyapısına ulaşıldı.

Web'te Kullanılabilen Video Dosyaları

mp4, mpg, avi, swf, ogg, webm, wmv, avi ve mov gibi bilgisayar ortamında kullanabileceğiniz pek çok video formatı bulunur ama HTML5 standartlarına göre web'te kullanılabilecek video formatları mp4, webm ve ogg olarak sınırlandırılmıştır.

!!! Eğer web videolarında tarayıcı uyumsuzluğu gibi sorunlarla boğuşmak istemiyorsanız size tavsiyem: Mutlaka mp4 formatında çalışın.

Web'te Kullanılabilen Ses Dosyaları

HTML standartlarına göre web'te kullanılabilecek ses formatları mp3, wav ve ogg olarak sınırlandırılmıştır.

!!! Tarayıcı uyumsuzluğu gibi sorunlarla boğuşmak istemiyorsanız size tavsiyem: Mutlaka mp3 formatında çalışın.

Çoklu ortam kavramını ve web'te kullanılabilen medyaları özetlediğimize göre artık bir web sayfasına nasıl video ve ses dosyaları ekleyebileceğimizi görelim.

Video

Web sayfalarına video eklemek için video etiketi kullanılır. Söz dizimi şu şekildedir:

<video width="320" height="240" poster="poster.jpg" controls autoplay muted loop>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  <track src="altyazi_tr.vtt" kind="subtitles" srclang="tr" label="Türkçe">
  <track src="altyazi_en.vtt" kind="subtitles" srclang="en" label="English">

  Tarayıcınız HTML5 videolarını desteklememektedir.
</video>

Videonun boyutlarını kontrol etmek için width ve height özellikleri kullanılır.

poster özelliği; videoya bir kapak resmi eklemek için kullanılır.

controls özelliği videoya; durdurma, ileri sarma, ses ve tam ekrana alma gibi kontrol düğmelerini ekler.

autoplay özelliği; web sayfası yüklendiğinde videonun otomatik olarak oynatılmasını sağlar. Otomatik oynatma özelliği, iPad ve iPhone gibi mobil cihazlarda çalışmaz.

muted özelliği; videonun sesini kısmak için kullanılır. Kullanıcı dilediği zaman sesi yeniden açabilir.

loop özelliği; videonun tekrar tekrar oynatılmasını sağlar.

source etiketi kullanılarak bir videoya farklı formatlarda birden fazla kaynak dosya eklenebilir. Bu, tarayıcı uyumsuzluklarından kaynaklanan problemlerin önüne geçmek için sıklıkla kullanılan bir yöntemdir.

track etiketi videoya altyazı eklemek için kullanılır. Farklı dil seçenekleri sunmak için birden fazla track etiketi kullanılabilir.

Audio

Web sayfalarına ses dosyaları eklemek için audio etiketi kullanılır. Söz dizimi şu şekildedir:

<audio preload controls autoplay>
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.webm" type="audio/webm" />

  Tarayıcınız HTML5 seslerini desteklememektedir.
</audio>

preload özelliği; ses dosyasının ön yükleme biçimini belirtmek için kullanılır. auto, metadata ve none değerlerini alabilir. Varsayılan değer, auto'dur. None değeri, kullanıldığında ses dosyasının ön yüklemesi yapılmaz.

controls özelliği; durdurma, ileri sarma vb. kontrol düğmelerini ekler.

autoplay özelliği; web sayfası yüklendiğinde sesin otomatik olarak oynatılmasını sağlar. Otomatik oynatma özelliği, iPad ve iPhone gibi mobil cihazlarda çalışmaz.

muted özelliği; ses seviyesini kısmak için kullanılır. Kullanıcı dilediği zaman ses seviyesini yükseltebilir.

loop özelliği; sesin tekrar tekrar oynatılmasını sağlar.

source etiketi kullanılarak bir sese farklı formatlarda birden fazla kaynak dosya eklenebilir. Bu, tarayıcı uyumsuzluklarından kaynaklanan problemlerin önüne geçmek için sıklıkla kullanılan bir yöntemdir.

Eveet, bir bölümün daha sonuna geldik. Umarım öğrenmekten keyif aldığınız bir bölüm olmuştur. Görüşmek üzere...