Menyesuaikan penayangan video ke gambar berdasarkan kualitas jaringan

Milica Mihajlija

Dalam codelab ini, Anda akan mempelajari cara menyesuaikan konten berdasarkan kualitas jaringan. Video latar belakang halaman ini hanya akan dimuat saat pengguna berada di jaringan yang cepat. Pada jaringan yang lebih lambat, gambar akan dimuat.

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

Langkah 1: Periksa jenis koneksi

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

Untuk memuat video secara bersyarat, 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 tetap akan 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> awalnya tidak mendownload atau menampilkan apa pun karena atribut src-nya tidak disetel. URL video yang akan dimuat ditentukan menggunakan atribut data-src.

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

Atribut data memungkinkan Anda menyimpan informasi tambahan tentang elemen HTML standar. Elemen data dapat diberi nama apa saja, selama diawali dengan "data-".

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

Pertama, dapatkan elemen DOM yang berisi aset tersebut:

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

Lalu, dapatkan lokasi resource dari atribut data-src:

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

Terakhir, tetapkan atribut tersebut sebagai atribut src elemen video:

video.setAttribute('src', videoSource);

Baris terakhir akan menangani pemosisian CSS:

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

Langkah 3: Muat gambar

Untuk memuat gambar secara kondisional pada 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. Lalu tekan Layar Penuh .
2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
3. Klik tab Network
4. Klik menu drop-down Throttling, yang disetel ke Tidak ada throttling secara default. Pilih 3G Cepat.

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

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 terdeteksi adanya perubahan pada jenis jaringan bandwidth tinggi; atau memberi tahu pengguna saat kualitas jaringan berubah.

Berikut adalah contoh sederhana tentang 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> yang kosong di halaman index.html. Sekarang tentukan fungsi displayNetworkInfo agar menampilkan informasi jaringan dalam elemen <h2> dan panggil fungsi.

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

displayNetworkInfo();

Berikut adalah status akhir aplikasi di Glitch.

Untuk mengujinya lagi:

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

Aplikasi akan memperbarui informasi jaringan ke 3g: