Previous Lesson Next Lesson

Thẻ <video> trong HTML5

Thẻ `<video>` trong HTML

Tag <video> xác định một video, chẳng hạn như một đoạn phim hoặc một trường video.
Đoạn text nằm bên trong <video> và </video> sẽ hiển thị khi trình duyệt không hỗ trợ tag <video>
Thường dùng kèm với tag <source> để hiện thị được nhiều nội dung hơn

Sự khác nhau giữa HTML4.01 và HTML5

HTML4.01	HTML5
Không hỗ trợ	Đây là tag mới trong HTML5

Cấu trúc

<video src="" controls="controls">Dòng thông báo</video>

Ví dụ

<video src="đường dẫn tới file video" controls="controls">Trình duyệt bạn đang dùng không hỗ trợ tag video.</video>

Hiển thị nhiều nội dung với tag <source>

<video controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

Do trình duyệt hỗ trợ các định dạng file video khác nhau, nên cách dùng trên có thể chạy video cho nhiều trình duyệt và hệ điều hành khác nhau.

Định dạng file video hỗ trợ bởi trình duyệt và hệ điều hành:


WebM	X	4	10.6	6	X	X	X	X
Ogg	X	3.6	10.5	6	X	X	X	X
MPEG-4	9	X	X	X	5.1	3.1	X	X

Trình duyệt hỗ trợ

Yêu cầu phiên bản trình duyệt với mức tối thiểu được hỗ trợ cho thẻ <video>:

Trình duyệt dành cho PC:

39image-228

Tag <video> được hỗ trợ trong đa số các trình duyệt.

Thiết bị hỗ trợ

Yêu cầu phiên bản hệ điều hành và trình duyệt với mức tối thiểu được hỗ trợ cho thẻ <video>:

ĐIỆN THOẠI (SMARTPHONE)

Hệ điều hành

Thẻ <video> trong HTML-69

Trình duyệt

Thẻ <video> trong HTML-70

MÁY TÍNH BẢNG (TABLETS)

Hệ điều hành

Thẻ <video> trong HTML-71

Trình duyệt

Thẻ <video> trong HTML-72

Thuộc tính

Cách sử dụng:

<video thuoctinh="giatri"></video>

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

Thuộc tính	Giá trị	Ví dụ	Mô tả
audio	muted	audio="muted"	Xác định trạng thái mặc định của âm thanh.
autoplay	autoplay	autoplay="autoplay"	Xác định trạng thái tự động chạy của video.
controls	controls	controls="controls"	Hiển thị bộ điều khiển của video.
height	pixel	height="100px"	Xác định chiều cao của video.
loop	loop	loop="loop"	Xác định video có được lặp lại hay không.
poster	URL	poster="image/img_video.gif"	Xác định hình đại diện cho video.
preload	preload	preload="preload"	Xác định việc tải video khi tải trang.
src	URL	src="video/video.mpeg"	Xác định đường dẫn của video.
width	pixel	width="100px"	Xác định chiều rộng của video.

Thuộc tính Tổng quát và thuộc tính sự kiện

Tất cả thuộc tính tổng quát và thuộc tính sự kiện được xác định trên phần lớn các thành phần HTML5