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 widthheight . 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 Biểu tượng máy tính Google Chrome Trình duyệt web, Chrome OS, trái bóng, hệ điều hành chrome png | PNGEgg Đây là logo mới của trình duyệt Microsoft Edge dựa trên Chromium | Tinh tế Cận cảnh loài vật biểu tượng của trình duyệt FireFox ngoài đời thực Tại sao bạn nên sử dụng Safari thay vì Chrome trên MacBook? Có vấn đề về trình duyệt? Chúng tôi có thể giúp bạn! | Trợ giúp &amp; FAQ | Opera
<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