HTML’de Video Ekleme: Kapsamlı Bir Kılavuz
Bir web sayfasına video eklemek, kullanıcı deneyimini geliştirmek ve içeriğinizi daha ilgi çekici hale getirmek için güçlü bir yoldur. HTML’de video eklemek nispeten basit bir işlemdir, ancak en iyi sonuçları elde etmek için bazı önemli hususları göz önünde bulundurmanız gerekir.
Video Dosyası Formatları
HTML’de video eklemek için desteklenen en yaygın dosya formatları şunlardır:
- MP4 (H.264): En yaygın ve uyumlu video formatı
- WebM (VP8/VP9): HTML5 için optimize edilmiş, açık kaynaklı bir format
- OGG (Theora): Bir başka açık kaynaklı video formatı
HTML’de Video Ekleme
Bir web sayfasına video eklemek için <video> etiketini kullanırsınız. Bu etiket, video dosyasına bir kaynak bağlantısı ve isteğe bağlı olarak video oynatma denetimleri sağlar.
Temel bir video ekleme kodu şöyle görünür:
“`html
“`
Bu kod, aşağıdaki öğeleri içerir:
- width ve height öznitelikleri, videonun boyutunu belirtir.
- controls özniteliği, oynatma denetimlerini (oynat/duraklat, ses seviyesi vb.) etkinleştirir.
- source etiketleri, farklı video dosyası formatları için kaynak bağlantıları sağlar.
- Tarayıcınız video etiketini desteklemiyor. metni, video etiketini desteklemeyen tarayıcılar için bir geri dönüş mesajıdır.
Video Oynatma Denetimleri
Oynatma denetimleri, kullanıcıların videoyu kontrol etmelerine olanak tanır. Varsayılan olarak, controls özniteliği etkinleştirildiğinde aşağıdaki denetimler görüntülenir:
- Oynat/Duraklat
- Ses seviyesi
- Tam ekran
- Süre kaydırıcısı
Ek denetimler eklemek için controlsList özniteliğini kullanabilirsiniz. Örneğin, altyazı denetimlerini eklemek için aşağıdaki kodu kullanabilirsiniz:
“`html
“`
Otomatik Oynatma ve Döngü
Videonun otomatik olarak oynatılmasını veya döngüye alınmasını istiyorsanız, autoplay ve loop özniteliklerini kullanabilirsiniz. Örneğin, video otomatik olarak oynatılacak ve döngüye alınacak şekilde aşağıdaki kodu kullanabilirsiniz:
“`html
“`
Altyazılar ve Altyazılar
Videolara altyazı ve altyazı eklemek, erişilebilirliği artırmak ve farklı dillerdeki izleyicilere ulaşmak için önemlidir. Altyazılar, videonun sesli anlatımını metin olarak sağlar, altyazılar ise işitme engelli izleyiciler için metin sağlar.
Altyazılar ve altyazılar, track etiketi kullanılarak eklenir. Örneğin, İngilizce altyazı içeren bir video eklemek için aşağıdaki kodu kullanabilirsiniz:
“`html
“`
Faydalı Kaynaklar
- HTML Video Elemanı
- HTML5 Video
- Video.js: HTML5 video oynatıcı için açık kaynaklı bir kitaplık
- Plyr: Modern ve özelleştirilebilir bir HTML5 video oynatıcı
Sonuç
HTML’de video eklemek, web sayfalarınıza etkileşimli ve ilgi çekici içerikler eklemenin güçlü bir yoludur. Bu kılavuzda açıklanan adımları izleyerek, videolarınızı kolayca ekleyebilir ve kullanıcı deneyimini geliştirebilirsiniz.