html video

Phần tử HTML <video> được sử dụng để hiển thị video trên trang web.

Ví dụ

Xem ví dụ

Phần tử HTML <video>


Để hiển thị video trong HTML, chúng ta sử dụng phần tử HTML <video>.

Ví dụ

<video width="400" controls="controls">
  <source src="Sea - 4006.mp4" type="video/mp4">
</video>

Xem kết quả

Thuộc tính controls bổ sung thêm các trình điều khiển video, như play, dừng, và dung lượng.

Chúng ta nên luôn thêm các thuộc tính widthheight vào thẻ <video>. Nếu thuộc tính chiều cao và chiều rộng không được đặt, trang có thể nhấp nháy trong khi tải video.

Phần tử <source> cho phép chúng ta chỉ định các file video thay thế mà trình duyệt có thể chọn. Trình duyệt sẽ sử dụng định dạng video được tìm thấy đầu tiên.

Văn bản giữa cặp thẻ <video></video> sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử <video>.

Video tự động phát


Để tự động phát video, chúng ta sử dụng thuộc tính autoplay.

Ví dụ

<video width="320" height="240" autoplay="autoplay" muted>
  <source src="/VIDEO/movie.mp4" type="video/mp4">
  <source src="/VIDEO/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Xem kết quả

Lưu ý: Trong hầu hết các trường hợp, trình duyệt Chromium không cho phép tự động phát. Tuy nhiên, tính năng tự động phát bị tắt tiếng thì luôn được cho phép.

 

Chúng ta thêm thuộc tính muted sau autoplay để video của chúng ta bắt đầu tự động phát (nhưng bị tắt tiếng)

Trình duyệt hỗ trợ


Các số trong bảng bên dưới chỉ định phiên bản tối thiểu trình duyệt hỗ trợ đầy đủ cho phần tử HTML <video>.

Phần tử          
<video> 4.0 9.0 3.5 4.0 10.5

Định dạng video HTML


Có ba định dạng video được hỗ trợ: MP4, WebM và Ogg. Trình duyệt hỗ trợ các định dạng khác nhau là:

Browser MP4 WebM Ogg
Edge YES YES YES
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

Video HTML - Các loại định dạng


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

Video HTML - Phương thức, Thuộc tính và Sự kiện


DOM HTML xác định các phương thức, thuộc tính và sự kiện cho phần tử <video>. Điều này cho phép chúng ta tải, phát và tạm dừng video cũng như đặt thời lượng và âm lượng.

Ngoài ra còn có các sự kiện DOM có thể thông báo cho chúng ta khi video bắt đầu phát, bị tạm dừng, v.v.

Ví dụ

 

 

Xem kết quả