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, đo lường hiệu suất của trang web:

  1. Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào Fullscreen toàn màn hình (Toàn màn hình).
  2. 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.
  3. Nhấp vào thẻ Lighthouse.
  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ờ ảnh GIF là một vấn đề trong quá 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 để bạn có thể chuyển đổi ảnh GIF thành video. Hướng dẫn này sử dụng FFmpeg. Tính năng này đã được cài đặt trong máy ảo Glitch, và nếu muốn, bạn cũng có thể làm theo các hướng dẫn này để cài đặt trên máy cục bộ.

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

Kiểm tra kỹ xem FFmpeg đã được cài đặt và đang hoạt động chưa:

  1. Nhấp vào Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.
  2. Nhấp vào Thiết bị đầu cuối (lưu ý: nếu nút Thiết bị đầu cuối không hiển thị, bạn có thể cần phải sử dụng tùy 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 lại đường dẫn tệp:

/usr/bin/ffmpeg

Thay đổi ảnh GIF thành video

  • Trong bảng điều khiển, hãy chạy cd images để truy cập vào 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 thông tin đầu vào, được biểu thị bằng cờ -i của mèo-herd.gif và chuyển đổi dữ liệu đó thành video có tên mèo-herd.mp4. Quá trình này sẽ mất một giây để chạy. Khi lệnh này kết thúc, bạn có thể nhập lại ls và thấy 2 tệp:

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

Tạo video WebM

Mặc dù MP4 đã có mặt từ năm 1999, nhưng WebM là một phiên bản tương đối mới đã được phát hành lần đầu 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, 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, trình duyệt có thể dùng MP4 dự phòng.

  • 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
  • Cách kiểm tra kích thước tệp chạy:
ls -lh

Bạn phải 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 GIF gốc là 3, 7M, trong khi phiên bản MP4 là 551K và phiên bản WebM chỉ là 341K. Đó 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

GIF động có 3 đặc điểm chính mà video cần tái tạo:

  • Những video này sẽ tự động phát.
  • Chúng lặp lại liên tục (thường là nhưng có thể tránh 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 bằng <img> bằng:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

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

Chỉ định nguồn của bạn

Bạn chỉ cần 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 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 video về thú cưng của bạn:

<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 View App (Xem ứng dụng), sau đó nhấn vào Fullscreen toàn màn hình (Toàn màn hình).

Trải nghiệm sẽ trông giống nhau. Đến giờ thì mọi thứ vẫn ổn!

Xác minh bằng Lighthouse

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

  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.
  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 rằng bước kiểm tra "Sử dụng định dạng video cho nội dung động" hiện đã đạt! Tuyệt vời! 💪