Phần tử HTML <video> được sử dụng để hiển thị video trên trang web
1. Phần tử <video> trong HTML
Để hiển thị video trong HTML ta sử dụng phần tử <video>
Ví dụ:
Trong đó:
Thuộc tính controls bổ sung thêm điều khiển video, như bắt đầu, tạm dừng, và âm lượng
Bạn nên luôn sử dụng các thuộc tính width và height . Nếu 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 bạn chỉ định các tệp video thay thế mà trình duyệt có thể chọn. Trình duyệt sẽ sử dụng định dạng được nhận dạng đầu tiên
Văn bản giữa các thẻ <video> và </video> sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử <video>
2. Tự động phát video trong HTML
Để tự động bắt đầu video, chúng ta sử dụng thuộc tính autoplay
Ví dụ:
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, luôn cho phép tự động phát bị tắt tiếng
Thêm thuộc tính muted sau autoplay để video của bạn bắt đầu tự động phát (nhưng bị tắt tiếng)
Ví dụ:
3. Các trình duyệt hỗ trợ video
Các trình duyệt hỗ trợ phần tử video
Tình duyệt | |||||
<video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
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à:
Trình duyệt | MP4 | WebM | Ogg |
Edge | YES | YES | YES |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Saf | YES | YES | NO |
Opera | YES | YES | YES |
Trong HTML có các loại phương tiện video sau:
Kiểu file | Loại media |
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
4. Các phương thức, thuộc tính và sự kiện trong HTML video
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 bạn 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 bạn khi video bắt đầu phát, bị tạm dừng, v.v…
Ví dụ: Sử dụng JavaScript