HTML’de Multimedya Özelliği

Web tasarım çalışmalarımızda gerek ihtiyaç olduğu için gerekse hoş bir görüntü oluşturmak için multimedya elemanlarını sitemize ekleriz.
Peki nedir bu multimedya?
Multimedya; ses, müzik, video, film, animasyon gibi öğelerdir.

Tarayıcı Desteği

İlk internet tarayıcıları tek bir renkte ve tek bir yazı tipiyle sınırlı olarak yalnızca metin destekliyordu.
Daha sonraları renk, yazı tipi ve görüntüleri destekleyen tarayıcılar geldi ve bu sorun ortadan kalkmış oldu.

Ses, video ve animasyon destekleyen büyük tarayıcılar geldi ama her tarayıcı multimedyayı kendi şartları doğrultusunda destekliyordu.
Bazı tarayıcılarda ses ve video çalıştırmak için Flash gibi bir eklentiye ihtiyaç duyuluyordu.

Bu sorun HTML5 ile tarih oldu. HTML5’in <video> ve <audio> etiketleri bugün tüm güncel tarayıcılarda hiçbir eklenti gerekmeden çalışır. Flash ise artık hiçbir tarayıcıda çalışmıyor.

Multimedya Formatları

Ses, video, görüntü, animasyon gibi multimedya öğelerinin kendilerine göre formatları (uzantıları) vardır.
Bu formatları öğrenmenin en kolay yolu, dosyanın özelliklerinden dosya uzantısına bakmaktır.

.wav, .mp3, .mp4, .webm, .ogg, .mpg, .wmv ve .avi gibi dosya uzantıları mevcuttur.

MP4, YouTube’un da önerdiği ve HTML5’in desteklediği en yaygın video formatıdır.

HTML5’te tercih edilen ses formatı

Web sitenize ses dosyası eklemek istiyorsanız en çok tercih edilen format MP3’tür.

HTML’de videolar

HTML5 öncesinde bir video veya medya yalnızca bir eklenti ile (Flash gibi) tarayıcılarda çalışabiliyordu. Bugün <video> elemanını tüm güncel tarayıcılar destekler.

HTML <video> Elemanı

Web tasarımlarımıza bir video eklemek istersek video ekleme kodu şu şekildedir:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Tarayıcınız bu videoyu desteklemez.
</video>

Kodları incelediğiniz zaman önceki derslerde gördüğümüz elemanların hemen hepsini kullandığımızı ve mantığını anladığınızı düşünüyorum.
width ve height özellikleri ile eklediğimiz medyaya boyut vermiş oluyoruz.
type özelliği ile de medyamızın biçimini belirtmiş oluyoruz.

Burada öğrenmeniz gereken yer <video> ve <source> etiketleridir.

<video> etiketi, içerisindekilerin medya elemanları olduğunu tarayıcıya bildirir.
<source> elemanı ise video dosyasının yolunu belirtir. controls özelliği oynatma düğmelerini gösterir.

autoplay özelliği videonun otomatik olarak oynatılmasında kullanılır. Güncel tarayıcılar sesli videoların kendiliğinden başlamasını engeller; otomatik oynatma için videoya muted (sessiz) özelliğini de eklemeniz gerekir.

HTML5 Video Uzantıları ve Tarayıcı Desteği

MP4, WebM ve Ogg, HTML5’in desteklediği 3 video uzantısıdır.
Güncel tarayıcıların hepsi HTML5 video özelliğini destekler; MP4 en geniş desteğe sahip formattır.