Thẻ VIDEO trong HTML

• Trần Thị Vân
• 2232
• 02/05/2025

Chức năng của Thẻ VIDEO trong HTML

Thẻ VIDEO trong HTML dùng để liên kết và mở file video cho người dùng xem, file video có thể ở trên website của chính bạn hoặc có thể file video nằm trên trang web khác.

Cú pháp của Thẻ VIDEO trong HTML

<video width="400" height="400" controls autoplay muted >
  <source src="file-video.mp4" type="video/mp4">
  <source src="file-video.ogg" type="video/ogg">
</video>

source: Dùng để khai báo đường dẫn đến file video, trình duyệt sẽ đọc thẻ source đầu tiên mà nó hỗ trợ định dạng, các định dạng mà trình duyệt hỗ trợ như: mp4, ogg, WebM.

width, height: Khởi tạo chiều rộng và chiều cao cho video.

controls: Hiển thị thanh công cụ cài đặt của video.

autoplay: Tự động phát video.

muted: Làm tắt tiếng video khi tự động phát.

Các thành phần có trong thẻ video

Thẻ source trong thẻ video

Thẻ source dùng để khai báo đường dẫn đến file video, trình duyệt sẽ đọc thẻ source đầu tiên mà nó hỗ trợ định dạng, các định dạng mà trình duyệt hỗ trợ như: mp4, ogg, WebM:

<video>
  <source src="file-video.mp4" type="video/mp4">
  <source src="file-video.ogg" type="video/ogg">
</video>

Chạy Thử

Thuộc tính width, height trong thẻ video

Khởi tạo chiều rộng và chiều cao cho video:

<video width="400" height="400">
  <source src="file-video.mp4" type="video/mp4">
  <source src="file-video.ogg" type="video/ogg">
</video>

Chạy Thử

Thuộc tính controls trong thẻ video

Thuộc tính controls dùng để hiển thị thanh công cụ cài đặt của video:

<video width="400" height="400" controls >
  <source src="file-video.mp4" type="video/mp4">
  <source src="file-video.ogg" type="video/ogg">
</video>

Chạy Thử

Thuộc tính autoplay trong thẻ video

Thuộc tính autoplay có chức năng tự động phát video:

<video width="400" height="400" controls autoplay >
  <source src="file-video.mp4" type="video/mp4">
  <source src="file-video.ogg" type="video/ogg">
</video>

Chạy Thử

Thuộc tính muted trong thẻ video

Thuộc tính muted có chức năng làm tắt tiếng video khi tự động phát:

<video width="400" height="400" controls autoplay muted >
  <source src="file-video.mp4" type="video/mp4">
  <source src="file-video.ogg" type="video/ogg">
</video>

Chạy Thử

Các định dạng file trong thẻ video

Cách tối ưu thẻ VIDEO trong HTML cho website

Tối ưu thẻ video trong HTML giúp nội dung đa phương tiện hoạt động ổn định hơn, giảm thời gian tải trang và mang lại trải nghiệm tốt cho người truy cập. Một video được cấu hình hợp lý không chỉ giúp website chuyên nghiệp hơn mà còn hạn chế ảnh hưởng đến hiệu suất tổng thể.

Tối ưu kích thước và tốc độ tải video

Kích thước video có ảnh hưởng trực tiếp đến tốc độ tải trang. Những video có dung lượng lớn sẽ khiến người dùng phải chờ lâu hơn, đặc biệt trên thiết bị di động hoặc kết nối mạng yếu.

• Nên nén video trước khi đưa lên website để giảm dung lượng nhưng vẫn giữ chất lượng hình ảnh.
• Ưu tiên sử dụng các định dạng phổ biến như MP4 với bộ mã hóa phù hợp để tăng khả năng tương thích.
• Thiết lập kích thước video phù hợp với khu vực hiển thị, tránh tải nội dung quá lớn so với nhu cầu thực tế.
• Có thể sử dụng thuộc tính poster để hiển thị ảnh đại diện trước khi video được phát.

Ví dụ thiết lập ảnh xem trước cho video:

<video controls poster="anh-dai-dien.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

Thêm thuộc tính hỗ trợ trải nghiệm người dùng

Các thuộc tính trong thẻ video giúp kiểm soát cách video hiển thị và hoạt động trên website. Việc sử dụng đúng thuộc tính giúp người dùng dễ dàng tương tác với nội dung hơn.

• controls: Hiển thị thanh điều khiển để người dùng phát, dừng, điều chỉnh âm lượng hoặc tua video.
• muted: Tắt âm thanh mặc định, phù hợp với những trường hợp cần video tự động phát.
• preload: Kiểm soát cách trình duyệt tải dữ liệu video trước khi người dùng phát.
• loop: Cho phép video tự động phát lại sau khi kết thúc.

Nên cân nhắc mục đích sử dụng trước khi bật các thuộc tính tự động như autoplay. Video tự phát có âm thanh có thể gây khó chịu và ảnh hưởng đến trải nghiệm người dùng.

Lưu ý khi sử dụng video để cải thiện SEO website

Công cụ tìm kiếm không chỉ đánh giá nội dung văn bản mà còn quan tâm đến cách website cung cấp trải nghiệm cho người dùng. Vì vậy, video cần được tối ưu đúng cách để hỗ trợ SEO hiệu quả.

• Nên bổ sung nội dung mô tả liên quan đến video bằng văn bản để công cụ tìm kiếm hiểu rõ chủ đề.
• Sử dụng tiêu đề, tên file video có ý nghĩa thay vì các tên mặc định khó hiểu.
• Đảm bảo video không làm giảm tốc độ tải trang hoặc ảnh hưởng đến chỉ số trải nghiệm người dùng.
• Cung cấp phụ đề hoặc nội dung thay thế khi cần thiết để tăng khả năng tiếp cận.

Một video được tối ưu tốt sẽ vừa hỗ trợ truyền tải thông tin hiệu quả, vừa góp phần nâng cao chất lượng tổng thể của website.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ VIDEO trong HTML.