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

Milica Mihajlija
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ğ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.

Tarayıcı desteği

  • Chrome: 61.
  • Edge: 79.
  • Firefox: Desteklenmez.
  • Safari: Desteklenmez.

Kaynak

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.

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

  1. Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a tam ekran basın.
  2. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
  3. sekmesini tıklayın.
  4. 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.

Hızlı 3G kısıtlaması seçeneğinin vurgulandığı DevTools Ağ sekmesi

Ardından, Hızlı 3G'nin etkin olduğu hâlde sayfayı yeniden yükleyin. Uygulama, video yerine arka planda bir resim yükler:

&quot;AĞ BİLGİLERİ&quot; metin yer paylaşımına sahip matris benzeri resim arka planı

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.

&quot;NETWORK INFORMATION 4g&quot; metin yer paylaşımlı Matrix benzeri video arka planı

Tekrar test etmek için:

  1. Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a tam ekran basın.
  2. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
  3. sekmesini tıklayın.
  4. 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.
  5. Uygulamayı yeniden yükleyin.

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

&quot;NETWORK INFORMATION 3g&quot; metin yer paylaşımlı Matrix benzeri video arka planı