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. Bir videonun ne zaman sunulacağına ve ne zaman görüntü sunulacağına karar vermek için bu öğenin effectiveType
özelliğini 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 (22. satır) görüntülemek için bir <video>
etiketi içerir. 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ı, kullanılabiliyorsa 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 öğelerinde ek bilgiler depolamanıza olanak tanır. 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
öğesinden değeri 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 da bunu video öğesinin src
özelliği olarak ayarlayın:
video.setAttribute('src', videoSource);
CSS konumlandırması son satırla ilgilenir:
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
3. Adım: Resim yükleyin
Yavaş ağlarda görüntüyü koşullu olarak yüklemek için video ile aynı stratejiyi kullanın.
index.html
öğesine (video öğesinden hemen sonra) 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
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 Kısıtlama yok şeklinde ayarlanan Hızlandırma açılır menüsünü tıklayın. Hızlı 3G'yi seçin.
Şimdi, Fast 3G hâlâ etkin olacak şekilde sayfayı yeniden yükleyin. Uygulama, video yerine arka planda bir resim yüklüyor:
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 işleyicinin nasıl kullanılacağına ilişkin basit bir örneği aşağıda bulabilirsiniz. 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 basın. Ardından, Tam ekran düğmesine 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: