HTML5 Tam Ekran Uygulaması (Full Screen API)

HTML5 gittikçe gelişiyor ve bu gelişmelerden ne yazıkki çoğu web yazılımcısının haberi olmuyor. Full Screen API de html5’in getirdiği yeniliklerden birisi.Herhangi bir html elementini tam ekranda görüntülememize olanak sağlıyor..

Nedir ? , Tarayıcı Uyumluluğu

Uygulama html elementini tam ekran görüntülemenize olanak sağlar.Resimlerde, videolarda , oyunlarda tam ekran görüntü almamızı ve ekranı daha iyi kullanabilmemizi amaçlar. API güncel tüm masaüstü tarayıcılarıyla tam uyumludur(ie dahil).Mobil tarayıcılarda ve diğer platformlardaki tarayıcılarda desteklenmeyebilir.

Ekran Alıntısı

Nerelerde , Hangi Projelerde kullanabiliriz

Yukarda bahsettiğim gibi, kodladığınız oyunlarda veya medya ögelerinde kullanabilirsiniz.Başka bir kullanım alanıda Tüm Sistemlerinizi yönettiğiniz büyük bir yönetim paneli düşünün, ve zaman zaman belli bileşenlerini ekranda tam ekran göstermek istiyorsunuz (Örneğin doktor randevu sırası monitörü, veya kütüphanedeki akıllı cihazlar vb)

Uyumluluk Kontrolü Javascript

Tarayıcımızın bu api yi destekleyip desteklemediğini javascriptle kolaylıkla kontrol edebiliriz.

// tam ekram kullanılabilir mi 
if (
    document.fullscreenEnabled || 
    document.webkitFullscreenEnabled || 
    document.mozFullScreenEnabled ||
    document.msFullscreenEnabled
) {
// Kodlar...
}

Nasıl Kullanılır

Apinin kullanımı gayet basit.Öncelikle tam ekran görüntülemek istediğimiz divi javascript ile seçelim

var i = document.getElementById("tamekran");

Sonrasında herhangi bir buton oluşturup tıklandığında divimizi tam ekran görüntüleyebilelim

.requestFullscreen Metodu

Bu metod seçili dom elementinin tam ekran görüntülenmesini sağlar.

		$("#aktif").click(function(){
		
			if (i.requestFullscreen) {
				this.requestFullscreen();
			} else if (i.webkitRequestFullscreen) {
				i.webkitRequestFullscreen();
			} else if (i.mozRequestFullScreen) {
				i.mozRequestFullScreen();
			} else if (i.msRequestFullscreen) {
				i.msRequestFullscreen();
			}
		});

document.fullscreenElement Metodu

Bu metod bize şu anda hangi dom elementinin tam ekran görüntülendiğini döndürür.Tam ekranda herhangi birşey görüntülenmiyorsa null döndürür.

if (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
) {
// Sayfa Tam ekranda bir dom elementine sahip ise yapılacaklar....
}

document.exitFullscreen Metodu

Bu metod tam ekran görüntülenen elementi kapatır..

document.exitFullscreen;

document.fullscreenchange Eventi

Bu event sayfanın tam ekrana geçişi veya tam ekrandan normal ekrana geçiş anını yakalar ve bu olayda istediğiniz işlemleri yaptırabilirsiniz

document.addEventListener("fullscreenchange", function() { ... });

FullScreen Apiyi daha iyi anlayabilmek ve uygulamalarda nerelerde kullanabileceğinize dair fikirler vermek için bir demo hazırladık buyrun ..

Demoya Git

HTML5 Tam Ekran Uygulaması (Full Screen API)” hakkında 1 yorum

Bir Cevap Yazın

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