Çalıştırılabilir HTML Dokümanları: HTML video

Q: HTML'de video nasıl eklenir?

kullan. controls özelliği tarayıcının oynat butonunu, zaman çizelgesini ve ses kontrolünü gösterir. O olmadan video ilk karesini (ya da poster'ını) gösterir ve kullanıcı onu başlatamaz.

Q: Videomda autoplay neden çalışmıyor?

Tarayıcılar sesli otomatik oynatmayı engeller. autoplay yanına muted, iPhone'lar onu tam ekran yerine sayfanın içinde oynatsın diye de playsinline ekle: .

Q: Bir videoya küçük resim (thumbnail) nasıl eklenir?

Bir resim URL'siyle poster özelliğini kullan: . Resim, video oynamaya başlayana kadar görünür.

Q: Bir HTML videosuna altyazı nasıl eklenir?

Videonun içine bir ekle. Dosya WebVTT biçimini kullanır ve tarayıcı kontrollerinde bir altyazı butonu gösterir.

Q: Bir videoyu nasıl responsive yaparım?

CSS'te width: 100% ve height: auto (ya da max-width: 100%) ayarla. Video kapsayıcısıyla birlikte ölçeklenir ve en boy oranını korur.

Video nasıl eklenir

<video> elementini bir video dosyasına yönlendir ve okur onu oynatabilsin diye controls ekle:

<video src="movie.mp4" controls width="640"></video>

controls tarayıcının kendi oynatıcısını gösterir: oynat ve duraklat, bir zaman çizelgesi, ses ve tam ekran. O olmadan video öylece durur. Bu önizleme video dosyası yükleyemez, bu yüzden bu sayfadaki örnekler elementi bir script'in çizdiği küçük bir canvas animasyonuyla besler; özellikler bir dosyayla nasıl çalışıyorlarsa tam olarak öyle çalışır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Video</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video id="player" controls muted width="320" height="180"></video>
  <p>Press play.</p>
  <script>
    // Stand-in for a video file: an animation drawn on a canvas
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let x = 0;
    (function draw() {
      ctx.fillStyle = '#111827'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#f59e0b'; ctx.beginPath();
      ctx.arc(30 + (x % 260), 90, 24, 0, Math.PI * 2); ctx.fill();
      x += 2; requestAnimationFrame(draw);
    })();
    document.getElementById('player').srcObject = canvas.captureStream(30);
  </script>
</body>
</html>

Kaynak bir dosya değil canlı bir akış olduğu için zaman çizelgesi burada sürüklenemez ve sabit bir uzunluk yoktur. Gerçek bir .mp4 ile aynı oynatıcı tam bir ilerleme çubuğu alır.

Video özellikleri

Özellik	Ne yapar
`controls`	Tarayıcının oynatıcı kontrollerini gösterir
`autoplay`	Olabildiğince erken oynamaya başlar (pratikte yalnızca `muted` iken)
`muted`	Ses kapalı başlar
`loop`	Bittiğinde baştan yeniden başlar
`playsinline`	iPhone'da tam ekrana geçmek yerine sayfanın içinde oynar
`poster="thumb.jpg"`	Video oynamadan önce gösterilen resim
`preload`	`none`, `metadata` (yalnızca boyut ve uzunluk) ya da `auto` (ne kadar indirileceğine tarayıcı karar verir)
`width`, `height`	Piksel cinsinden boyut; ikisini de ayarlamak video yüklenmeden önce yer ayırır

autoplay, muted ve loop

Tarayıcılar kendiliğinden sesli olarak başlayan videoları engeller. Sessiz bir video otomatik oynayabilir; arka plan videoları ve kısa, döngülü klipler böyle çalışır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autoplay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .hero { position: relative; width: 320px; height: 180px; border-radius: 10px; overflow: hidden; }
    .hero video { width: 100%; height: 100%; object-fit: cover; }
    .hero h1 { position: absolute; inset: auto 0 0 0; margin: 0; padding: 10px; color: #fff; font-size: 20px; background: rgba(0, 0, 0, 0.45); }
  </style>
</head>
<body>
  <div class="hero">
    <video id="bg" autoplay muted loop playsinline></video>
    <h1>Background video</h1>
  </div>
  <p id="state"></p>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let t = 0;
    (function draw() {
      ctx.fillStyle = 'hsl(' + (t % 360) + ', 70%, 45%)';
      ctx.fillRect(0, 0, 320, 180);
      t += 1; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('bg');
    video.srcObject = canvas.captureStream(30);
    video.addEventListener('playing', () => {
      document.getElementById('state').textContent = 'Playing without a click, because it is muted.';
    });
  </script>
</body>
</html>

Dört özellik bir set olarak çalışır: başlamak için autoplay, tarayıcı izin versin diye muted, bir klip için loop ve iPhone'lar onu tam ekran açmasın diye playsinline. Sesli otomatik oynayan video yalnızca engellenmekle kalmaz, konuşması bastırılan ekran okuyucu kullananlar için de bir sorundur. Bir klip beş saniyeden uzun oynuyorsa insanlara onu duraklatmanın bir yolunu ver.

Poster resmi ve preload

poster, video oynamadan önce küçük resim gibi bir resim gösterir. Burada videonun hiç kaynağı yok, yani görülecek tek şey poster:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Poster</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video controls width="320" height="180" preload="none"
    poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180'%3E%3Crect width='320' height='180' fill='%232563eb'/%3E%3Ctext x='160' y='98' font-family='Arial' font-size='22' fill='white' text-anchor='middle'%3EEpisode 1: Intro%3C/text%3E%3C/svg%3E">
  </video>
</body>
</html>

preload="none" ile tarayıcı, okur oynat'a basana kadar hiçbir şey indirmez ve poster alanın boş görünmesini engeller. Süre oynatmadan önce görünsün istiyorsan preload="metadata" kullan. Poster olmadan çoğu tarayıcı ilk kareyi yükledikten sonra onu gösterir.

source ile biçimler ve yedekler

src yerine <source> elementleriyle birkaç dosya listeleyebilirsin. Tarayıcı desteklediği ilkini oynatır:

<video controls width="640" poster="thumb.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
  <p>Your browser cannot play this video. <a href="movie.mp4">Download it</a>.</p>
</video>

H.264 videolu MP4 güncel her tarayıcıda oynar, bu yüzden tek bir dosyan olduğunda güvenli seçimdir. type özelliği tarayıcının oynatamadığı biçimleri indirmeden atlamasını sağlar. Sondaki metin yalnızca <video> elementini hiç desteklemeyen tarayıcılarda görünür.

track ile altyazılar

<track kind="captions">, zamanlanmış satırlardan oluşan düz bir metin dosyası olan bir WebVTT dosyası yükler. Tarayıcı kontrollerine bir altyazı butonu ekler ve metni videonun üzerine çizer:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to the course.

00:00:03.000 --> 00:00:06.500
Today we build our first web page.

Altyazılar sağır ve işitme güçlüğü çeken izleyicilere, sesi kapalı izleyenlere ve bir videoyu ikinci bir dilde takip eden herkese yardımcı olur. Bir track'in tıklama gerekmeden gösterilmesi için ona default ekle. Başka bir alan adından gelen bir altyazı dosyası CORS header'larına ve videoda crossorigin özelliğine ihtiyaç duyar.

Stil vermek ve JavaScript ile kontrol etmek

Video, bir resim gibi yerine konan (replaced) bir elementtir: height: auto ile width: 100% onu responsive yapar, object-fit de farklı şekilli bir kutuyu nasıl dolduracağına karar verir. JavaScript play(), pause(), currentTime, volume ve play, pause ve ended gibi olayları alır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom controls</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    video { width: 100%; max-width: 360px; height: auto; border-radius: 10px; display: block; }
    button { font: inherit; margin-top: 8px; padding: 6px 14px; }
  </style>
</head>
<body>
  <video id="v" muted width="320" height="180"></video>
  <button id="toggle">Play</button>
  <span id="status">Paused</span>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let a = 0;
    (function draw() {
      ctx.fillStyle = '#e5e7eb'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#16a34a'; ctx.beginPath();
      ctx.arc(160 + Math.cos(a) * 60, 90 + Math.sin(a) * 60, 16, 0, Math.PI * 2); ctx.fill();
      a += 0.05; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('v');
    const button = document.getElementById('toggle');
    const status = document.getElementById('status');
    video.srcObject = canvas.captureStream(30);
    button.onclick = () => (video.paused ? video.play() : video.pause());
    video.addEventListener('play', () => { button.textContent = 'Pause'; status.textContent = 'Playing'; });
    video.addEventListener('pause', () => { button.textContent = 'Play'; status.textContent = 'Paused'; });
  </script>
</body>
</html>

play(), tarayıcı oynatmayı engellediğinde (örneğin sesli otomatik oynatma) reddedilen bir promise döndürür, bu yüzden yayındaki kod onu catch ile yakalamalı. Kendi kontrollerini yapmak isteğe bağlıdır; yerleşik controls klavyeyle erişilebilir ve çevrilmiştir, özel butonların bunu yeniden üretmesi gerekir. YouTube ya da Vimeo'da barındırılan videolar için ise onların oynatıcısını bir iframe ile yerleştirirsin.

Sık yapılan hatalar

muted olmadan autoplay. Tarayıcı engeller. muted ve playsinline ekle.
controls unutmak. Kendi kontrollerini yapmadıysan, okurun videoyu başlatmasının hiçbir yolu yoktur.
width ve height olmaması. Video yüklendiğinde sayfa zıplar. İkisini de ayarla, sonra CSS ile ölçekle.
Devasa dosyalar. Videoları web için sıkıştır ve sayfanın aşağısındaki videolar için preload="none" ya da "metadata" kullan.
Konuşma içeren videolarda altyazı olmaması. Bir <track kind="captions"> ekle.

Sıkça Sorulan Sorular

HTML'de video nasıl eklenir?

<video src="movie.mp4" controls width="640"></video> kullan. controls özelliği tarayıcının oynat butonunu, zaman çizelgesini ve ses kontrolünü gösterir. O olmadan video ilk karesini (ya da poster'ını) gösterir ve kullanıcı onu başlatamaz.

Videomda autoplay neden çalışmıyor?

Tarayıcılar sesli otomatik oynatmayı engeller. autoplay yanına muted, iPhone'lar onu tam ekran yerine sayfanın içinde oynatsın diye de playsinline ekle: <video autoplay muted loop playsinline>.

Web için hangi video biçimini kullanmalıyım?

H.264 videolu MP4 güncel her tarayıcıda oynar, bu yüzden güvenli varsayılandır. <source> ile önce daha küçük bir WebM dosyası listeleyip tarayıcının desteklediği ilk biçimi seçmesine izin verebilirsin.

Bir videoya küçük resim (thumbnail) nasıl eklenir?

Bir resim URL'siyle poster özelliğini kullan: <video poster="thumb.jpg" controls>. Resim, video oynamaya başlayana kadar görünür.

Bir HTML videosuna altyazı nasıl eklenir?

Videonun içine bir <track kind="captions" src="captions.vtt" srclang="en" label="English"> ekle. Dosya WebVTT biçimini kullanır ve tarayıcı kontrollerinde bir altyazı butonu gösterir.

Bir videoyu nasıl responsive yaparım?

CSS'te width: 100% ve height: auto (ya da max-width: 100%) ayarla. Video kapsayıcısıyla birlikte ölçeklenir ve en boy oranını korur.

İlgili kavramlar