Thẻ VIDEO trong HTML

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, chi tiết như nào hãy cùng chúng tôi phân tích:

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.

Bao gồm thẻ mở <video> và thẻ đóng </video>.

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>

File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

Lời kết

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

  • 0 Bình luận
Content Trần Ngọc Thanh
Trần Ngọc Thanh
Content Trần Ngọc Thanh là người viết content có kinh nghiệm nhiều năm tại Web Mới, chuyên viết content bên lĩnh vực website và nhiều lĩnh vực khác
Chia sẻ nội dung đánh giá của bạn về Thẻ VIDEO trong HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Đăng ký tư vấn thiết kế website
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn