การโหลดวิดีโอแบบ Lazy Loading

Jeremy Wagner
Rachel Andrew

นอกจากนี้ คุณยังโหลดวิดีโอแบบ Lazy Loading ได้เช่นเดียวกับองค์ประกอบรูปภาพ วิดีโอมักจะโหลดด้วยองค์ประกอบ <video> (แม้ว่า วิธีสำรองโดยใช้ <img> มี เกิดขึ้นโดยมีการติดตั้งใช้งานที่จำกัด) วิธีโหลด <video> แบบ Lazy Loading จะขึ้นอยู่กับ กรณีการใช้งานของคุณ ลองมาดู 2-3 สถานการณ์ที่แต่ละสถานการณ์จำเป็นต้องมี ที่ต่างออกไป

สำหรับวิดีโอที่ไม่เล่นอัตโนมัติ

สำหรับวิดีโอที่ผู้ใช้เป็นผู้เริ่มเล่นวิดีโอ (ซึ่งก็คือวิดีโอที่ไม่ได้เล่นเอง เล่นอัตโนมัติ) ซึ่งระบุ preload แอตทริบิวต์ ในเอลิเมนต์ <video> อาจต้องมีการระบุดังนี้

<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

ตัวอย่างด้านบนใช้แอตทริบิวต์ preload ที่มีค่า none เพื่อป้องกันเบราว์เซอร์ ไม่ให้โหลดข้อมูลวิดีโอใดๆ ล่วงหน้า poster ให้ตัวยึดตําแหน่งแก่เอลิเมนต์ <video> ที่จะใช้พื้นที่ขณะโหลดวิดีโอ เหตุผลที่เป็นเช่นนี้คือ ลักษณะเริ่มต้นของการโหลดวิดีโออาจแตกต่างกันไปตามแต่ละเบราว์เซอร์ ดังนี้

  • ใน Chrome ค่าเริ่มต้นสำหรับ preload เคยเป็น auto แต่ตั้งแต่ Chrome 64 เป็นต้นไป ค่าเริ่มต้นคือ metadata แต่ใน Chrome เวอร์ชันเดสก์ท็อป ระบบอาจโหลดวิดีโอล่วงหน้าโดยใช้ส่วนหัว Content-Range เบราว์เซอร์อื่นๆ ที่ใช้ Chromium และ Firefox จะทำงานในลักษณะเดียวกัน
  • Safari เวอร์ชันเดสก์ท็อป 11.0 จะโหลดช่วงล่วงหน้าเช่นเดียวกับ Chrome บนเดสก์ท็อป ของวิดีโอ จากเวอร์ชัน 11.2 ระบบจะโหลดเฉพาะข้อมูลเมตาของวิดีโอล่วงหน้าเท่านั้น ใน Safari บน iOS จะไม่มีการอัปโหลดวิดีโอ ที่โหลดล่วงหน้า
  • เมื่อโหมดประหยัดอินเทอร์เน็ตเปิดอยู่ เปิดใช้อยู่ preload จะมีค่าเริ่มต้นเป็น none

เนื่องจากลักษณะการทำงานเริ่มต้นของเบราว์เซอร์เกี่ยวกับ preload ไม่ได้กำหนดเป็นพื้นฐาน การแสดงออกอย่างชัดเจนอาจเป็นวิธีที่ดีที่สุด ในกรณีนี้ที่ผู้ใช้เป็นผู้เริ่ม การใช้ preload="none" เป็นวิธีที่ง่ายที่สุดในการเลื่อนเวลาการโหลดวิดีโอออกไป ทุกแพลตฟอร์ม แอตทริบิวต์ preload ไม่ใช่วิธีเดียวในการชะลอการโหลด ของเนื้อหาวิดีโอ เล่นวิดีโอได้อย่างรวดเร็ว การโหลดล่วงหน้าอาจช่วยให้คุณ ไอเดียและข้อมูลเชิงลึกบางส่วนเกี่ยวกับ การเล่นวิดีโอใน JavaScript

อย่างไรก็ตาม เทมเพลตนี้ไม่เป็นประโยชน์เมื่อคุณต้องการใช้วิดีโอแทน GIF แบบเคลื่อนไหว ซึ่งจะกล่าวถึงต่อไป

สำหรับวิดีโอที่ทำหน้าที่เป็นการแทนที่ GIF แบบเคลื่อนไหว

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

การใช้องค์ประกอบ <video> เพื่อแทนที่ GIF แบบเคลื่อนไหวไม่เป็นไปตาม ไม่ซับซ้อนเหมือนเป็นองค์ประกอบ <img> GIF แบบเคลื่อนไหวมีลักษณะ 3 ประการ ดังนี้

  1. จะเล่นโดยอัตโนมัติเมื่อโหลดเสร็จ
  2. เล่นวนซ้ำไปเรื่อยๆ (แม้จะไม่ใช่ case)
  3. อุปกรณ์ไม่มีแทร็กเสียง

การรับค่านี้ด้วยองค์ประกอบ <video> จะมีลักษณะดังนี้

<video autoplay muted loop playsinline>
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

แอตทริบิวต์ autoplay, muted และ loop มีลักษณะที่ชัดเจนในตัวเอง playsinline จำเป็นสำหรับการเล่นอัตโนมัติใน iOS ตอนนี้คุณมี การแทนที่วิดีโอเป็น GIF ที่สามารถให้บริการได้และทำงานข้ามแพลตฟอร์ม แต่มีสิ่งที่ควรทำ เกี่ยวกับการโหลดแบบ Lazy Loading ไหม หากต้องการเริ่มต้น ให้แก้ไขมาร์กอัป <video> ตามขั้นตอนต่อไปนี้

<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
  <source data-src="one-does-not-simply.webm" type="video/webm">
  <source data-src="one-does-not-simply.mp4" type="video/mp4">
</video>

คุณจะเห็นการเพิ่มปุ่ม poster ซึ่งจะช่วยให้คุณระบุตัวยึดตำแหน่งเพื่อใช้พื้นที่ขององค์ประกอบ <video> ได้ จนกว่าวิดีโอจะโหลดแบบ Lazy Loading เช่นเดียวกับตัวอย่างการโหลดแบบ Lazy Loading <img> รายการ เก็บ URL ของวิดีโอไว้ในแอตทริบิวต์ data-src ในแต่ละ <source> จากนั้น ใช้โค้ด JavaScript ซึ่งคล้ายกับ ตัวอย่างการโหลดแบบ Lazy Loading ของรูปภาพที่อิงตาม Intersection Observer

document.addEventListener("DOMContentLoaded", function() {
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));

  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }

          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });

    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
});

เมื่อโหลดองค์ประกอบ <video> แบบ Lazy Loading คุณจะต้องดำเนินการซ้ำผ่านเอลิเมนต์ย่อยทั้งหมด <source> แล้วเปลี่ยนแอตทริบิวต์ data-src เป็นแอตทริบิวต์ src ครั้งเดียว คุณทำเสร็จแล้ว คุณจำเป็นต้องทริกเกอร์การโหลดวิดีโอโดยเรียก เมธอด load ขององค์ประกอบ ซึ่งหลังจากนั้นสื่อจะเริ่มเล่นโดยอัตโนมัติ ตามแอตทริบิวต์ autoplay

เมื่อใช้วิธีนี้ คุณจะมีโซลูชันวิดีโอที่จำลองลักษณะการทำงานของ GIF แบบเคลื่อนไหว แต่ไม่ได้มีการใช้อินเทอร์เน็ตมากเท่ากับ GIF แบบเคลื่อนไหว คุณสามารถโหลดเนื้อหานั้นแบบ Lazy Loading ได้

ไลบรารีการโหลดแบบ Lazy Loading

ไลบรารีต่อไปนี้สามารถช่วยคุณโหลดวิดีโอแบบ Lazy Loading ได้

  • vanilla-lazyload และ lozad.js เป็นตัวเลือกที่ใช้งานง่ายมาก ที่ใช้ Intersection Observer เท่านั้น ดังนั้น การทดสอบนี้จึงมีประสิทธิภาพสูง แต่ จะต้องมีการโพลีฟิลล์ก่อน จึงจะใช้ได้ในเบราว์เซอร์รุ่นเก่าได้
  • yall.js เป็นไลบรารีที่ใช้ Intersection Observer และกลับไปเป็นตัวแฮนเดิลเหตุการณ์ ทั้งยังโหลดรูปภาพวิดีโอ poster แบบ Lazy Loading โดยใช้แอตทริบิวต์ data-poster ได้ด้วย
  • หากต้องการใช้ไลบรารีการโหลดแบบ Lazy Loading เฉพาะสำหรับ React คุณอาจลองใช้ react-lazyload ขณะที่ ไม่ได้ใช้ Intersection Observer แต่มีวิธีการใช้งานแบบ Lazy ที่คุ้นเคย การโหลดภาพสำหรับผู้ที่คุ้นเคยกับการพัฒนาแอปพลิเคชันด้วย React

ไลบรารีการโหลดแบบ Lazy Loading เหล่านี้ได้รับการจัดทำเอกสารไว้อย่างดี พร้อมด้วยมาร์กอัปจำนวนมาก รูปแบบสำหรับการโหลดแบบ Lazy Loading แบบต่างๆ