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