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:
- Để 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).
- 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.
- Nhấp vào thẻ Lighthouse.
- Đảm bảo bạn đã chọn hộp đánh dấu Hiệu suất trong danh sách Danh mục.
- 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:
- Nhấp vào Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.
- 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).
- 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).
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ở:
- 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.
- Nhấp vào thẻ Lighthouse.
- Đảm bảo bạn đã chọn hộp đánh dấu Hiệu suất trong danh sách Danh mục.
- 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! 💪