Giriş yap

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 srt değil vtt olmalıdır.

Javascript bölümünde video etiketinin yönetimiyle ilgili daha detaylı bilgi öğreneceğiz. Bu HTML5 ile birlikte gelen tarayıcıların player'ı için bir anlatımdır. İlerleyen derslerde kendimize özel player vs. yapımını öğreneceğiz.
tayfunerbilen
168 gün önce yazdı.
Günlük Film Tavsiyesi