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. 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.

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 (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.

  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 öğ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:

  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 Kısıtlama yok şeklinde ayarlanan Hızlandırma açılır menüsünü tıklayın. Hızlı 3G'yi seçin.

Hızlı 3G kısıtlama seçeneğinin vurgulandığı Geliştirici Araçları Ağ sekmesi

Şimdi, Fast 3G hâlâ etkin olacak şekilde sayfayı yeniden yükleyin. Uygulama, video yerine arka planda bir resim yüklüyor:

&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 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.

&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 basın. Ardından, Tam ekran tam ekran düğmesine 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;AĞ BİLGİLERİ 3g&quot; metin yer paylaşımı içeren matris benzeri video arka planı