HTML5 Video Özelliği
HTML5'den önce videolar tarayıcılarda flash gibi eklentiler ile çalıştırılmaktaydı. HTML5 <video> etiketi ile web sayfalarında video göstermeyi standart haline getirdi.
<video> Etiketi
HTML sayfada video göstermek için <video> etiketi kullanılır. Videoların kaynakları ise <source> etiketi ile belirlenir.
<video width="320" height="240" controls>
<source src="test.mp4" type="video/mp4">
<source src="test.ogg" type="video/ogg">
Tarayıcınız HTML5 video özelliğini desteklemiyor.
</video>
Yukarıdaki örneği biraz açıklamak gerekirse, <video> etiketinde bazı nitelikler görüyoruz. width niteliği genişliği, height niteliği yüksekliği temsil ediyor. Değersiz conrols niteliği ise video kontrolü için oynatma, durdurma, ses açma gibi özellikleri gösteriyor.
<source> etiketi ile video kaynaklarını belirtiyoruz. HMTL5 video özelliği 3 video kaynağını destekliyor. Bunlar MP4, Ogg ve WebM'dir.
type niteliği ile video kaynağının medya tipi belirlenir.
Son olarak girilen tarayıcı eski ise desklenmiyor yazısı gözükür, desteklenen tarayıcılarda bu yazı gösterilmez.
HTML5 Video - Tarayıcı Desteği
Hangi formatları hangi tarayıcıların desteklediğine bir gözatalım.
| Tarayıcı | MP4 | Ogg | WebM |
|---|---|---|---|
| Internet Explorer | ✅ | ❌ | ❌ |
| Chrome | ✅ | ✅ | ✅ |
| Firefox | ✅ | ✅ | ✅ |
| Safari | ✅ | ❌ | ❌ |
| Opera | ✅ | ✅ | ✅ |
HTML5 Medya Tipleri
Desteklenen medya tiplerine bir gözatalım.
| Format | Tip |
|---|---|
| MP4 | video/mp4 |
| Ogg | video/ogg |
| WebM | video/webm |
<track> Etiketi
Bu etiket, video oynatılırken görünmesi gereken altyazıları, altyazı dosyalarını veya metin içeren diğer dosyaları belirtmek için kullanılır.
Etiketle birlikte kullanılan nitelikler ise şöyledir;
| Nitelik | Değer | Açıklama |
|---|---|---|
| default | default | Varsayılan olarak gözükmesini sağlar |
| kind |
captions chapters descriptions metadata subtitles |
Yüklenecek dosyanın türünü belirler |
| label | belirleyeceğiniz yazı | Yüklenecek dosyanın adını belirler |
| src | URL | Dosyanın yolunu belirler. Kullanılması zorunludur. |
| srclang | dil_kodu | eğer king niteliği subtitles olarak seçildiyse altyazı dosyasının dilini belirtmek için kullanılır |
kind niteliğinin değerlerini de biraz açacak olursak;
| Değer | Açıklama |
|---|---|
| captions | Parça, diyalog ve ses efektlerinin çevirisi için kullanılır (duyma engelli kişiler için uygundur) |
| chapters | Video bölüm başlıkları için kullanılır |
| descriptions | Video içeriğini anlatan dosyalar için kullanılır (duyma engelli kişiler için uygundur) |
| subtitles | Altyazıları tanımlamak için kullanılır |
Etiket kullanımına bir örnek vermek gerekirse;
<video width="320" height="240" controls>
<source src="test.mp4" type="video/mp4">
<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 video özelliğini desteklemiyor.
</video>
Videoya türkçe ve ingilizce olmak üzere vtt formatında dosyalarımızı tanımladık. Altyazılar için kullanılacak doğru format srtvtt olmalıdır.
