Web sitesine canlı yayın ekleme: hls.js, Video.js ve YouTube embed

Başlamadan önce: elinizde bir .m3u8 adresi olmalı

Tarayıcılar RTMP oynatamaz. Kodlayıcınızdan RTMP ile gönderdiğiniz yayının, sunucu tarafında HLS'e (bir .m3u8 playlist ve küçük segment dosyaları) çevrilmesi gerekir. HLS'in nasıl çalıştığını HLS nedir, LL-HLS nasıl çalışır yazımızda ayrıntılı anlattık. Bu yazıdaki örneklerde yayın adresinizi https://yayin.example.com/live/stream.m3u8 olarak varsayıyoruz.

Yöntem 1: HTML5 video + hls.js

hls.js, HLS istemcisini JavaScript ile uygulayan açık kaynak bir kütüphanedir. README'ye göre oynatma için HTML5 video ve Media Source Extensions (MSE) kullanır; MSE olmayan iOS 17.1 ve sonrası Safari'de ise Managed Media Source'a dayanır. Canlı (live) ve Low-Latency HLS akışlarını destekler. README'deki temel yerleştirme örneği şudur:

<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
<video id="video" controls muted playsinline></video>
<script>
  var video = document.getElementById('video');
  var videoSrc = 'https://yayin.example.com/live/stream.m3u8';
  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  }
  // MSE yoksa ve tarayici HLS'i kendisi oynatabiliyorsa
  // .m3u8 adresini dogrudan video etiketine verin.
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoSrc;
  }
</script>

README'deki örneğe yalnızca controls muted playsinline özniteliklerini ve kendi adresimizi ekledik; nedenini aşağıdaki autoplay bölümünde açıklıyoruz. README, hls.js@1 etiketinin 1.x serisinin en güncel sürümünü getirdiğini gösterir; üretimde belirli bir sürümü sabitlemek (Ekim 2026 itibarıyla GitHub'daki son sürüm v1.7.4) beklenmedik değişikliklere karşı daha güvenlidir.

Önce Hls.isSupported() mu, önce native HLS mi?

README, varsayılan kurulumda önce Hls.isSupported() kontrolünü önerir. Gerekçesi şu: canPlayType('application/vnd.apple.mpegurl') Safari'nin yanında Chrome gibi başka tarayıcılarda da boş olmayan bir değer ("maybe") döndürebilir, ama her tarayıcı her HLS içeriğini aynı başarıyla oynatmaz. Native oynatmayı öne almak isterseniz README'deki alternatif kurulum, bunu yalnızca 'ManagedMediaSource' in window koşulunu da sağlayan (modern Safari gibi) tarayıcılarla sınırlar.

Safari ve iOS

README'ye göre Safari (iOS, iPadOS ve macOS), düz <video> etiketine verilen kaynak adresiyle yerleşik HLS desteğine sahiptir. Yukarıdaki kodun else if dalı bu durumu karşılar. hls.js 1.5.0 sürümünden itibaren iOS 17.1+ Safari'de Managed Media Source üzerinden de çalışır.

Yöntem 2: Video.js (hazır arayüzlü oynatıcı)

Kendi kontrollerinizi yazmak istemiyorsanız Video.js hazır bir arayüz sunar. Ekim 2026 itibarıyla Video.js'in güncel sürümü v10'dur ve özel HTML öğeleri (custom elements) üzerine kuruludur; v8 kullanan siteler için ayrı bir geçiş rehberi bulunur. Video.js'in CDN kurulum rehberi, canlı video ön ayarı (live-video) ve HLS için şu kodu üretir:

<!-- <head> icine -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/live-video.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/hlsjs-video.js"></script>

<!-- Oynaticinin gorunecegi yere -->
<live-video-player>
  <live-video-skin style="display: block; width: 100%; aspect-ratio: 16 / 9;">
    <hlsjs-video src="https://yayin.example.com/live/stream.m3u8" playsinline></hlsjs-video>
  </live-video-skin>
</live-video-player>

Video.js belgeleri tüm CDN adreslerini aynı sürüme sabitlemenizi açıkça ister; @latest gibi etiketler farklı sürümlerden dosyaların karışmasına yol açabilir. Canlı yayın rehberine göre <media-live-button> öğesi izleyicinin canlı uçta (live edge) olup olmadığını gösterir ve tıklanınca canlı uca geri sarar. Rehber, ağ takıldığında veya sekme arka plana alındığında oynatmanın canlı uçtan geri kalabileceğini, bu yüzden kullanıcıya her zaman canlı uca dönme yolu verilmesi gerektiğini belirtir. Hazır "skin" bu kontrolleri zaten içerir.

