Video iskeleti

<video> ve birden çok <source> ile video iskeletini kurarsın.

video etiketi ve controls

HTML'in <video> etiketi bir videoyu sayfaya gömer. controls özniteliği tarayıcının yerleşik oynatma düğmelerini (oynat, duraklat, ses, tam ekran) gösterir; bu öznitelik boolean'dır, değeri gerekmez.

Video etiketi içine <source> etiketleri konur; her biri farklı bir biçimi temsil eder. Tarayıcı, desteklediği ilk biçimi oynatır.

Boş bir <video> öğesi tek başına hiçbir şey göstermez; kaynak eklenmelidir.

source etiketi ve type

Her <source> etiketi src ile dosya yolunu, type ile MIME türünü belirtir. Tarayıcı, type değerini okuyup kendi oynatabileceği biçimi seçer; desteklemediği dosyaları indirmekle zaman kaybetmez.

MP4 biçimi için type="video/mp4", WebM için type="video/webm" yazılır. Birden çok kaynak vermek, farklı tarayıcılarda tutarlı oynatmayı sağlar.

Uygulama video ve iki source ekle

Önceki dersin iskeletini al. <body> içine <video controls> etiketi ekle. Video içine iki <source> etiketi koy: biri src="/videolar/karadeniz.mp4" type="video/mp4", diğeri src="/videolar/karadeniz.webm" type="video/webm". Video etiketini kapat.

Örnek çözümü göster

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Doğa Belgeseli: Karadeniz</title>
  </head>
  <body>
    <video controls>
      <source src="/videolar/karadeniz.mp4" type="video/mp4">
      <source src="/videolar/karadeniz.webm" type="video/webm">
    </video>
  </body>
</html>

Kendini test et

Hangi öznitelik tarayıcının oynatma düğmelerini gösterir?
- autoplay
- muted
- controls
- loop
Cevabı göster

controls — Doğru! controls özniteliği oynat, duraklat ve ses düğmelerini gösterir.

MP4 kaynağının MIME türünü yaz

<source src="/videolar/karadeniz.mp4" type="____">

Cevabı göster

<source src="/videolar/karadeniz.mp4" type="video/mp4">

Dosya uzantısını MIME türüyle eşleştir.

.mp4

video/mp4
.webm

video/webm
.ogg

video/ogg
.mov

video/quicktime

Sıradaki ders: Track ve altyazı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler