Hôm nay bạn sẽ học cách nhanh chóng nhúng video MP4 trong HTML sử dụng phần tử <video>. Tôi sẽ bao gồm:
- Cách điều chỉnh kích thước trình phát video
- Cách tự động phát video
- Cách lặp vô hạn video
Hầu hết hướng dẫn dùng GIF cho video nhỏ để minh họa khái niệm. Tôi thấy MP4 chất lượng tốt hơn và chiếm ít dung lượng hơn. MP4, khác với WebM, hoạt động trong tất cả trình duyệt hiện đại, và bạn cũng có thể tải lên các dịch vụ video như YouTube.
Nhúng video với phần tử video HTML5
Để hiển thị video MP4 trong HTML, bạn cần dùng phần tử <video> của HTML5. Triển khai đơn giản nhất trông như sau:
<video width="500" controls> <source src="đường-dẫn-video-của-bạn.mp4" type="video/mp4" /> </video>Bạn có thể bỏ thuộc tính controls, nhưng tôi không khuyến khích, vì đó là thứ cho phép người dùng tạm dừng/phát/quay lại video.
Giá trị 500 được đo bằng đơn vị pixel (500px).
Chỉ cần thay thế "đường-dẫn-video-của-bạn.mp4" bằng nguồn MP4 thực tế, bạn có thể dùng cái này để test (từ một trong hướng dẫn của tôi):
https://res.cloudinary.com/techstacker/video/upload/f_auto/v1548698438/TechStacker/mac-drag-app-icon-to-dock.mp4Điều chỉnh kích thước trình phát video (chiều rộng/cao)
Video hiện tại có chiều rộng 500 pixel, bạn có thể đổi thành bất kỳ giá trị nào. Nếu muốn nó chiếm 100% không gian tương đối (container chứa video element), bạn chỉ cần đổi thành width="100%".
Bạn cũng có thể điều chỉnh chiều cao bằng thuộc tính height. Đây là ví dụ dùng cả hai:
<video width="100%" height="400" controls> <source src="đường-dẫn-video-của-bạn.mp4" type="video/mp4" /> </video>Tự động phát video (một lần)
Để tự động phát video MP4 một lần khi người dùng nhìn thấy video trên màn hình, thêm thuộc tính autoplay trên phần tử video:
<video width="500" controls autoplay> <source src="đường-dẫn-video-của-bạn.mp4" type="video/mp4" /> </video>Cách autoplay hoạt động
Chức năng autoplay sẽ tự động kích hoạt ngay khi người dùng có video bên trong viewport màn hình của họ.
Lặp video
Để lặp (phát vô hạn) video MP4 trong HTML5, dùng thuộc tính loop:
<video width="500" controls autoplay loop> <source src="đường-dẫn-video-của-bạn.mp4" type="video/mp4" /> </video>Lưu ý: thuộc tính controls cho phép người dùng tạm dừng/dừng video, nhưng hãy nhớ rằng video lặp có thể gây phiền toái, đặc biệt là có âm thanh. Chỉ dùng thuộc tính loop khi nó có ý nghĩa trong trường hợp sử dụng cụ thể.
Hỗ trợ trình duyệt
Ngày của trình duyệt khủng long cũ đã gần như kết thúc. Nhưng cho trình duyệt không hỗ trợ phần tử video, bạn có thể thêm văn bản giữa thẻ <video> để báo cho người dùng:
<video width="500" controls autoplay> <source src="đường-dẫn-video-của-bạn.mp4" type="video/mp4" /> Trình duyệt của bạn đã lỗi thời, hãy cập nhật để hiển thị video </video>Văn bản chỉ hiển thị trong trình duyệt cũ lỗi thời (dưới Internet Explorer 9).
Dùng WebM với MP4 dự phòng
Nếu bạn có cả phiên bản WebM và MP4 của video, bạn có thể dùng mã sau để dùng MP4 làm dự phòng, nếu trình duyệt của người dùng không hỗ trợ WebM:
<video width="500" controls> <source src="đường-dẫn-video-của-bạn.webm" type="video/webm" /> <source src="đường-dẫn-video-của-bạn.mp4" type="video/mp4" /> </video>Lưu ý: tính đến hiện tại, chỉ Chrome và Opera hỗ trợ đầy đủ WebM, nhưng Firefox và Edge đang triển khai hỗ trợ.
Mẹo thêm
Để quay video MP4 nhanh, bạn có thể dùng các công cụ miễn phí sau:
- Ứng dụng Kap (Mac)
- Icecream Screen Record (Windows)
Để tải lên và lưu trữ video miễn phí, tôi khuyến khích Cloudinary.