Sunucu tarafı: CORS ve MIME türleri

hls.js README'si açıktır: tüm HLS kaynakları GET isteklerine izin veren CORS başlıklarıyla sunulmalıdır. Oynatıcı sayfanız www.siteniz.com, yayın dosyalarınız yayin.siteniz.com üzerindeyse tarayıcı, sunucunun izin başlığını görmedikçe playlist ve segmentleri JavaScript'e vermez. nginx ile HLS sunuyorsanız örnek bir yapılandırma şöyle olabilir:

location /live/ {
    types {
        application/vnd.apple.mpegurl m3u8;
        video/mp2t ts;
    }
    root /var/www/hls;
    add_header Cache-Control no-cache;
    add_header Access-Control-Allow-Origin "https://www.siteniz.com" always;
    add_header Access-Control-Allow-Methods "GET, OPTIONS" always;
}

types bloğu ve Cache-Control no-cache satırı nginx-rtmp-module README'sindeki HLS örneğinden alınmıştır. Erişimi tek bir siteyle sınırlamak istemiyorsanız Access-Control-Allow-Origin değerini * yapabilirsiniz. Ayrıntılar için Nginx yapılandırma rehberi yazımıza, yayını CDN arkasına almak istiyorsanız CDN nedir yazımıza bakın. CDN kullanırken CORS başlıklarının CDN tarafından da iletildiğinden emin olun.

HTTPS ve mixed content

Siteniz HTTPS ile açılıyorsa yayın adresiniz de HTTPS olmalıdır. MDN'e göre tarayıcılar src özniteliğiyle verilen video ve ses gibi "yükseltilebilir" içerikleri HTTP'den HTTPS'e otomatik yükseltir, ancak fetch() ve XMLHttpRequest istekleri gibi diğer içerikleri engeller. hls.js playlist ve segmentleri bu tür isteklerle indirdiği için HTTP bir yayın adresi HTTPS sayfada çalışmaz. MDN ayrıca, normalde yükseltilecek isteklerin bile adres bir alan adı yerine IP adresiyse engellendiğini belirtir. Yani http://1.2.3.4/live.m3u8 gibi bir adres kullanmayın; yayın sunucunuza alan adı ve SSL sertifikası tanımlayın (bkz. SSL sertifikası nasıl alınır).

Autoplay: yayın neden kendiliğinden başlamıyor?

Chrome'un autoplay politikasına göre sessiz (muted) otomatik oynatma her zaman serbesttir. Sesli otomatik oynatma ise kullanıcı alan adıyla etkileşime girmişse (tıklama, dokunma vb.) veya masaüstünde kullanıcının Media Engagement Index eşiği aşılmışsa mümkündür. MDN de benzer bir genel kural verir: ses kapalıysa, kullanıcı siteyle etkileşime girmişse, site izin listesindeyse ya da iframe için autoplay izni verilmişse otomatik oynatmaya izin verilir; aksi halde büyük ihtimalle engellenir.

• Otomatik başlatmak istiyorsanız muted özniteliğini ekleyin ve kullanıcıya belirgin bir "sesi aç" düğmesi sunun.
• MDN, Safari'de otomatik oynatma için playsinline özniteliğinin gerekli olduğunu belirtir.
• play() bir Promise döndürür; NotAllowedError ile reddedilirse kullanıcıya oynat düğmesi gösterin.
• Oynatıcıyı başka bir sayfaya iframe ile yerleştiriyorsanız üst sayfa allow="autoplay" ile izni iframe'e devredebilir.

var oynat = video.play();
if (oynat !== undefined) {
  oynat.catch(function (hata) {
    if (hata.name === 'NotAllowedError') {
      // Tarayici otomatik oynatmayi engelledi: oynat dugmesini gosterin
      document.getElementById('oynat-dugmesi').hidden = false;
    }
  });
}

Responsive (mobil uyumlu) yerleştirme

Oynatıcının her ekranda 16:9 oranını koruması için CSS'in aspect-ratio özelliğini kullanabilirsiniz; Video.js'in CDN örneği de skin öğesine width: 100%; aspect-ratio: 16 / 9; verir. Aynı yaklaşım düz video etiketi ve iframe için de geçerlidir:

.canli-oynatici {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background: #000;
}
.canli-oynatici video,
.canli-oynatici iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

