HTML Academy · Ders

video Öğesi ve En-Boy Oranı

Videoları gömün ve doğru en-boy oranlarını koruyun

video Öğesi ve En-Boy Oranı, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

video Öğesi

<video> öğesi videoyu yerel olarak gömer:

<video controls width="800" height="450" src="tutorial.mp4">
  Your browser does not support video.
</video>

Temel Öznitelikler

Önemli video öznitelikleri:

<video
  src="demo.mp4"
  controls           <!-- show player UI -->
  width="1280"       <!-- intrinsic width -->
  height="720"       <!-- intrinsic height -->
  poster="preview.jpg" <!-- thumbnail before play -->
  preload="metadata"   <!-- preload only metadata -->
>
  Your browser does not support video.
</video>

Afiş Özniteliği

poster özniteliği, video oynatılmadan önce gösterilen küçük resmi ayarlar:

<video controls poster="/thumbnails/episode-42.jpg" width="800" height="450">
  <source src="episode-42.mp4" type="video/mp4">
</video>
<!-- Without poster: browser shows a black frame
     or the first frame of the video (browser-dependent) -->

En Boy Oranı için Genişlik ve Yükseklik

Düzen kaymasını önlemek için genişlik ve yüksekliği her zaman belirtin:

<video controls width="1280" height="720" src="video.mp4"></video>
<!-- Browser reserves correct space before video loads -->
<!-- Prevents CLS (Cumulative Layout Shift) -->
<!-- Make responsive with CSS:
  video { width: 100%; height: auto; }
-->

Duyarlı Video CSS'i

CSS ile videoyu duyarlı hâle getirin:

video {
  width: 100%;
  height: auto;
  max-width: 1280px;
  display: block;
  margin: 0 auto;
}

/* Aspect ratio box: */
.video-wrapper {
  position: relative;
  padding-top: 56.25%;  /* 16:9 aspect ratio: 9/16 = 0.5625 */
}
.video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

CSS aspect-ratio Özelliği

CSS aspect-ratio kullanılarak uygulanan modern yaklaşım:

video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* Other common ratios: */
/* 4:3 → aspect-ratio: 4 / 3 */
/* 21:9 → aspect-ratio: 21 / 9 */
/* 1:1 → aspect-ratio: 1 */

JS ile Video Oynatma Denetimleri

JavaScript ile video denetimi:

const video = document.getElementById('my-video');

video.play();
video.pause();
video.currentTime = 60;  // jump to 1 minute
video.playbackRate = 1.5;  // 1.5x speed
video.volume = 0.7;
video.muted = true;
video.requestFullscreen();

console.log(video.duration);    // total length
console.log(video.paused);      // is it paused?

Video Olayları

Video olaylarını dinleyin:

video.addEventListener('play', () => updatePlayButton());
video.addEventListener('pause', () => updatePlayButton());
video.addEventListener('ended', () => showNextVideo());
video.addEventListener('timeupdate', () => updateProgressBar());
video.addEventListener('loadedmetadata', () => {
  console.log('Duration:', video.duration);
  console.log('Dimensions:', video.videoWidth, 'x', video.videoHeight);
});

Tam Ekran Uygulama Programlama Arayüzü

Program aracılığıyla tam ekrana girin ve tam ekrandan çıkın:

const btn = document.getElementById('fullscreen-btn');
const video = document.getElementById('player');

btn.addEventListener('click', () => {
  if (!document.fullscreenElement) {
    video.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});

document.addEventListener('fullscreenchange', () => {
  btn.textContent = document.fullscreenElement ? 'Exit Fullscreen' : 'Fullscreen';
});

Video Otomatik Oynatma Politikası

Tarayıcıların video otomatik oynatma kuralları:

Sesi kapatılmış video → tüm modern tarayıcılarda otomatik oynatılabilir
Sesi açık video → kullanıcı sayfayla etkileşimde bulunmadıkça engellenir
Google'ın Medya Etkileşimi Endeksi → sık ziyaret eden kullanıcıların otomatik oynatmasına izin verilebilir
Her zaman geri dönüş seçeneği olarak bir oynatma düğmesi sağlayın

Video için Erişilebilirlik

Video için erişilebilirlik gereklilikleri:

Tüm konuşmalar ve önemli sesler için altyazı sağlayın
Sağır veya işitme güçlüğü yaşayan kullanıcılar için bir döküm sağlayın
Kör kullanıcılar için sesli betimlemeler sağlayın (yalnızca görsel olarak verilen bilgileri açıklayın)
Klavye denetimlerinin çalıştığından emin olun (yerleşik denetimler çalışır)

Hızlı Kontrol

Video oynatılmadan önce hangi video özniteliği sabit bir görüntü gösterir?

Özet: video Öğesi

Video öğesinin temel noktaları:

controls — oynatıcı arayüzünü gösterir
width ve height — düzen kaymasını önler
poster — oynatma öncesindeki küçük resim
preload="metadata" — iyi bir varsayılan performans seçeneğidir
Duyarlılık: width: 100%; height: auto; veya aspect-ratio: 16/9
Sesi kapatılmış video otomatik oynatılabilir; sesi açık video çoğu tarayıcıda otomatik oynatılamaz

Sıkça Sorulan Sorular

“video Öğesi ve En-Boy Oranı” dersi ücretsiz mi?

Evet — “video Öğesi ve En-Boy Oranı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“video Öğesi ve En-Boy Oranı” dersinde ne öğreneceğim?

Videoları gömün ve doğru en-boy oranlarını koruyun HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“video Öğesi ve En-Boy Oranı” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön