Ses ve video

<audio> ve <video> etiketleriyle medya eklemeyi öğrenirsin.

audio öğesi

<audio> öğesi sayfaya ses ekler: müzik parçası, podcast bölümü, sesli mesaj. src özniteliği ses dosyasının adresini taşır, tıpkı img'deki gibi.

controls özniteliğini eklemezsen tarayıcı ses oynatıcısını sayfada hiç göstermez; ses dosyası yüklenir ama kullanıcı oynatacak düğme bulamaz. controls ekleyince oynat, duraklat ve ses düzeyi düğmeleri görünür: <audio src="..." controls></audio>. audio bir kapanış etiketi ister; içine ek içerik de koyulabilir.

video öğesi

<video> öğesi sayfaya video ekler. Kullanımı audio'ya çok benzer: src ile adres, controls ile oynat düğmeleri. <video src="..." controls></video> şeklinde yazılır.

video için controls neredeyse zorunludur; olmadan kullanıcı videoyu başlatamaz. Ek olarak poster özniteliğiyle video başlamadan önce gösterilecek bir görsel de belirtebilirsin, ama temel kullanım src ve controls ile başlar.

Uygulama Kontrollü video ekle

Body içine bir <video> öğesi ekle. src özniteliğine gerçekçi bir video adresi ve controls özniteliğini yaz. Kapanış etiketini unutma.

Örnek çözümü göster

<body>
  <video src="https://example.com/belgesel/kuslar.mp4" controls></video>
</body>

Kendini test et

controls özniteliği ne yapar?
- Görselin boyutunu sabitler
- Videoyu otomatik başlatır
- Alternatif metni gösterir
- Oynat, duraklat ve ses düğmelerini gösterir
Cevabı göster

Oynat, duraklat ve ses düğmelerini gösterir — Doğru. controls, oynat-duraklat ve ses düğmelerini sayfada gösterir.

video'ya controls ekle

<video src="https://example.com/belgesel/kuslar.mp4" ____></video>

Cevabı göster

<video src="https://example.com/belgesel/kuslar.mp4" controls></video>

Medya öğelerini eşleştir

audio

Ses çalar
video

Video oynatır
img

Görsel yükler
controls

Oynat düğmelerini gösterir

Sıradaki ders: Alternatif kaynaklar

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler