HTML5 Video Özelliği | PROTOTURK

Trang chủ » Html5 Hangi Video Formatını Desteklemez » HTML5 Video Özelliği | PROTOTURK

Có thể bạn quan tâm

  • Anasayfa
  • Akış
  • Keşfet
  • Makaleler
  • Soru & Cevap
  • Ders İstekleri YENİ
  • HTML
  • CSS
  • Javascript
  • Group Created with Sketch. PHP
  • MySQL
  • Laravel
  • Python
  • Git
Uygulamayı Yükle
HTML Dersleri
  • Başlangıç
  • Temeller
  • Etiketler
  • Nitelikler
  • Başlık Etiketleri
  • Paragraf Etiketleri
  • Metin Biçimlendirme Etiketleri
  • Alıntı Etiketleri
  • Yorum Satırları
  • Bağlantılar (Linkler)
  • Görüntüler (Resimler)
  • Tablolar
  • Listeler
  • Görüntüleme Değerleri
  • ID ve Class
  • Iframe (Çerçeve)
  • Dosya Yolları
  • Üst Bilgiler (Metadata)
  • Kod Etiketleri
  • Özel Karakterler
Formlar
  • Form Kullanımı
  • Form Etiketleri
  • Input Tipleri
HTML5
  • HTML5'e Giriş
  • HTML5 Tarayıcı Desteği
  • HTML5 Video
API
  • Geolocation (Konum) API
Etiketler
  • <!-- ... --->
  • <!DOCTYPE>
  • <a>
  • <abbr>
  • <article>
  • <aside>
  • <b>
  • <base>
  • <bdi>
  • <bdo>
  • <blockquote>
  • <body>
  • <br>
  • <button>
  • <div>
  • <html>
  • <i>
  • <img>
  • <label>
  • <ol>
  • <p>
  • <q>
  • <s>
  • <style>
  • <title>
  • Kategoriler
  • Başlıklar
    • HTML5 Video Özelliği
    • <video> Etiketi
    • HTML5 Video - Tarayıcı Desteği
    • HTML5 Medya Tipleri
    • <track> Etiketi
  • Paylaş
    • Paylaş
    • Tweetle
    • Gönder

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>Editörde Görüntüle

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>Editörde Görüntüle

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 2138 gün önce yazdı - 7479 kez görüntülendi. Önceki HTML5 Tarayıcı Desteği Sonraki Sözde Elemanlar / ::after

Từ khóa » Html5 Hangi Video Formatını Desteklemez