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

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

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

การรองรับเบราว์เซอร์

  • Chrome: 61
  • Edge: 79
  • Firefox: ไม่รองรับ
  • Safari: ไม่รองรับ

แหล่งที่มา

ขั้นตอนที่ 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" 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>

แอตทริบิวต์ข้อมูลช่วยให้คุณจัดเก็บข้อมูลเพิ่มเติมในองค์ประกอบ 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

แท็บเครือข่ายของ DevTools ที่ไฮไลต์ตัวเลือกการควบคุม 3G อย่างรวดเร็ว

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

พื้นหลังรูปภาพคล้ายกับ Matrix พร้อมข้อความ &quot;ข้อมูลเครือข่าย&quot; ที่วางซ้อน

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

คุณจำได้ว่า API นี้มี onchange event 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

พื้นหลังวิดีโอแบบ Matrix พร้อมข้อความ &quot;ข้อมูลเครือข่าย 4G&quot; ที่วางซ้อน

วิธีทดสอบอีกครั้ง

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

แอปจะอัปเดตข้อมูลเครือข่ายเป็น 3G ในกรณีต่อไปนี้

พื้นหลังวิดีโอแบบ Matrix พร้อมข้อความ &quot;NETWORK INFORMATION 3g&quot; ที่วางซ้อน