Thay thế GIF bằng video

Rob Dodson

Để theo dõi lớp học lập trình này, hãy mở nhiễu hỗ trợ này trong thẻ thứ hai.

Lưu ý: Lớp học lập trình này sử dụng Công cụ của Chrome cho nhà phát triển. Tải Chrome xuống nếu bạn chưa có.

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 một 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 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à vấn đề ở chỗ "Sử dụng định dạng video cho nội dung hoạt ảnh" kiểm tra.

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. Công cụ này đã được cài đặt trong máy ảo Glitch, và nếu muốn, bạn có thể làm theo các hướng dẫn này để cài đặt ứng dụng trên địa phương máy của Google.

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 (lưu ý: nếu nút Terminal không hiển thị, thì có thể bạn cần phải dùng chế độ 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 GIF thành video

• Trong bảng điều khiển, hãy chạy cd images để 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 tệp đó thành video có tên mèo-herd.mp4. Việc này sẽ mất khoảng thời gian 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 sản phẩm mới 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 thì 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, để nếu trình duyệt không hỗ trợ WebM, trình duyệt có thể dự phòng thành 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

• Cách kiểm tra kích thước tệp hãy chạy:

ls -lh

Bạn nên 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 lớn!

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

Ảnh GIF động có ba đặc điểm chính mà video cần tái hiện:

• Các 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 được tình trạng lặp lại).
• Họ im lặng.

Thật may là bạn có thể tạo lại những hành vi này bằng cách sử dụ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>

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

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

Bạn chỉ cần chỉ định nguồn video của mình. Phần tử <video> cần có một hoặc nhiều phần tử con <source> trỏ đến các tệp video khác nhau 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 hướng dẫn mèo 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>

Lưu ý: Các trình duyệt không suy đoán <source> nào là tối ưu, vì vậy thứ tự của <source> rất quan trọng. Ví dụ: nếu bạn chỉ định video MP4 trước và trình duyệt hỗ trợ WebM, thì trình duyệt sẽ bỏ qua WebM <source> và sử dụng MPEG-4. Nếu bạn muốn sử dụng WebM <source> trước tiên, hãy chỉ định WebM đó trước!

Xem trước

• Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn Toàn màn hình .

Trải nghiệm phải 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 nút "Sử dụng định dạng video cho nội dung hoạt ảnh" CANNOT TRANSLATE vượt qua! Thật tuyệt vời! 💪