¶ Player Görünüm & Özellikler
¶ Profesyonel Canlı Yayın Deneyimi
Yayin.com.tr player'ı sadece bir video oynatıcı değil, tam donanımlı bir canlı yayın deneyimidir. Logo, alt yazı, hava durumu, ses kaynağı seçimi, TV yansıtma, resim içinde resim ve çok daha fazlası — tüm ayarlar panelden yapılır, embed kodu hiç değişmez.
Player üzerindeki tüm özellikler (logo, alt yazı, hava durumu, sosyal medya, ses kaynağı, renkler vb.) panel üzerinden değiştirildiğinde embed kodunu güncellemenize gerek yoktur. JS veya iframe kodunu sitenize bir kez ekleyin — panelden yaptığınız her değişiklik anında yayındaki player'a yansır.
¶ Player Genel Görünüm
Player üzerinde kamera görüntüsüne ek olarak birçok bilgi katmanı (overlay) gösterilebilir. Tüm katmanlar isteğe bağlıdır ve panelden açılıp kapatılabilir.
Player üzerinde görünen öğeler:
| Öğe | Konum | Açıklama |
|---|---|---|
| Logo | Sol üst | Kurum veya şirket logosu. PNG, JPG, SVG formatları desteklenir |
| Tarih / Saat | Sağ üst | Kameranın anlık tarih ve saat bilgisi |
| Sosyal Medya İkonu | Sol alt | Instagram, YouTube, Facebook veya WhatsApp ikonu ve kullanıcı adı. Tıklanabilir |
| WhatsApp Numarası | Sol alt | WhatsApp ikonu ile telefon numarası gösterimi |
| Hava Durumu | Sağ alt | Anlık sıcaklık, hava durumu ikonu, nem oranı. Tıklanabilir — detay paneli açılır |
| Alt Yazı Bandı | En alt | Kayan metin şeridi — haberler, duyurular veya bilgilendirme metinleri |
| Kamera Adı | Alt bar | Aktif kameranın adı ve yayın durumu göstergesi |
| DVR Butonu | Sağ kenar | Kayıt aktif kameralarda DVR'a geçiş butonu |
¶ Alt Yazı Bandı
Player'ın alt kısmında sürekli kayan metin şeridi gösterilir. Bu özellik TV yayınlarındaki "breaking news" bandına benzer ve izleyicilere anlık bilgi aktarmak için kullanılır.
Her alt yazı kaydı için aşağıdaki ayarlar yapılabilir:
| Ayar | Açıklama |
|---|---|
| Metin | Gösterilecek yazı içeriği |
| Link | Tıklandığında açılacak URL (opsiyonel) |
| Başlangıç Tarihi/Saati | Alt yazının görünmeye başlayacağı tarih ve saat |
| Bitiş Tarihi/Saati | Alt yazının otomatik kaldırılacağı tarih ve saat |
| Durum | Aktif veya pasif — geçici olarak gizlemek için |
Birden fazla alt yazı eklenebilir. Aktif olanlar sırayla kayan şerit halinde gösterilir. Süresi dolan alt yazılar otomatik olarak gizlenir.
— Belediye duyuruları ve etkinlik haberleri
— Spor tesislerinde maç sonuçları veya fikstür bilgileri
— İşletme iletişim bilgileri ve promosyon mesajları
— Acil durum uyarıları ve bilgilendirme mesajları
¶ Hava Durumu
Player üzerinde anlık hava durumu bilgisi gösterilebilir. Sağ alt köşedeki hava durumu widget'ı tıklandığında detaylı hava durumu paneli açılır.
¶ Widget Görünümü
Player köşesindeki kompakt widget şunları gösterir: sıcaklık (°C), hava durumu ikonu (güneşli, bulutlu, yağmurlu vb.), nem oranı ve şehir adı.
¶ Detaylı Hava Durumu Paneli
Hava durumu widget'ına tıklandığında kapsamlı bir bilgi paneli açılır:
Anlık veriler:
| Veri | Açıklama |
|---|---|
| Sıcaklık | Anlık hava sıcaklığı ve hissedilen sıcaklık |
| Nem | Havadaki nem oranı (%) |
| Rüzgar | Rüzgar hızı (km/h) ve yönü |
| Basınç | Atmosfer basıncı (hPa) |
| Gün Doğumu | Güneşin doğuş saati |
| Gün Batımı | Güneşin batış saati |
| Görüş Mesafesi | Meteorolojik görüş mesafesi (km) |
Ek bilgiler (aşağı kaydırarak):
| Veri | Açıklama |
|---|---|
| Deniz Sıcaklığı | En yakın deniz istasyonunun anlık su sıcaklığı (°C) |
| Hava Kalitesi | Hava Kalitesi İndeksi (HKİ) değeri ve durumu (İyi, Orta, Hassas, Sağlıksız) — renk skalası ile gösterilir |
| Kar Kalınlığı | Kış aylarında en yakın kar ölçüm istasyonunun verileri |
| 5 Günlük Tahmin | Önümüzdeki 5 günün hava tahmini — gün adı, ikon, en yüksek ve en düşük sıcaklık |
Hava durumu verileri OpenWeatherMap API'den, deniz sıcaklığı ve hava kalitesi verileri Meteoroloji Genel Müdürlüğü istasyonlarından, kar kalınlığı verileri ise ilgili ölçüm istasyonlarından alınır. Tüm veriler periyodik olarak güncellenir. Paneldeki player ayarlarından şehir araması yaparak hava durumu konumunu belirlersiniz.
¶ Ses Kaynağı Seçimi
Player üzerinde birden fazla ses kaynağı tanımlanabilir. İzleyici kontrol çubuğundaki kulaklık ikonuna tıklayarak ses kaynakları arasında geçiş yapabilir.
Ses kaynağı örnekleri: kameranın kendi sesi, fon müzik, spor müzik, radyo yayını veya herhangi bir Shoutcast/Icecast akışı.
| Özellik | Açıklama |
|---|---|
| Birden fazla kaynak | Her kamera için sınırsız ses kaynağı tanımlanabilir |
| İzleyici seçimi | İzleyici istediği ses kaynağını kendisi seçer |
| Seçim hatırlanır | İzleyicinin ses kaynağı tercihi tarayıcıda kaydedilir — kamera değiştirip geri dönse bile aynı kaynak otomatik seçilir |
| Ses seviyesi hatırlanır | İzleyicinin ayarladığı ses seviyesi de kamera geçişlerinde korunur |
| Shoutcast/Icecast | Harici radyo yayınları ses kaynağı olarak eklenebilir |
İzleyici bir ses kaynağı ve ses seviyesi ayarladığında bu tercih tarayıcısında (localStorage) saklanır. Playlist içinde kameralar arasında geçiş yaparken veya sayfayı yeniden açtığında aynı ses kaynağı ve seviye otomatik uygulanır. İzleyicinin her seferinde ses ayarını tekrar yapmasına gerek kalmaz.
¶ Resim İçinde Resim (PiP)
İzleyici kontrol çubuğundaki PiP butonuna basarak video'yu tarayıcıdan bağımsız küçük bir pencerede izlemeye devam edebilir.
| Özellik | Açıklama |
|---|---|
| Bağımsız pencere | Video küçük, her zaman üstte kalan bir pencerede oynar |
| Sekme bağımsız | İzleyici başka sekmeye geçse veya tarayıcıyı küçültse bile izleme devam eder |
| Boyut ve konum | Pencere sürüklenebilir ve boyutlandırılabilir |
| Masaüstü ve mobil | Chrome, Edge, Safari ve Firefox'un güncel sürümlerinde desteklenir |
Panel ayarlarından PiP özelliği açılıp kapatılabilir.
¶ TV Yansıtma (Chromecast)
İzleyici kontrol çubuğundaki yansıtma ikonuna basarak canlı yayını Chromecast destekli TV'ye gönderebilir.
| Özellik | Açıklama |
|---|---|
| Chromecast desteği | Google Chromecast veya dahili Chromecast'li TV'lere yansıtma |
| Tek tıkla yansıtma | Kontrol çubuğundaki ikona basıp cihaz seçmek yeterli |
| TV'de tam ekran | Yayın TV ekranında tam ekran olarak gösterilir |
| Uzaktan kontrol | Yansıtma sırasında bilgisayardan ses ve oynatma kontrolü yapılabilir |
TV yansıtma özelliği için Google Chrome veya Microsoft Edge tarayıcısı ve aynı Wi-Fi ağında Chromecast destekli bir cihaz gereklidir. Apple TV için Safari üzerinden AirPlay kullanılabilir.
¶ Özelleştirilebilir Sağ Tık Menüsü
Player üzerinde sağ tık yapıldığında özelleştirilmiş bir menü gösterilir. Varsayılan tarayıcı menüsü yerine kendi bağlantılarınızı ekleyebilirsiniz.
Menüye eklenebilecek öğe örnekleri:
| Örnek | Açıklama |
|---|---|
| Hava Ayrıntıları | Tıklayınca hava durumu detay panelini açar |
| Kurum adı | Kurumun web sitesine yönlendirir |
| YAYIN.COM.TR | Platform bağlantısı |
Menü içeriği ve bağlantı adresleri paneldeki player ayarlarından belirlenir. "Sağ Tık Link" ayarı ile tıklama hedefi URL'si tanımlanır.
¶ Sosyal Medya Overlay
Player üzerinde sosyal medya hesaplarınızı gösterebilirsiniz. Desteklenen platformlar:
| Platform | Görünüm |
|---|---|
| Instagram ikonu + @kullanıcıadı | |
| YouTube | YouTube ikonu + @kanaladı |
| Facebook ikonu + @sayfaadı | |
| WhatsApp ikonu + telefon numarası |
Sosyal medya ikonları player'ın sol alt köşesinde dönüşümlü olarak gösterilir. Her ikon belirli aralıklarla otomatik değişir. Panelden birden fazla sosyal medya hesabı tanımlanabilir ve rotasyon süresi ayarlanabilir.
¶ Mobil Uyumluluk
Player tamamen responsive tasarımlıdır ve tüm ekran boyutlarına uyum sağlar.
¶ Otomatik Boyutlandırma
Player ekran boyutuna göre otomatik küçülür/büyür. 16:9, 4:3 ve 24:10 oranları desteklenir.
¶ Dokunmatik Kontroller
Ses, tam ekran ve kamera geçişi dokunmatik ekranlarda sorunsuz çalışır.
¶ Yatay/Dikey Mod
Telefon döndürüldüğünde player otomatik olarak yatay moda geçer.
¶ Embed Seçenekleri
Her kamera ve playlist için 3 farklı embed yöntemi sunulur:
| Yöntem | Avantaj | Kullanım |
|---|---|---|
| ⭐ JS Embed | Otomatik boyutlandırma, en temiz entegrasyon | Önerilen yöntem — tek bir <script> etiketi |
| iframe | Basit ve evrensel | Genişlik/yükseklik manuel belirtilir |
| Responsive iframe | Mobil uyumlu, 16:9 oran korumalı | padding-bottom: 56.25% sarmalayıcı ile |
JS embed yöntemi player'ı sayfanıza doğal olarak yerleştirir. Responsive çalışır, iframe sınırlaması yoktur ve tüm player özellikleri (PiP, Chromecast, tam ekran, hava durumu paneli) sorunsuz çalışır. Panelden yapılan ayar değişiklikleri de anında yansır.
¶ Site İzinleri ve Güvenlik
Player'ın yalnızca belirli web sitelerinde çalışmasını sağlayabilirsiniz.
| Ayar | Açıklama |
|---|---|
| Site İzinleri | İzin verilen domainleri tek tek ekleyin. Sadece bu sitelerde player çalışır, diğerlerinde engellenir |
| Doğrudan Erişim Engeli | Player URL'sinin doğrudan tarayıcıda açılmasını engelleyin — yalnızca embed olarak kullanılabilir |
| Bildirim Resim | Kamera çevrimdışı olduğunda gösterilecek özel görsel |
| Boş Referer Engeli | Referrer bilgisi olmayan istekleri engelleyerek embed hırsızlığını önleyin |
¶ Yüzen Player (Sticky)
Sayfa aşağı kaydırıldığında player küçülüp ekranın köşesinde sabit kalır. İzleyici sayfa içeriğini okurken yayını izlemeye devam eder.
| Ayar | Seçenekler |
|---|---|
| Yüzen Player | Açık / Kapalı |
| Yüzen Yön | Sağ alt veya sol alt köşe |
¶ Tüm Player Özellikleri
¶ Logo Overlay
Kurum logonuzu player üzerinde gösterin. PNG, JPG, SVG formatları ve konumlandırma seçenekleri.
¶ Alt Yazı Bandı
Kayan metin şeridi ile duyuru, haber ve bilgilendirme. Tarih/saat bazlı otomatik açılma/kapanma.
¶ Hava Durumu
Anlık sıcaklık, nem, rüzgar, basınç, deniz sıcaklığı, hava kalitesi ve 5 günlük tahmin.
¶ Ses Kaynağı Seçimi
Birden fazla ses kaynağı. İzleyici tercihi ve ses seviyesi kamera geçişlerinde hatırlanır.
¶ TV Yansıtma
Chromecast ile canlı yayını TV'de izleyin. Tek tıkla bağlantı.
¶ Resim İçinde Resim
Videoyu bağımsız küçük pencerede izlemeye devam edin. Sekme değişse bile yayın kesilmez.
¶ Sosyal Medya
Instagram, YouTube, Facebook, WhatsApp — dönüşümlü ikon gösterimi ve tıklanabilir bağlantılar.
¶ Özel Sağ Tık Menüsü
Tarayıcı menüsü yerine kendi bağlantılarınızı gösterin. Hava detayı, kurum sitesi ve daha fazlası.
¶ Yüzen Player
Sayfa kaydırılınca player köşede sabit kalır. İzleyici içerik okurken izlemeye devam eder.
¶ Site İzinleri
Player'ın yalnızca izin verilen domainlerde çalışmasını sağlayın. Embed hırsızlığını önleyin.
¶ Tam Özelleştirme
Renk, font, boyut, arka plan — tüm görünüm panelden ayarlanır, embed kodu değişmez.
¶ DVR Geçişi
Kayıt aktif kameralarda tek tıkla DVR player'a geçiş. Geçmiş kayıtlara anında erişim.