[Học HTML5] Bài 3. HTML5 Video

[Học HTML5] Bài 3. HTML5 Video

Nhiều trình duyệt hiện đại cho phép hiển thị video. HTML5 cũng cung cấp 1 chuẩn để hiển thị video.
 

Video trên Web

Cho đến bây giờ thì vẫn chưa có một chuẩn cho việc hiển thị video trên trang web.

Ngày nay, hầu hết video được hiển thị thông qua các plugin (như Flash). Tuy nhiên không phải trình duyệt nào cũng cùng 1 plugin như vậy. HTML5 đặc tả một chuẩn để nhúng video với thẻ <video>.

Định dạng Video

Hiện tại, HTML5 hỗ trợ 3 chuẩn định dạng cho video:

Định dạng	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	No	10.6+	6.0+	No

• Ogg = Định dạng Ogg với mã hóa video dạng Theora và Vorbis
• MPEG4 = Định dạng MPEG 4 với mã hóa video dạng H.264 và AAC
• WebM = Định dạng WebM với mã hóa video dạng VP8 và Vorbis 

Cách hoạt động của video trong HTML5

Để hiển thị video chỉ cần 1 đoạn code:

<video src="movie.ogg" controls="controls"> </video>

Các thuộc tính trong thẻ video bao gồm play, pause và volume. Tương tự cũng có các thuộc tính width và height.

Trường hợp trình duyệt không hỗ trợ video thì nên để câu thông báo như sau:

Ví dụ <video src="movie.ogg" width="320" height="240" controls="controls"> Trình duyệt của bạn không hỗ trợ video </video> Thử ví dụ »

Ví dụ trên dùng file Ogg và sẽ chạy tốt trong các trình duyệt Firefox, Opera và Chrome.

Để tạo video trong IE, Safaru và các phiên bản mới của Chrome thì phải thêm dạng file MPEG4 và WebM.

Thẻ video cho phép thêm nhiều thuộc tính source chỉ ra đường dẫn của video. Các thuộc tính source này có thể liên kết tới nhiều video khác nhau.

Ví dụ <video width="320" height="240" controls="controls">   <source src="movie.ogg" type="video/ogg" />   <source src="movie.mp4" type="video/mp4" />   <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video> Thử ví dụ »

Danh sách các thuộc tính của thẻ <video>

Thuộc tính	Giá trị	Mô tả
audio	muted	Định nghĩa trạng thái mặc định của audio. Hiện tại, chỉ có trang thái "im lặng" được cho phép.
autoplay	autoplay	Nếu được thiết lập, video sẽ tự động chơi khi được kích hoạt
controls	controls	Nếu được thiết lập, giao diện video sẽ xuất hiện (như nút Play)
height	pixels	Đặt độ cao của video theo pixes
loop	loop	Nếu được thiết lập, video sẽ tự động chơi đi lại chơi lại
poster	url	Đặc tả một URL thể hiện hình ảnh cho video
preload	preload	Nếu được thiết lập, video sẽ được tải tại trang web và sẵn sàng thực thi.
src	url	Đường dẫn cho video
width	pixels	Đặt độ rộng của video theo pixes

Dịch và biên tập lại từ trang http://www.w3schools.com bởi DAMMIO

LƯU Ý: TOÀN BỘ NỘI DUNG CHỈ PHỤC VỤ CHO MỤC ĐÍCH NGHIÊN CỨU HỌC TẬP