Menyesuaikan penayangan video ke gambar berdasarkan kualitas jaringan

Dalam codelab ini, Anda akan mempelajari cara menyesuaikan konten berdasarkan kualitas jaringan. Video latar belakang halaman ini hanya akan dimuat saat pengguna menggunakan jaringan yang cepat. Di jaringan yang lebih lambat, gambar akan dimuat sebagai gantinya.

Network Information API memungkinkan Anda mengakses informasi tentang kualitas koneksi pengguna. Anda akan menggunakan properti effectiveType-nya untuk memutuskan kapan harus menayangkan video dan kapan harus menayangkan gambar. effectiveType dapat berupa 'slow-2g', '2g', '3g', atau '4g'.

Dukungan Browser

  • Chrome: 61.
  • Edge: 79.
  • Firefox: tidak didukung.
  • Safari: tidak didukung.

Sumber

Langkah 1: Periksa jenis koneksi

File index.html berisi tag <video> untuk menampilkan video latar belakang (baris 22). Kode di script.js memuat video dengan menetapkan atribut src tag video. (Kode pemuatan video dijelaskan secara lebih mendetail di Langkah 2.)

Untuk memuat video secara kondisional, periksa terlebih dahulu apakah Network Information API tersedia; jika tersedia, periksa jenis koneksinya.

  1. Di script.js, tambahkan pernyataan if yang menguji apakah objek navigator.connection ada dan apakah objek tersebut memiliki properti effectiveType.
  2. Tambahkan pernyataan if untuk memeriksa effectiveType jaringan.
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.
  }
}

Gabungkan kode pemuatan video yang ada dalam pernyataan else, sehingga video akan tetap dimuat di browser yang tidak mendukung Network Information API.

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');
}

Langkah 2: Muat video

Jika effectiveType adalah '4g', gunakan kode pemuatan video dari awal codelab.

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
}

Berikut cara kerja kode pemuatan video: tag <video> tidak mendownload atau menampilkan apa pun pada awalnya karena atribut src-nya tidak ditetapkan. URL video yang akan dimuat ditentukan menggunakan atribut data-src.

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

Atribut data memungkinkan Anda menyimpan informasi tambahan pada elemen HTML standar. Elemen data dapat diberi nama apa pun, asalkan diawali dengan "data-".

Untuk benar-benar menampilkan video di halaman, Anda perlu mendapatkan nilai dari data-src dan menetapkannya sebagai atribut src elemen video.

Pertama, dapatkan elemen DOM yang berisi aset:

const video = document.getElementById('coverVideo');

Kemudian, dapatkan lokasi resource dari atribut data-src:

const videoSource = video.getAttribute('data-src');

Terakhir, tetapkan sebagai atribut src elemen video:

video.setAttribute('src', videoSource);

Baris terakhir menangani pemosisian CSS:

video.setAttribute('style', 'height: 100%; width: 100%; display:inline');

Langkah 3: Muat gambar

Untuk memuat gambar secara kondisional di jaringan yang lebih lambat, gunakan strategi yang sama seperti untuk video.

Tambahkan elemen gambar ke index.html (tepat setelah elemen video), dan gunakan atribut data-src, bukan atribut src.

<img id="coverImage" data-src="https://cdn.glitch.com/36529535-5976-40f8-979b-40c898b86bd0%2F36529535-5976-40f8-979b-40c898b86bd0_1_Sn80dgiwpMjBVrqjfiDbnA.jpg?1553003835358" />

Di script.js, tambahkan kode untuk menetapkan atribut src gambar bergantung pada effectiveType jaringan.

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');
}

Cobalah

Untuk mengujinya sendiri:

  1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh layar penuh.
  2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  3. Klik tab Jaringan.
  4. Klik drop-down Throttling, yang disetel ke No throttling secara default. Pilih 3G Cepat.

Tab Jaringan DevTools dengan opsi throttling 3G Cepat ditandai

Sekarang, muat ulang halaman dengan 3G Cepat masih diaktifkan. Aplikasi memuat gambar di latar belakang, bukan video:

Latar belakang gambar seperti matriks dengan overlay teks &#39;NETWORK INFORMATION&#39;

Kredit Tambahan: Merespons perubahan

Ingat bagaimana API ini memiliki pemroses peristiwa onchange? Anda dapat menggunakannya untuk banyak hal: menyesuaikan konten secara dinamis seperti kualitas video; memulai ulang transfer data yang ditangguhkan saat perubahan pada jenis jaringan dengan bandwidth tinggi terdeteksi; atau memberi tahu pengguna saat kualitas jaringan berubah.

Berikut adalah contoh sederhana cara menggunakan pemroses ini. Tambahkan ke script.js. Kode ini akan memanggil fungsi displayNetworkInfo setiap kali informasi jaringan berubah.

navigator.connection.addEventListener('change', displayNetworkInfo);

Sudah ada elemen <h2> kosong di halaman index.html. Sekarang tentukan fungsi displayNetworkInfo agar menampilkan informasi jaringan di elemen <h2> dan panggil fungsi.

function displayNetworkInfo() {
  document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}

displayNetworkInfo();

Berikut adalah status akhir aplikasi di Glitch.

Latar belakang video seperti Matrix dengan overlay teks &#39;NETWORK INFORMATION 4g&#39;

Untuk mengujinya lagi:

  1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh layar penuh.
  2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  3. Klik tab Jaringan.
  4. Klik drop-down Throttling, yang disetel ke No throttling secara default. Pilih 3G Cepat.
  5. Muat ulang aplikasi.

Aplikasi akan memperbarui informasi jaringan menjadi 3g:

Latar belakang video seperti Matrix dengan overlay teks &#39;NETWORK INFORMATION 3g&#39;