YouTube Embed API JavaScript ile Player Kontrolü

IFrame player API’si, bir YouTube video oynatıcısını web sitenize yerleştirmenize ve oynatıcıyı JavaScript kullanarak kontrol etmenize izin verir.

Apinin JavaScript fonksiyonlarını kullanarak,videoları sıraya koyup oynatabilirsiniz veya bu apiyi kullanarak videonun bilgilerini alabiliriz.

Duruma göre videonun kalitesini değiştirebiliriz

Gereksinimler

  • Embed API’nin çalışması için  kullanıcının HTML5 postMessage, Günümüzde birçok modern tarayıcılar postMessage yi desteklemektedir.Internet Explorer 7 ve altı desteklememektedir.
  • Ekran boyutu 480px X 270px veya daha büyük olması önerilmektedir.
  • onYouTubeIframeAPIReady: bu fonksiyon  sayfa yüklendikten sonra çalışır.Sayfa yüklendiğinde görüntülenmesini istediğiniz oynatıcı nesnelerini oluşturabiliriz.

Bu kod örneği ile videonun id sini kodumuza ekleyerek videoyu web sayfamıda görüntüleyebiliriz.

Bu kodda onPlayerStateChange metodu videoyu durdurduğumuzda başlattığımızda ileriye sardığımızda veya kalitesini değiştirdiğimemiz gibi durumlarda bu fonksiyon çalışır.

Videoyu istenilen çözünürlikte açmak

setPlaybackQuality özelliğini kullanarak videoyu istenilen çözünürlükte çalıştırabiliriz.’hd720‘ yazan stringe highres, hd1080, hd720, large, medium ve small değerleri girilebilir.

function onPlayerReady(event) {
    event.target.setPlaybackQuality('hd720');
 }

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.BUFFERING) {
        event.target.setPlaybackQuality('hd720');
    }
}

Videoyu oynatma durumları

Sayfa yüklendiğinde videonun başlamasını istiyorsak sadece ufak bir kod eklememiz yeterlidir.

function onPlayerReady(event) {
   event.target.playVideo();
}

diğer fonksiyonlarda şöyle

  • player.pauseVideo() Void fonksiyon
  • player.stopVideo() Void fonksiyon
  • player.seekTo(saniye:Sayı, BooleanVoid fonksiyon
  • player.nextVideo() Void fonksiyon
  • player.previousVideo()  Void fonksiyon
  • player.playVideoAt(index:Number) Void fonksiyon

Video Ses Durumları

Videonun sesini açık kapatmak ses seviyesini değiştirmek gibi fonksiyonlar.

  • player.mute()  Void fonksiyon
  • player.mute() Void fonksiyon
  • player.isMuted() Void fonksiyon
  • player.setVolume(volume:Number) Void fonksiyon
  • player.getVolume() Void fonksiyon

Video Durumu

Video başlatılmamış,bitmiş,oynatılıyor,duraklatılmış gibi durumlarını event.data yardımıyla öğrenebiliriz. Nasıl mı şu şekilde:

function onPlayerStateChange(event) {
    alert(event.data)
  }

Burada videonun durumunda herhangi bir değişiklik olduğunda durum sayısını yazdırdık.Durum sayılarının ne anlama geldiğine göz atalım.

  • -1 – Başlatılmamış
  • 0 – Bitmiş
  • 1 – Devam Ediyor
  • 2 – Duraklatıldı
  • 3 – Doluyor
  • 5 – video cued

Örnek Uygulama

Oynatıcı Parametrelere Buradan ulaşabilirsiniz

6 thoughts on “YouTube Embed API JavaScript ile Player Kontrolü”

  1. Merhabalar
    Öncelikle paylaşımınız için teşekkürler.
    Bir noktada takıldım , video autoplay şeklinde kendi kendine başlatılmıyor.

    1. Merhabalar Anıl Bey,
      Youtube yakın bir zamanda autoplay özelliğinde bir değişiklik getirdi, Embed olarak yerleştirdiğiniz playerin sesini mute olarak ayarladığınız takdirde sayfa yüklendiğinde videonun otomatik oynatma özelliğini kullanabiliyorsunuz. Aksi takdirde autoplay kullanılmamaktadır. Eğer sayfa yüklendiğinde hem otomatik olarak çalışsın hemde videonun sesi açık olsun istiyorsanız farklı çözüm yollarına başvurmanız gerekecektir.

  2. Merhaba, güzel bir web sitesi olmuş teşekkürler.

    Aşağıdaki hatayı alıyorum. Bir bilginiz var mı acaba. siz de bu hatayı aldınız mı daha önce?

    Bir hata oluştu. Lütfen daha sonra tekrar deneyin. (Oynatma kimliği: ll60OqpkSaFJiycT)
    Daha fazla bilgi edinin

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir