แทนที่ GIF ด้วยวิดีโอ

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

วัดก่อน

ก่อนอื่น ให้วัดประสิทธิภาพของเว็บไซต์ดังนี้

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

เมื่อดำเนินการเสร็จแล้ว คุณจะเห็นว่า Lighthouse ได้แจ้งว่าไฟล์ GIF นั้นเป็น ปัญหาใน "ใช้รูปแบบวิดีโอสำหรับเนื้อหาภาพเคลื่อนไหว" การตรวจสอบ

รับ FFmpeg

คุณสามารถแปลง GIF เป็นวิดีโอได้หลายวิธี คู่มือนี้ใช้ FFmpeg ซึ่งติดตั้งใน Glitch VM แล้ว และหากต้องการ คุณสามารถทำตามวิธีการต่อไปนี้เพื่อติดตั้งลงใน ในพื้นที่ เครื่อง ได้เป็นอย่างดี

เปิดคอนโซล

ตรวจสอบอีกครั้งว่าติดตั้ง FFmpeg แล้วและยังใช้งานได้

  1. คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
  2. คลิกเทอร์มินัล (หมายเหตุ: หากปุ่มเทอร์มินัลไม่แสดง คุณอาจต้องใช้ตัวเลือกแบบเต็มหน้าจอ)
  3. ในคอนโซล ให้เรียกใช้คำสั่งต่อไปนี้
which ffmpeg

คุณควรได้เส้นทางของไฟล์กลับมา ดังนี้

/usr/bin/ffmpeg

เปลี่ยน GIF เป็นวิดีโอ

  • ในคอนโซล ให้เรียกใช้ cd images เพื่อป้อนไดเรกทอรีรูปภาพ
  • เรียกใช้ ls เพื่อดูเนื้อหา

คุณควรจะเห็นบางสิ่งเช่นนี้:

$ ls
cat-herd.gif
  • ในคอนโซล ให้เรียกใช้คำสั่งต่อไปนี้
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

การดำเนินการนี้จะบอกให้ FFmpeg รับ input ซึ่งบ่งบอกด้วยแฟล็ก -i ของ cat-herd.gif แล้วแปลงเป็นวิดีโอชื่อ cat-herd.mp4 ซึ่งควรใช้เวลา รันได้เป็นอันดับ 2 เมื่อคำสั่งเสร็จสิ้น คุณควรพิมพ์ ls ได้อีกครั้ง และดูไฟล์ 2 ไฟล์ ได้แก่

$ ls
cat-herd.gif  cat-herd.mp4

สร้างวิดีโอ WebM

ขณะที่ MP4 มีวางจำหน่ายตั้งแต่ปี 1999 แต่ WebM นั้นเป็นผู้ที่เพิ่งสร้าง เปิดตัวครั้งแรกในปี 2010 วิดีโอ WebM อาจมีขนาดเล็กกว่าวิดีโอ MP4 มาก ดังนั้น การสร้างทั้ง 2 แบบก็เป็นเรื่องสมเหตุสมผล โชคดีที่องค์ประกอบ <video> จะช่วยให้คุณ เพิ่มแหล่งที่มาหลายแหล่ง ดังนั้นหากเบราว์เซอร์ไม่สนับสนุน WebM เบราว์เซอร์หนึ่งก็สามารถใช้ MP4

  • ในคอนโซล ให้เรียกใช้คำสั่งต่อไปนี้
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • วิธีตรวจสอบขนาดไฟล์ที่แสดง
ls -lh

คุณควรมี GIF 1 รายการและวิดีโอ 2 รายการ

$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm

โปรดสังเกตว่า GIF ต้นฉบับมีขนาด 3.7M ขณะที่เวอร์ชัน MP4 จะมีความละเอียด 551K และ เวอร์ชัน WebM คือ 341K เท่านั้น ช่วยประหยัดได้เยอะเลย!

อัปเดต HTML เพื่อสร้างเอฟเฟกต์ GIF ใหม่

GIF แบบเคลื่อนไหวมีลักษณะหลัก 3 ประการที่วิดีโอจําเป็นต้องจําลองมีดังนี้

  • รูปภาพจะเล่นโดยอัตโนมัติ
  • วิดีโอจะเล่นวนซ้ำอย่างต่อเนื่อง (โดยปกติแต่สามารถป้องกันการวนซ้ำได้)
  • เงียบเสียง

โชคดีที่คุณสามารถสร้างลักษณะการทำงานเหล่านี้ขึ้นมาอีกครั้งได้โดยใช้เอลิเมนต์ <video>

  • ในไฟล์ index.html ให้แทนที่บรรทัดด้วย <img> ด้วย
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

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

ระบุแหล่งที่มา

ที่เหลือก็เพียงแค่ระบุแหล่งที่มาของวิดีโอ องค์ประกอบ <video> ต้องมี องค์ประกอบย่อย <source> อย่างน้อย 1 รายการที่ชี้ไปยังไฟล์วิดีโออื่น สามารถเลือกได้ โดยขึ้นอยู่กับการสนับสนุนรูปแบบ อัปเดต <video> ด้วยองค์ประกอบ <source> ที่ลิงก์ไปยังวิดีโอแมวของคุณ

<video autoplay loop muted playsinline>
  <source src="/images/cat-herd.webm" type="video/webm">
  <source src="/images/cat-herd.mp4" type="video/mp4">
</video>

Preview

  • หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ เต็มหน้าจอ

ประสบการณ์การใช้งานควรจะเหมือนกัน ตอนนี้ทุกอย่างไปได้สวย

ยืนยันด้วย Lighthouse

เมื่อเปิดเว็บไซต์ที่เผยแพร่อยู่ ให้ทำดังนี้

  1. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
  2. คลิกแท็บ Lighthouse
  3. ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายประสิทธิภาพในรายการหมวดหมู่แล้ว
  4. คลิกปุ่มสร้างรายงาน

คุณจะเห็นตัวเลือก "ใช้รูปแบบวิดีโอสำหรับเนื้อหาภาพเคลื่อนไหว" การตรวจสอบตอนนี้ ผ่าน! ไชโย 💪