HTML5 Video Dosyası Ekleme: Kapsamlı Bir Kılavuz
HTML5, web’de video oynatmak için devrim niteliğinde bir teknolojidir. HTML5 video oynatıcısı, yerel olarak desteklenen video kodekleri sayesinde eklentilere veya üçüncü taraf yazılımlara ihtiyaç duymadan videoları doğrudan tarayıcıda oynatmanıza olanak tanır. Bu makale, HTML5 video dosyalarını web sayfalarınıza eklemek için kapsamlı bir kılavuz sağlayacaktır.
HTML5 Video Etiketi
HTML5 video dosyalarını eklemek için <video> etiketini kullanırız. <video> etiketi, video oynatıcının yerleştirileceği bir kapsayıcı görevi görür.
“`html
“`
Önemli Nitelikler:
- controls: Bu nitelik, oynatma kontrollerini (oynat/duraklat, ileri/geri sarma, ses seviyesi vb.) görüntüler.
- src: Bu nitelik, video dosyasının URL’sini belirtir.
- type: Bu nitelik, video dosyasının MIME türünü belirtir.
Video Kaynakları
<video> etiketi, birden fazla video kaynağı içerebilir. Bu, tarayıcının desteklediği en uygun kaynağı seçmesine olanak tanır. Örneğin, hem MP4 hem de WebM video dosyalarını sağlayabilirsiniz:
“`html
“`
Video Oynatma Kontrolleri
HTML5 video oynatıcısı, aşağıdakiler de dahil olmak üzere çeşitli oynatma kontrolleri sağlar:
- Oynat/Duraklat
- İleri/Geri Sarma
- Ses Seviyesi
- Tam Ekran
- Altyazı
Bu kontroller, controls niteliği kullanılarak etkinleştirilir.
Video Özellikleri
<video> etiketi, video oynatma ile ilgili çeşitli özellikleri ayarlamanıza olanak tanır:
- autoplay: Videonun sayfa yüklendiğinde otomatik olarak oynatılmasını sağlar.
- loop: Videonun bittiğinde tekrar oynatılmasını sağlar.
- muted: Videonun sessiz olarak oynatılmasını sağlar.
- poster: Videonun oynatılmadan önce görüntülenecek bir poster görüntüsünü belirtir.
Örnekler
Basit Video Oynatıcı:
“`html
“`
Otomatik Oynatma ve Döngü:
“`html
“`
Poster Görüntüsü:
“`html
“`
Faydalı Kaynaklar
Sonuç
HTML5 video dosyalarını web sayfalarınıza eklemek, kullanıcı deneyimini geliştirmek ve içeriğinizi daha ilgi çekici hale getirmek için güçlü bir yoldur. Bu kılavuzda açıklanan adımları izleyerek, videoları kolayca web sayfalarınıza entegre edebilir ve ziyaretçileriniz için sorunsuz bir video oynatma deneyimi sağlayabilirsiniz.