Thẻ video trong HTML là câu lệnh được sử dụng để chèn “trình xem phim” cho một website nào đó. Dòng lệnh này không quá khó để thực hiện. Tuy nhiên, chúng vẫn cần độ chính xác cao nhằm tối ưu hóa website của bạn một cách tốt nhất. Cách chèn thẻ video trong HTML như nào? Hãy cùng xem bài viết dưới đây.
Mục lục
1. Thẻ video trong HTML
Như đã biết, thẻ video trong HTML được dùng để tạo “trình xem video” trên nền tảng website. Để có thể tạo trình xem video này, trước hết thẻ video cần phải được sử dụng đồng bộ với thẻ source nhằm xác định chính xác tệp tin mà bạn muốn trình chiếu.
Ví dụ như:
<!DOCTYPE html>
<html>
<body>
<video controls>
<source src="../file/bunny.mp4">
</video>
</body>
</html>
Đây là 1 đoạn mã được dùng để tạo trình xem video cơ bản nhất.
2. Các thuộc tính được sử dụng trong thẻ audio
Để trình xem video có khả năng phát ra âm thanh đi kèm, bạn còn cần kết hợp thẻ video với thẻ audio. Để phần âm thanh trùng khớp với video, bạn cần hiểu rõ 9 thuộc tính cơ bản của thẻ video trong HTML như sau:
- Src: xác định đường dẫn của tập tin muốn trình chiếu
- Controls: thiết kế “thanh điều khiển của trình xem phim khi hiển thị”
- Autoplay: thiết lập hành động nhằm cài đặt hành động “tự động phát video” khi video đã được tải hoàn chỉnh lên website
- Loop: thiết lập hành động tự phát lại video mỗi lần kết thúc
- Muted: cài đặt chế độ tắt âm thanh cho video
- Preload: cài đặt chế độ đồng bộ thời gian tải video cùng lúc với khi tải trang
- Poster: cài đặt chế độ hiển thị ảnh thumbnail trước khi phát video
- Width: cài đặt kích thước chiều ngang tiêu chuẩn của video
- Height: cài đặt kích thước chiều dọc tiêu chuẩn của video
3. Những định dạng video được hỗ trợ
Hiện nay, các trình duyệt web phổ biến như Chrome, Firefox, Opera, Safari, Internet Explorer đều có hỗ trợ thẻ định dạng video MP4. Đây là định dạng video được đánh giá tối ưu nhất, đem lại trải nghiệm tốt cho người dùng. Có thể đọc được trên nhiều trình duyệt máy tính khác nhau.
Ngoài định dạng MP4, định dạng WebM hay Ogg cũng được sử dụng khá nhiều, đặc biệt là với các tệp video có dung lượng cao. Tuy nhiên, 2 định dạng video này chỉ được hỗ trợ trên Chrome, Firefox và Opera, còn 2 trình duyệt đặc thù là Safari và Internet Explorer thì không.
Trên đây là những hướng dẫn cơ bản về việc thực hiện cài đặt một thẻ video vào trong HTML. Hy vọng thông qua bài viết này, bạn có thể dễ dàng tìm hiểu, tối ưu cách ứng dụng thẻ video trong HTML cho website của mình.
