ปรับวิดีโอให้แสดงรูปภาพตามคุณภาพของเครือข่าย

Milica Mihajlija

ใน Codelab นี้ คุณจะได้เรียนรู้วิธีปรับเนื้อหาตามคุณภาพเครือข่าย วิดีโอพื้นหลังของหน้านี้จะโหลดเฉพาะเมื่อผู้ใช้อยู่ในเครือข่ายที่เร็วเท่านั้น แต่ในเครือข่ายที่ช้ากว่า รูปภาพจะโหลดแทน

Network Information API ช่วยให้คุณเข้าถึงข้อมูลเกี่ยวกับคุณภาพการเชื่อมต่อของผู้ใช้ คุณจะใช้พร็อพเพอร์ตี้ effectiveType เพื่อตัดสินใจว่าจะแสดงวิดีโอเมื่อใดและจะแสดงรูปภาพเมื่อใด effectiveType อาจเป็น 'slow-2g', '2g', '3g' หรือ '4g'

ขั้นตอนที่ 1: ตรวจสอบประเภทการเชื่อมต่อ

ไฟล์ index.html มีแท็ก <video> เพื่อแสดงวิดีโอพื้นหลัง (บรรทัดที่ 22) โค้ดใน script.js จะโหลดวิดีโอโดยการตั้งค่าแอตทริบิวต์ src ของแท็กวิดีโอ (ดูคำอธิบายเกี่ยวกับโค้ดการโหลดวิดีโออย่างละเอียดในขั้นตอนที่ 2)

หากต้องการโหลดวิดีโออย่างมีเงื่อนไข ก่อนอื่นให้ตรวจสอบว่า Network Information API พร้อมใช้งานหรือไม่ หากมี ให้ตรวจสอบประเภทการเชื่อมต่อ

1. ใน script.js เพิ่มคำสั่ง if ที่จะทดสอบว่ามีออบเจ็กต์ navigator.connection อยู่ไหม และมีพร็อพเพอร์ตี้ effectiveType หรือไม่
2. เพิ่มคำสั่ง if เพื่อตรวจสอบ effectiveType ของเครือข่าย

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

รวมโค้ดการโหลดวิดีโอที่มีอยู่ไว้ในคำสั่ง else เพื่อให้วิดีโอยังคงโหลดในเบราว์เซอร์ที่ไม่รองรับ 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');
}

ขั้นตอนที่ 2: โหลดวิดีโอ

หาก effectiveType คือ '4g' ให้ใช้โค้ดการโหลดวิดีโอจากจุดเริ่มต้นของ 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
}

โค้ดการโหลดวิดีโอมีลักษณะการทำงานดังนี้: แท็ก <video> ไม่ดาวน์โหลดหรือแสดงข้อมูลใดๆ ในตอนแรก เนื่องจากไม่ได้ตั้งค่าแอตทริบิวต์ src ไว้ URL วิดีโอที่จะโหลดมีการระบุโดยใช้แอตทริบิวต์ 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>

แอตทริบิวต์ข้อมูลช่วยให้คุณจัดเก็บข้อมูลเพิ่มเติมในองค์ประกอบ HTML มาตรฐานได้ องค์ประกอบข้อมูลจะตั้งชื่ออะไรก็ได้ตราบเท่าที่ขึ้นต้นด้วย "data-"

หากต้องการแสดงวิดีโอในหน้าเว็บจริงๆ คุณจะต้องรับค่าจาก data-src และตั้งค่าเป็นแอตทริบิวต์ src ขององค์ประกอบวิดีโอ

ก่อนอื่น ให้รับองค์ประกอบ DOM ที่มีเนื้อหาประกอบด้วย

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

จากนั้นรับตำแหน่งทรัพยากรจากแอตทริบิวต์ data-src ดังนี้

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

และสุดท้าย ตั้งค่ารายการนั้นเป็นแอตทริบิวต์ src ขององค์ประกอบวิดีโอ

video.setAttribute('src', videoSource);

บรรทัดสุดท้ายจะระบุตำแหน่ง CSS ดังนี้

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

ขั้นตอนที่ 3: โหลดรูปภาพ

หากต้องการโหลดรูปภาพแบบมีเงื่อนไขในเครือข่ายที่ช้า ให้ใช้กลยุทธ์เดียวกันกับวิดีโอ

เพิ่มองค์ประกอบรูปภาพลงใน index.html (อยู่หลังองค์ประกอบวิดีโอ) และใช้แอตทริบิวต์ data-src แทนแอตทริบิวต์ src

<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 ให้เพิ่มโค้ดเพื่อตั้งค่าแอตทริบิวต์ src ของรูปภาพโดยขึ้นอยู่กับ effectiveType ของเครือข่าย

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

ลองเลย

หากต้องการทดสอบด้วยตนเอง ให้ทำดังนี้

1. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
2. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
3. คลิกแท็บเครือข่าย
4. คลิกเมนูแบบเลื่อนลงการควบคุม ซึ่งตั้งค่าเป็นไม่มีการควบคุมโดยค่าเริ่มต้น เลือก Fast 3G

ตอนนี้ ให้โหลดหน้าเว็บอีกครั้งโดยยังคงเปิดใช้ Fast 3G อยู่ แอปจะโหลดรูปภาพในพื้นหลังแทนที่จะโหลดวิดีโอ

เครดิตพิเศษ: ตอบสนองต่อการเปลี่ยนแปลง

จำได้ไหมว่า API นี้มี onchange Listener เหตุการณ์อย่างไร คุณสามารถใช้เครื่องมือนี้หลายอย่าง เช่น การปรับเนื้อหาแบบไดนามิก เช่น คุณภาพวิดีโอ การเริ่มการโอนข้อมูลที่เลื่อนเวลาใหม่เมื่อตรวจพบการเปลี่ยนแปลงประเภทเครือข่ายที่มีแบนด์วิดท์สูง หรือการแจ้งผู้ใช้เมื่อคุณภาพของเครือข่ายมีการเปลี่ยนแปลง

ต่อไปนี้เป็นตัวอย่างง่ายๆ ของวิธีใช้ Listener นี้ เพิ่มไปยัง script.js โค้ดนี้จะเรียกใช้ฟังก์ชัน displayNetworkInfo ทุกครั้งที่ข้อมูลเครือข่ายมีการเปลี่ยนแปลง

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

มีองค์ประกอบ <h2> ที่ว่างเปล่าอยู่แล้วในหน้า index.html ตอนนี้ให้กำหนดฟังก์ชัน displayNetworkInfo เพื่อให้แสดงข้อมูลเครือข่ายในองค์ประกอบ <h2> และเรียกใช้ฟังก์ชันดังกล่าว

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

displayNetworkInfo();

นี่คือสถานะสุดท้ายของแอปใน Glitch

หากต้องการทดสอบอีกครั้ง ให้ทำดังนี้

1. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
2. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
3. คลิกแท็บเครือข่าย
4. คลิกเมนูแบบเลื่อนลงการควบคุม ซึ่งตั้งค่าเป็นไม่มีการควบคุมโดยค่าเริ่มต้น เลือก Fast 3G
5. โหลดแอปซ้ำ

แอปจะอัปเดตข้อมูลเครือข่ายเป็น 3g: