HTML video etiketi: örneklerle eksiksiz kılavuz

Önemli noktalar

• <video> öğesini MP4 (H.264/AAC) kaynağıyla kullanın; daha küçük dosyalar istiyorsanız önce WebM ekleyin.

• controls, bir poster ve preload="metadata" ekleyin; otomatik oynatmayı yalnızca sessiz ve satır içi olduğunda kullanın.

• Alanı aspect-ratio ile ayırın ve her düzene uymak için object-fit kullanın.

• Erişilebilirlik için <track> ile altyazı ekleyin.

• YouTube veya Vimeo için onların iframe oynatıcılarını kullanın; çok sayıda video için galeri kullanın.

Temel örnek

<video controls width="640" poster="poster.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

Öznitelikler

Duyarlı video

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

Altyazılar

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English" default>
</video>

YouTube gömmek video etiketi değildir

YouTube ve Vimeo videoları <video> ile oynatılamaz; onların iframe oynatıcılarını kullanın. YouTube gömme kodu oluşturucumuza bakın.

Kodsuz yol

Tek bir oynatıcı yerine YouTube, Vimeo ve barındırılan videolardan oluşan bir galeriye mi ihtiyacınız var? Bir widget kullanın.

Elfsight Video Gallery'yi deneyin

Biçimler ve tarayıcı desteği

Videoyu JavaScript ile kontrol etme

const v = document.querySelector("video");
v.play();            // returns a Promise
v.pause();
v.currentTime = 30;  // seek to 0:30
v.muted = true;
v.addEventListener("ended", () => console.log("done"));
v.addEventListener("timeupdate", () => console.log(v.currentTime));

play() işlevinin döndürdüğü Promise'i ele alın; tarayıcı oynatmayı engellediğinde reddedilir.

Tembel yükleme ve performans

• preload="none" veya "metadata" ilk sayfayı hafif tutar.

• Bir poster görseli anında görünür.

• iframe'lerde loading="lazy" kullanın; <video> için src'yi görünür olunca ayarlayın.

• Düzen kaymasını önlemek için aspect-ratio ile alan ayırın.

Erişilebilirlik kontrol listesi

• <track kind="captions"> ile altyazı ekleyin.

• Kendi erişilebilir denetimlerinizi sağlamadıkça controls'ü bırakın.

• Asla sesli otomatik oynatmayın.

• Önemli videolar için bir döküm sağlayın.

Sık karşılaşılan sorunlar

1. 1.

   Video iPhone'da oynamıyor

   Otomatik oynatma için playsinline ve muted ekleyin; codec'in H.264 olduğunu kontrol edin.

2. 2.

   Oynatmadan önce siyah ekran

   Bir poster görseli ekleyin.

3. 3.

   Mobilde yanlış boyut

   width:100%; height:auto; aspect-ratio kullanın.

4. 4.

   Büyük dosya yavaş yükleniyor

   Sıkıştırın veya bir video platformundan akıtın.

Tarayıcı kaynağı nasıl seçer

Tarayıcı <source> öğelerini yukarıdan aşağıya okur ve desteklediği ilkini oynatır. Bu yüzden daha küçük, daha modern biçimi (WebM) önce, evrensel olarak desteklenen biçimi (MP4) ikinci sırada listelersiniz. type özniteliği, tarayıcının oynatamayacağı dosyaları indirmeden atlamasını sağlar; her zaman ekleyin. Kaynakların ardından <video> içine yazılan metni yalnızca videoyu hiç desteklemeyen tarayıcılar gösterir.

<video controls preload="metadata" poster="poster.jpg">
  <source src="clip.webm" type='video/webm; codecs="vp9, opus"'>
  <source src="clip.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <a href="clip.mp4">Download the video</a>
</video>

Videoyu her düzene sığdırma

Videonun kutusunu nasıl doldurduğunu kontrol etmek için CSS kullanın. object-fit: cover alanı doldurur ve kenarları kırpar; kahraman bölümleri için idealdir. object-fit: contain tüm kareyi bantlarla gösterir. Dosya yüklenmeden önce yer ayırmak ve düzen kaymasını önlemek için aspect-ratio ile birleştirin.

.video-box{aspect-ratio:16/9;width:100%}
.video-box video{width:100%;height:100%;object-fit:cover}

/* vertical clips */
.video-vertical{aspect-ratio:9/16;max-width:360px}

Resim içinde resim ve tam ekran

Modern tarayıcılar, JavaScript'ten bir videoyu yüzen bir pencereye veya tam ekrana taşımanıza izin verir; ikisi de tıklama gibi bir kullanıcı hareketi gerektirir.

const v = document.querySelector("video");

pipButton.onclick = async () => {
  if (document.pictureInPictureElement) await document.exitPictureInPicture();
  else await v.requestPictureInPicture();
};

fullButton.onclick = () => v.requestFullscreen();

Tarayıcının kendi PiP düğmesini istemiyorsanız öğeye disablepictureinpicture ekleyin.

Video etkileşimini izleme

Video öğesi, analiz aracınıza gönderebileceğiniz olaylar tetikler. Başlangıçları, tamamlamaları ve ilerleme kilometre taşlarını izleyin; saniyede birkaç kez tetiklenen her timeupdate'i değil.

const v = document.querySelector("video");
const sent = new Set();
const track = (name) => window.gtag && gtag("event", name, { video_title: v.dataset.title });

v.addEventListener("play", () => track("video_start"), { once: true });
v.addEventListener("ended", () => track("video_complete"));
v.addEventListener("timeupdate", () => {
  const p = Math.floor((v.currentTime / v.duration) * 4) * 25; // 25, 50, 75
  if (p && p < 100 && !sent.has(p)) { sent.add(p); track("video_progress_" + p); }
});

Video etiketi, iframe veya galeri?

Video etiketi, kendi kısa dosyalarınız için doğru araçtır: ürün döngüleri, kahraman arka planları, CDN'de barındırdığınız kısa açıklayıcı videolar. YouTube veya Vimeo'daki videolar için onların iframe oynatıcılarını kullanın; akışı, kalite değişimini ve altyazıları onlar yönetir. Çok sayıda videoya, kendini güncelleyen akışlara veya platform karışımına ihtiyacınız olduğunda, bir galeri widget'ı oynatma listelerini, açılır pencereleri ve düzenleri elle oluşturmaktan sizi kurtarır.