HTML Kod Video Ekleme: Kapsamlı Bir Kılavuz
İnternetin görsel çağında, videolar web sayfalarına değerli bir katkı haline geldi. Ziyaretçileri meşgul etmek, mesajları iletmek ve dönüşümleri artırmak için kullanılabilirler. Bu kılavuz, HTML kodunu kullanarak web sayfalarınıza videolar eklemeyi kapsamlı bir şekilde açıklayacaktır.
Video Dosyası Formatları
HTML’de video eklemek için öncelikle desteklenen bir video dosyası formatına ihtiyacınız vardır. En yaygın formatlar şunlardır:
- MP4 (H.264/AVC kodlamasıyla)
- WebM (VP8/VP9 kodlamasıyla)
- Ogg (Theora kodlamasıyla)
Video Ekleme
Videoları HTML’ye eklemek için <video> etiketini kullanın. Bu etiket, video dosyasının kaynağını ve isteğe bağlı olarak diğer özellikleri belirtir. Temel sözdizimi şöyledir:
“`html
“`
src özniteliği: Video dosyasının URL’sini veya dosya yolunu belirtir.
controls özniteliği: Oynatma, duraklatma, ses seviyesi ve tam ekran gibi video oynatma kontrollerini görüntüler.
Video Özellikleri
<video> etiketi, videonun görünümünü ve davranışını özelleştirmek için çeşitli özellikler destekler:
- autoplay: Videoyu sayfa yüklendiğinde otomatik olarak oynatır.
- loop: Videoyu bittiğinde yeniden başlatır.
- muted: Videoyu sessiz başlatır.
- width ve height: Videonun genişliğini ve yüksekliğini piksel cinsinden belirtir.
- poster: Video oynatılmadan önce görüntülenen bir poster görüntüsünün URL’sini belirtir.
Alternatif Metin
Erişilebilirlik için, video etiketinin içine alternatif metin sağlamak önemlidir. Bu metin, video oynatılamadığında veya kullanıcılar videoyu izleyemediğinde görüntülenecektir.
“`html
“`
Birden Fazla Kaynak Kullanma
Farklı tarayıcılar ve cihazlar farklı video formatlarını destekleyebilir. Birden fazla kaynak kullanarak, tüm kullanıcılar için video oynatma uyumluluğunu artırabilirsiniz.
“`html
“`
Video Oynatma API’si
HTML5, video oynatmayı kontrol etmek için bir JavaScript API’si sağlar. Bu API, oynatma durumunu değiştirmenize, zaman damgalarına atlamanıza ve video olaylarına yanıt vermenize olanak tanır.
“`javascript
const video = document.querySelector(‘video’);
video.play();
video.pause();
video.currentTime = 10; // 10 saniyeye atla
“`
Faydalı Kaynaklar
Sonuç
HTML kodunu kullanarak web sayfalarınıza videolar eklemek, ziyaretçilerinizi meşgul etmenin ve mesajlarınızı iletmenin güçlü bir yoludur. Bu kılavuzdaki talimatları izleyerek, videoları web sayfalarınıza kolayca entegre edebilir ve kullanıcı deneyimini geliştirebilirsiniz.