YouTube IFrame API: uygulamalı rehber

Öne çıkanlar

• https://www.youtube.com/iframe_api adresini bir kez yükleyin ve oynatıcıları onYouTubeIframeAPIReady içinde oluşturun.

• Oynatmayı playVideo, pauseVideo, seekTo, mute ve loadVideoById ile kontrol edin.

• Oynatmaları izlemek ve bozuk videoları atlamak için onStateChange ve onError olaylarını dinleyin.

• IFrame API anahtar gerektirmez; bir kanalın veya oynatma listesinin videolarını listelemek için anahtar ve kota gerektiren YouTube Data API gerekir.

API'yi yükleyin ve oynatıcı oluşturun

<div id="player"></div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
  let player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player("player", {
      videoId: "VIDEO_ID",
      playerVars: { playsinline: 1, rel: 0 },
      events: { onReady: e => e.target.mute().playVideo() }
    });
  }
</script>

Sık kullanılan yöntemler

Olaylar

onReady, onStateChange (oynatılıyor, duraklatıldı, bitti), onError. Bunları görüntülemeleri izlemek veya sonraki videoyu başlatmak için kullanın.

API'ye ihtiyaç duymadığınız durumlar

Pazarlama sayfalarındaki bir galeri, oynatma listesi veya kanal akışı için API, bakımı zor ve çok kod gerektiren bir çözümdür.

Kodsuz yol

YouTube videolarını oynatma listeli bir oynatıcıda gösterin; API kodu gerekmez.

Elfsight Video Gallery'yi deneyin

API nasıl yüklenir

IFrame API tek bir betiktir. Yüklenmesi bittiğinde onYouTubeIframeAPIReady adlı genel bir işlevi çağırır; oynatıcılarınızı burada oluşturun. Birden fazla oynatıcınız olsa bile betiği sayfa başına yalnızca bir kez yükleyin ve her oynatıcıyı kendi öğesi üzerinde oluşturun.

const players = {};
function onYouTubeIframeAPIReady() {
  document.querySelectorAll("[data-yt]").forEach((el) => {
    players[el.id] = new YT.Player(el.id, {
      videoId: el.dataset.yt,
      playerVars: { rel: 0, playsinline: 1 }
    });
  });
}

Oynatıcı durumları

onStateChange olayını dinleyin ve event.data değerini bu sabitlerle karşılaştırın.

Özel bir oynatma düğmesi oluşturun

<div id="player"></div>
<button id="play">Play</button>
<script>
  let player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player("player", { videoId: "VIDEO_ID", playerVars: { controls: 0 } });
  }
  document.getElementById("play").onclick = () => {
    const s = player.getPlayerState();
    s === YT.PlayerState.PLAYING ? player.pauseVideo() : player.playVideo();
  };
</script>

YouTube'un kontrollerini gizlediğinizde, klavye desteği ve etiketler dahil erişilebilir kontrolleri sağlamak sizin sorumluluğunuzdadır.

Oynatmaları ve tamamlanmaları izleyin

events: {
  onStateChange: (e) => {
    const title = e.target.getVideoData().title;
    if (e.data === YT.PlayerState.PLAYING) gtag("event", "video_start", { video_title: title });
    if (e.data === YT.PlayerState.ENDED)   gtag("event", "video_complete", { video_title: title });
  }
}

Hataları yönetin

onError olayını dinleyin ve hata oluştuğunda listenizdeki bir sonraki videoya geçin.

IFrame API ile YouTube Data API karşılaştırması

IFrame API, önceden bildiğiniz videoların oynatılmasını kontrol eder. Bir kanalın yüklemelerini veya bir oynatma listesinin videolarını listelemek için ayrı bir YouTube Data API gerekir; bunun için API anahtarı, günlük kota sınırları ve sizin tarafınızda önbellekleme gerekir. Özel galerilerin çoğunun hafife aldığı kısım budur.

Kodsuz yol

Bir kanalı veya oynatma listesini Data API, anahtar ya da kota olmadan galeri olarak gösterin.

Elfsight Video Gallery'yi deneyin

Eksiksiz bir örnek: ürün videolarından oluşan oynatma listesi

Yaygın bir kullanım senaryosu: tek bir oynatıcı, yanında ürün videolarınızın listesi ve her oynatma için analiz. Oynatıcıyı bir kez oluşturun, listenizi data-id öznitelikli düğmeler olarak oluşturun ve tıklamada loadVideoById çağırın. ENDED olduğunda oynatma listesinin devam etmesi için listenizdeki sonraki kimliği yükleyin. video_start ve video_complete olaylarını video başlığıyla birlikte analiz aracınıza gönderin. Geri kalan her şey (küçük resimler, başlıklar, videoların sırası) kendi verilerinizden gelir; Data API veya bir galeri widget'ı tam olarak bu kısmı sağlar.