Yöntem 3: YouTube canlı yayınını iframe ile gömme

Yayını YouTube'da yapıyorsanız en kolay yol, YouTube'un yerleştirme kodunu kullanmaktır. YouTube Yardım'a göre bilgisayarda videonun (canlı yayının izleme sayfasının) altındaki SHARE (Paylaş) düğmesine, ardından Embed (Yerleştir) seçeneğine tıklar, çıkan HTML kodunu sitenize yapıştırırsınız.

• Kanal sahibi YouTube Studio'da Allow embedding (Yerleştirmeye izin ver) seçeneğini kapatırsa yayın başka sitelerde oynatılamaz.
• YouTube, yerleştirilen oynatıcının HTTP Referer bilgisi göndermesini şart koşar; gönderilmezse izleyici "error 153" hata ekranı görür. Sitenizde Referrer-Policy: no-referrer gibi bir başlık varsa bunu gözden geçirin.
• Yaş kısıtlamalı içerik çoğu üçüncü taraf sitede izlenemez ve izleyici YouTube'a yönlendirilir.
• Gizlilik için alan adını youtube-nocookie.com yaparak gelişmiş gizlilik modunu kullanabilirsiniz.
• IFrame Player parametrelerinde autoplay=1 ve iOS için playsinline parametresi bulunur; tarayıcı autoplay kuralları burada da geçerlidir.

<div class="canli-oynatici">
  <iframe src="https://www.youtube-nocookie.com/embed/CANLI_YAYIN_VIDEO_ID?playsinline=1"
          title="Canli yayin"
          allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
          allowfullscreen></iframe>
</div>

Bu kodda video kimliği her yayın için değişebilir; YouTube'un her yayında aynı kalan bir kanal adresini resmî yardım sayfalarında belgelediğini göremedik, bu yüzden burada önermiyoruz. Yayın kimliği değişmeyen kalıcı bir yerleştirme istiyorsanız kendi HLS adresiniz (Yöntem 1 veya 2) daha öngörülebilirdir.

Yöntemlerin karşılaştırması

Sorun giderme kontrol listesi

• Tarayıcı konsolunda "CORS" hatası: yayın sunucusu Access-Control-Allow-Origin başlığını göndermiyor.
• "Mixed Content" uyarısı: sayfa HTTPS, yayın HTTP. Yayın adresini HTTPS yapın.
• Görüntü geliyor ama oynatma başlamıyor: autoplay engellenmiş olabilir; muted ekleyin veya oynat düğmesi gösterin.
• .m3u8 dosyası indiriliyor ya da 404 veriyor: yayın o anda aktif mi, yol ve MIME türü doğru mu kontrol edin.
• İzleyiciler gerçek zamandan çok geride: bkz. canlı yayın gecikmesini düşürme. Sık takılma için canlı yayın donması çözümleri yazımıza bakın.

Sık Sorulan Sorular

WordPress sitesine canlı yayın nasıl eklenir?

WordPress'te "Özel HTML" bloğu kullanarak yukarıdaki hls.js veya Video.js kodunu yapıştırabilirsiniz. Tema veya güvenlik eklentileri dış betikleri engelliyorsa betik dosyasını kendi sunucunuzdan da sunabilirsiniz.

hls.js mi Video.js mi kullanmalıyım?

Sade bir oynatıcı ve tam kontrol istiyorsanız hls.js yeterlidir. Hazır arayüz, canlı uca dön düğmesi ve tema desteği istiyorsanız Video.js işinizi hızlandırır; Video.js v10'un canlı yayın bileşeni de arka planda hls.js kullanabilir.

Yayın neden iPhone'da açılıyor ama Chrome'da açılmıyor?

Safari HLS'i kendisi oynatır, Chrome'da ise genellikle hls.js devrededir ve CORS kuralları JavaScript istekleri için uygulanır. Chrome'da hata alıyorsanız ilk bakılacak yer CORS başlığı ve HTTPS'tir.

Ses açık otomatik başlatmak mümkün mü?

Garanti edilemez. Chrome ve MDN'e göre sesli otomatik oynatma kullanıcı etkileşimi veya tarayıcının etkileşim ölçütlerine bağlıdır. En güvenli yol sessiz başlatıp "sesi aç" düğmesi sunmaktır.

Yazılım ve platform adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen şirketlerle ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HLS nedir · Canlı yayın gecikmesi · OBS canlı yayın ayarları · SSL sertifikası nasıl alınır · CDN nedir · Web TV yazılımı