Bu codelab'de, içeriğinizi ağ kalitesine göre nasıl uyarlayacağınızı öğreneceksiniz. Bu sayfanın arka plan videosu yalnızca kullanıcılar hızlı bir ağdayken yüklenir. Daha yavaş ağlarda bunun yerine bir resim yüklenir.
Network Information API, kullanıcının bağlantı kalitesiyle ilgili bilgilere erişmenizi sağlar. Ne zaman video ne zaman resim yayınlayacağınıza karar vermek için effectiveType
mülkünü kullanırsınız. effectiveType
, 'slow-2g'
, '2g'
, '3g'
veya '4g'
olabilir.
1. adım: Bağlantı türünü kontrol edin
index.html
dosyası, arka plan videosunu görüntülemek için bir <video>
etiketi içerir (22. satır). script.js
içindeki kod, video etiketinin src
özelliğini ayarlayarak videoyu yükler. (Video yükleme kodu 2. adımda daha ayrıntılı olarak açıklanmıştır.)
Videoyu koşullu olarak yüklemek için önce Network Information API'nin kullanılabilir olup olmadığını kontrol edin. Kullanılabilirse bağlantı türünü kontrol edin.
script.js
içine,navigator.connection
nesnesinin var olup olmadığını veeffectiveType
özelliğine sahip olup olmadığını test eden birif
ifadesi ekleyin.- Ağın
effectiveType
değerini kontrol etmek için birif
ifadesi ekleyin.
if (navigator.connection && !!navigator.connection.effectiveType) {
if (navigator.connection.effectiveType === '4g') {
// Only load video on the fastest connections.
} else {
// In any other case load the image.
}
}
Mevcut video yükleme kodunu bir else
ifadesi içine alın. Böylece video, Network Information API'yi desteklemeyen tarayıcılarda da yüklenmeye devam eder.
if (navigator.connection && !!navigator.connection.effectiveType) {
if (navigator.connection.effectiveType === '4g') {
// video loading code
} else {
// image loading code
}
} else {
const video = document.getElementById('coverVideo');
const videoSource = video.getAttribute('data-src');
video.setAttribute('src', videoSource);
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}
2. Adım: Videoyu yükleyin
effectiveType
'4g'
ise codelab'in başındaki video yükleme kodunu kullanın.
if (navigator.connection.effectiveType === '4g') {
const video = document.getElementById('coverVideo');
const videoSource = video.getAttribute('data-src');
video.setAttribute('src', videoSource);
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
// image loading code
}
Video yükleme kodunun işleyiş şekli şöyledir: <video>
etiketi, src
özelliği ayarlanmadığı için ilk başta hiçbir şey indirmez veya göstermez. Yüklenecek video URL'si data-src
özelliği kullanılarak belirtilir.
<video id="coverVideo" playsinline autoplay loop muted data-src="https://cdn.glitch.com/b6491350-b058-4eb6-aa6c-55c93122073e%2FMatrix%2C%20Console%2C%20Hacking%2C%20Code.mp4?1551464245607"></video>
Veri özellikleri, standart HTML öğeleriyle ilgili ek bilgiler depolamanızı sağlar. Veri öğeleri, "data-" ile başladığı sürece herhangi bir şekilde adlandırılabilir.
Videoyu sayfada gerçekten görüntülemek için data-src
değerini almanız ve video öğesinin src
özelliği olarak ayarlamanız gerekir.
Öncelikle öğeyi içeren DOM öğesini alın:
const video = document.getElementById('coverVideo');
Ardından data-src
özelliğinden kaynak konumunu alın:
const videoSource = video.getAttribute('data-src');
Son olarak, bu değeri video öğesinin src
özelliği olarak ayarlayın:
video.setAttribute('src', videoSource);
Son satır, CSS konumlandırmasını sağlar:
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
3. Adım: Resmi yükleyin
Daha yavaş ağlarda bir resmi koşullu olarak yüklemek için videoyla aynı stratejiyi kullanın.
index.html
öğesine (video öğesinin hemen sonrasına) bir resim öğesi ekleyin ve src
özelliği yerine data-src
özelliğini kullanın.
<img id="coverImage" data-src="https://cdn.glitch.com/36529535-5976-40f8-979b-40c898b86bd0%2F36529535-5976-40f8-979b-40c898b86bd0_1_Sn80dgiwpMjBVrqjfiDbnA.jpg?1553003835358" />
script.js
içinde, ağın effectiveType
değerine bağlı olarak resmin src
özelliğini ayarlayacak kod ekleyin.
if (navigator.connection.effectiveType === '4g') {
const video = document.getElementById('coverVideo');
const videoSource = video.getAttribute('data-src');
video.setAttribute('src', videoSource);
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
const image = document.getElementById('coverImage');
const imageSource = image.getAttribute('data-src');
image.setAttribute('src', imageSource);
image.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}
Deneyin
Bunu kendiniz test etmek için:
- Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a basın.
- Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
- Ağ sekmesini tıklayın.
- Varsayılan olarak Düşük hızlandırma yok olarak ayarlanmış Düşük hızlandırma açılır menüsünü tıklayın. Hızlı 3G'yi seçin.
Ardından, Hızlı 3G'nin etkin olduğu hâlde sayfayı yeniden yükleyin. Uygulama, video yerine arka planda bir resim yükler:
Ek Puan: Değişikliklere yanıt verme
Bu API'nin onchange
etkinlik işleyicisi olduğunu hatırlıyor musunuz?
Bu özelliği birçok şey için kullanabilirsiniz: video kalitesi gibi içerikleri dinamik olarak uyarlamak, yüksek bant genişliğine sahip bir ağ türünde değişiklik algılandığında ertelenen veri aktarma işlemlerini yeniden başlatmak veya ağ kalitesi değiştiğinde kullanıcıları bilgilendirmek.
Bu dinleyicinin nasıl kullanılacağına dair basit bir örnek aşağıda verilmiştir. script.js
'e ekleyin. Bu kod, ağ bilgileri her değiştiğinde displayNetworkInfo
işlevini çağırır.
navigator.connection.addEventListener('change', displayNetworkInfo);
index.html
sayfasında zaten boş bir <h2>
öğesi var. Şimdi displayNetworkInfo
işlevini, <h2>
öğesindeki ağ bilgilerini gösterecek şekilde tanımlayın ve işlevi çağırın.
function displayNetworkInfo() {
document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}
displayNetworkInfo();
Glitch'teki uygulamanın son durumu aşağıda verilmiştir.
Tekrar test etmek için:
- Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a basın.
- Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
- Ağ sekmesini tıklayın.
- Varsayılan olarak Düşük hızlandırma yok olarak ayarlanmış Düşük hızlandırma açılır menüsünü tıklayın. Hızlı 3G'yi seçin.
- Uygulamayı yeniden yükleyin.
Uygulama, ağ bilgilerini 3g olarak günceller: