Ağ kalitesine bağlı olarak videoyu resim sunmaya uyarlayın

Milica Mihajlija

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.

1. script.js öğesinde, navigator.connection nesnesinin mevcut olup olmadığını ve effectiveType özelliğine sahip olup olmadığını test eden bir if ifadesi ekleyin.
2. Ağın effectiveType özelliğini kontrol etmek için if 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:

1. Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a basın.
2. Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
3. Ağ sekmesini tıklayın.
4. 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:

1. Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a basın.
2. Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
3. Ağ sekmesini tıklayın.
4. 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.
5. Uygulamayı yeniden yükleyin.

Uygulama, ağ bilgilerini 3g olarak günceller: