Thay thế GIF bằng video

Rob Dodson

Trong lớp học lập trình này, hãy cải thiện hiệu suất bằng cách thay thế ảnh GIF động bằng video.

Đo lường trước

Trước tiên, hãy đo lường hiệu suất của trang web:

  1. Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cảnh toàn màn hình.
  2. Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.
  3. Nhấp vào thẻ Lighthouse (Tháp hải đăng).
  4. Đảm bảo bạn đã chọn hộp đánh dấu Hiệu suất trong danh sách Danh mục.
  5. Nhấp vào nút Tạo báo cáo.

Khi hoàn tất, bạn sẽ thấy Lighthouse đã gắn cờ GIF là một vấn đề trong quy trình kiểm tra "Sử dụng định dạng video cho nội dung động".

Tải FFmpeg

Có một số cách để chuyển đổi ảnh GIF sang video; hướng dẫn này sử dụng FFmpeg. JDK đã được cài đặt trong máy ảo Glitch. Nếu muốn, bạn cũng có thể làm theo hướng dẫn này để cài đặt JDK trên máy cục bộ.

Mở bảng điều khiển

Kiểm tra kỹ để đảm bảo FFmpeg đã được cài đặt và đang hoạt động:

  1. Nhấp vào Phối lại để chỉnh sửa để có thể chỉnh sửa dự án.
  2. Nhấp vào Terminal (Thiết bị đầu cuối) (lưu ý: nếu nút Terminal không xuất hiện, bạn có thể cần sử dụng tuỳ chọn Toàn màn hình).
  3. Trong bảng điều khiển, hãy chạy:
which ffmpeg

Bạn sẽ nhận được đường dẫn tệp trả về:

/usr/bin/ffmpeg

Thay đổi ảnh GIF thành video

  • Trong bảng điều khiển, hãy chạy cd images để chuyển đến thư mục hình ảnh.
  • Chạy ls để xem nội dung.

Bạn sẽ thấy như sau:

$ ls
cat-herd.gif
  • Trong bảng điều khiển, hãy chạy:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

Thao tác này sẽ yêu cầu FFmpeg lấy dữ liệu đầu vào (được biểu thị bằng cờ -i) của mèo-herd.gif rồi chuyển đổi dữ liệu đó thành một video có tên là mèo-herd.mp4. Quá trình này sẽ mất một giây để chạy. Khi lệnh này hoàn tất, bạn có thể nhập lại ls và thấy hai tệp:

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

Tạo video WebM

Mặc dù MP4 đã xuất hiện từ năm 1999, nhưng WebM là một định dạng tương đối mới, được phát hành lần đầu tiên vào năm 2010. Video WebM có thể nhỏ hơn nhiều so với video MP4, vì vậy, bạn nên tạo cả hai. Rất may là phần tử <video> sẽ cho phép bạn thêm nhiều nguồn. Vì vậy, nếu trình duyệt không hỗ trợ WebM, thì phần tử đó có thể dự phòng cho MP4.

  • Trong bảng điều khiển, hãy chạy:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • Để kiểm tra kích thước tệp, hãy chạy:
ls -lh

Bạn sẽ có một ảnh GIF và hai video:

$ 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

Lưu ý rằng tệp GIF gốc có kích thước 3,7 triệu, trong khi phiên bản MP4 có kích thước 551 nghìn và phiên bản WebM chỉ có kích thước 341 nghìn. Đó là một khoản tiết kiệm rất lớn!

Cập nhật HTML để tạo lại hiệu ứng GIF

Ảnh GIF động có 3 đặc điểm chính mà video cần mô phỏng:

  • Các video này sẽ tự động phát.
  • Các vòng lặp này lặp lại liên tục (thường là như vậy, nhưng bạn có thể ngăn chặn việc lặp lại).
  • Chúng im lặng.

May mắn là bạn có thể tạo lại các hành vi này bằng phần tử <video>.

  • Trong tệp index.html, hãy thay thế dòng có <img> bằng:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

Phần tử <video> sử dụng các thuộc tính này sẽ tự động phát, lặp lại vô tận, không phát âm thanh và phát cùng dòng (tức là không toàn màn hình), tất cả các hành vi dự kiến của ảnh GIF động! 🎉

Chỉ định nguồn

Việc còn lại là chỉ định nguồn video. Phần tử <video> yêu cầu một hoặc nhiều phần tử con <source> trỏ đến các tệp video khác nhau mà trình duyệt có thể chọn, tuỳ thuộc vào khả năng hỗ trợ định dạng. Cập nhật <video> bằng các phần tử <source> liên kết đến các video về việc xua đuổi mèo:

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

Xem trước

  • Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cảnh toàn màn hình.

Trải nghiệm sẽ giống như vậy. Mọi thứ vẫn ổn.

Xác minh bằng Lighthouse

Khi trang web đang hoạt động:

  1. Nhấn tổ hợp phím "Control + Shift + J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
  2. Nhấp vào thẻ Lighthouse (Tháp hải đăng).
  3. Đảm bảo bạn đã chọn hộp đánh dấu Hiệu suất trong danh sách Danh mục.
  4. Nhấp vào nút Tạo báo cáo.

Bạn sẽ thấy quy trình kiểm tra "Sử dụng định dạng video cho nội dung động" hiện đã đạt! Thật tuyệt vời! 💪