HTML Dersleri: Videoları Web Sayfanıza Ekleme
Bir web sayfasına video eklemek, ziyaretçilerinizin ilgisini çekmenin ve içeriğinizi daha ilgi çekici hale getirmenin harika bir yoludur. HTML kullanarak videoları web sayfanıza kolayca ekleyebilirsiniz.
Video Ekleme Adımları
- Video Dosyasını Hazırlayın: Eklemek istediğiniz video dosyasını hazırlayın. Desteklenen video formatları arasında MP4, WebM ve Ogg bulunur.
- Video Dosyasını Sunucunuza Yükleyin: Video dosyasını web sunucunuza yükleyin. Dosyanın herkes tarafından erişilebilir olduğundan emin olun.
- Video Etiketini Kullanın: Web sayfanıza bir
<video>etiketi ekleyin. Bu etiket, video oynatıcının görünümünü ve işlevselliğini kontrol eder. - Video Kaynağını Belirleyin:
<source>etiketi kullanarak video dosyasının kaynağını belirtin. Birden fazla kaynak belirtebilirsiniz, böylece tarayıcılar desteklenen ilk formatı kullanabilir. - Alternatif İçerik Sağlayın: Bazı kullanıcılar videoyu oynatamayabilir. Bu durumda, alternatif içerik sağlamak için
<track>veya<img>etiketlerini kullanabilirsiniz.
Örnek Kod
Aşağıdaki kod örneği, bir web sayfasına video eklemek için nasıl <video> etiketini kullanabileceğinizi gösterir:
“`html
“`
Video Oynatıcıyı Özelleştirme
<video> etiketi, video oynatıcının görünümünü ve işlevselliğini özelleştirmek için bir dizi öznitelik sağlar. Örneğin:
- width: Oynatıcının genişliğini piksel olarak ayarlar.
- height: Oynatıcının yüksekliğini piksel olarak ayarlar.
- controls: Oynatma kontrollerini (oynatma, duraklatma, ses vb.) gösterir veya gizler.
- autoplay: Videoyu sayfa yüklendiğinde otomatik olarak oynatır.
- loop: Videoyu bittiğinde tekrar başlatır.
Faydalı Kaynaklar
- HTML Video Etiketi
- HTML5 Video
- Video.js – Özelleştirilebilir bir HTML5 video oynatıcısı
- Plyr – Modern ve duyarlı bir HTML5 video oynatıcısı
Sonuç
HTML kullanarak videoları web sayfanıza eklemek, ziyaretçilerinizin ilgisini çekmenin ve içeriğinizi daha ilgi çekici hale getirmenin kolay bir yoludur. <video> etiketini ve ilgili öznitelikleri kullanarak video oynatıcının görünümünü ve işlevselliğini özelleştirebilirsiniz.