Thẻ HTML <video>

Nguyen Le Oanh

Định nghĩa và cách sử dụng thẻ <video>

Thẻ <video> được sử dụng để nhúng nội dung video vào tài liệu, chẳng hạn như đoạn phim hoặc các stream video khác. Ví dụ để phát video:

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

Thẻ <video> chứa một hoặc nhiều thẻ <source> với các nguồn video khác nhau. Trình duyệt sẽ chọn nguồn đầu tiên mà nó hỗ trợ.

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>. Có 3 định dạng video được hỗ trợ trong HTML: MP4, WebM và OGG.

Trình duyệt	MP4	WebM	Ogg
Edge	CÓ	CÓ	CÓ
Chrome	CÓ	CÓ	CÓ
Firefox	CÓ	CÓ	CÓ
Safari	CÓ	CÓ	KHÔNG
Opera	CÓ	CÓ	CÓ

Mẹo: Đối với file âm thanh, hãy xem thẻ <audio>.

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử.

Phần tử <video>	Google Chrome	MS Edge	Firefox	Safari	Opera
Phần tử <video>	4.0	9.0	3.5	3.1	11.5

Thuộc tính tùy chọn

Thuộc tính	Giá trị	Mô tả
autoplay	autoplay	Chỉ định rằng video sẽ bắt đầu phát ngay khi nó sẵn sàng
controls	controls	Chỉ định các nút điều khiển video sẽ được hiển thị (chẳng hạn như nút phát/tạm dừng, v.v...).
height	pixels	Đặt chiều cao của trình phát video
loop	loop	Chỉ định rằng video sẽ bắt đầu lại mỗi khi nó kết thúc
muted	muted	Chỉ định rằng đầu ra âm thanh của video phải bị tắt tiếng
poster	URL	Chỉ định hình ảnh sẽ hiển thị trong khi video đang tải xuống hoặc cho đến khi người dùng nhấn nút phát
preload	auto metadata none	Chỉ rõ liệu tác giả có nghĩ rằng video sẽ được tải khi trang load hay không và load như thế nào
src	URL	Chỉ định URL của file video
width	pixels	Thiết lập chiều rộng của trình phát video

Thuộc tính Global

Thẻ <source> cũng hỗ trợ thuộc tính Global trong HTML.

Thuộc tính sự kiện

Thẻ <source> cũng hỗ trợ thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Không có.

Chủ Nhật, 13/10/2024 07:50

4 ★ 2 👨 435

Bạn nên đọc

Xác thực tài khoản!

Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

Số điện thoại chưa đúng định dạng!