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ğa bağlıyken yüklenir. Daha yavaş ağlarda bunun yerine bir resim yüklenir.
Network Information API kullanıcının bağlantı kalitesi ile ilgili bilgilere erişmenize olanak tanır. Videonun ne zaman sunulacağına ve resmin ne zaman sunulacağına karar vermek için videonun 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
kodu, video etiketinin src
özelliğini ayarlayarak videoyu yükler. (Video yükleme kodu, 2. Adım'da 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ılabilir durumdaysa bağlantı türünü kontrol edin.
script.js
öğesinde,navigator.connection
nesnesinin mevcut olup olmadığını veeffectiveType
özelliğine sahip olup olmadığını test eden birif
ifadesi ekleyin.- Ağın
effectiveType
özelliğini kontrol etmek içinif
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
ifadesiyle sarmalayın. Böylece video, Network Information API'yi desteklemeyen tarayıcılarda 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
değeri '4g'
ise codelab'in başlangıcından itibaren 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 kodu şu şekilde çalışır: <video>
etiketi, src
özelliği ayarlanmadığı için başlangıçta hiçbir şey indirmez veya göstermez. Yüklenecek video URL'si, data-src
özelliği kullanılarak belirlenir.
<video id="coverVideo" 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 öğeleri hakkında ek bilgiler depolamanıza olanak tanır. Bir veri öğesi, "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');
Daha sonra, data-src
özelliğinden kaynak konumunu alın:
const videoSource = video.getAttribute('data-src');
Ve son olarak bunu, video öğesinin src
özelliği olarak ayarlayın:
video.setAttribute('src', videoSource);
CSS konumlandırmasını son satır üstlenir:
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
3. Adım: Resmi yükleyin
Bir resmi daha yavaş ağlarda 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
ürününde, ağın effectiveType
değerine bağlı olarak resmin src
özelliğini ayarlamak için 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öster'e, ardından Tam Ekran'a basın.
- Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Ağ sekmesini tıklayın.
- Varsayılan olarak Kısıtlama yok şeklinde ayarlanan Kısıtlama açılır menüsünü tıklayın. Fast 3G'yi seçin.
Şimdi, Hızlı 3G etkin durumdayken sayfayı yeniden yükleyin. Uygulama, arka planda video yerine resim yükler:
Ekstra Kredi: Değişikliklere yanıt verin
Bu API'nin nasıl onchange
etkinlik işleyiciye sahip olduğunu hatırlıyor musunuz?
Video kalitesi gibi içerikleri dinamik olarak uyarlama, yüksek bant genişliğine sahip bir ağ türünde bir değişiklik algılandığında ertelenen veri aktarımlarını yeniden başlatma veya ağ kalitesi değiştiğinde kullanıcıları bilgilendirme gibi pek çok şey için kullanabilirsiniz.
Bu dinleyicinin nasıl kullanılacağına dair basit bir örnek aşağıda verilmiştir. script.js
grubuna 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>
öğesinde ağ bilgilerini görüntüleyecek ve işlevi çağıracak şekilde tanımlayın.
function displayNetworkInfo() {
document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}
displayNetworkInfo();
Glitch'te uygulamanın son durumunu burada görebilirsiniz.
Tekrar test etmek için:
- Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a basın.
- Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Ağ sekmesini tıklayın.
- Varsayılan olarak Kısıtlama yok şeklinde ayarlanan Kısıtlama açılır menüsünü tıklayın. Fast 3G'yi seçin.
- Uygulamayı yeniden yükleyin.
Uygulama, ağ bilgilerini 3g olarak günceller: