ใน Codelab นี้ ปรับปรุงประสิทธิภาพโดยแทนที่ GIF แบบเคลื่อนไหวด้วยวิดีโอ
วัดก่อน
ก่อนอื่น ให้วัดผลประสิทธิภาพของเว็บไซต์ ดังนี้
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บ Lighthouse
- ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายประสิทธิภาพในรายการหมวดหมู่
- คลิกปุ่มสร้างรายงาน
เมื่อดำเนินการเสร็จสิ้น คุณจะเห็นว่า Lighthouse ได้แจ้งว่า GIF นั้นเป็นปัญหาในการตรวจสอบ "ใช้รูปแบบวิดีโอสำหรับเนื้อหาภาพเคลื่อนไหว"
รับ FFmpeg
คุณสามารถแปลง GIF เป็นวิดีโอได้หลายวิธี คู่มือนี้ใช้ FFmpeg โค้ดนี้ติดตั้งอยู่ใน VM ของ Glitch แล้ว และคุณก็ทำตามวิธีการเหล่านี้เพื่อติดตั้งบนเครื่องภายในได้ด้วย หากต้องการ
เปิดคอนโซล
ตรวจสอบอีกครั้งว่า FFmpeg ได้รับการติดตั้งและใช้งานได้:
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
- คลิกเทอร์มินัล (หมายเหตุ: หากปุ่มเทอร์มินัลไม่แสดงขึ้น คุณอาจต้องใช้ตัวเลือกเต็มหน้าจอ)
- ในคอนโซล ให้ใช้คำสั่งต่อไปนี้
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 เอาอินพุตซึ่งแสดงเป็นแฟล็ก -i ของ cat-herd.gif แล้วแปลงเป็นวิดีโอชื่อ cat-herd.mp4 การดำเนินการนี้อาจใช้เวลาอีก 1 วินาที เมื่อคำสั่งเสร็จสิ้นแล้ว คุณควรสามารถพิมพ์ 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
เมื่อเปิดเว็บไซต์ที่เผยแพร่อยู่ ให้ทำดังนี้
- กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บ Lighthouse
- ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายประสิทธิภาพในรายการหมวดหมู่
- คลิกปุ่มสร้างรายงาน
คุณจะเห็นว่าการตรวจสอบ "ใช้รูปแบบวิดีโอสำหรับเนื้อหาภาพเคลื่อนไหว" ผ่านแล้ว! ไชโย 💪