Cách nhúng video vào html

1) Thẻ

- Thẻ được dùng để tạo một "trình xem phim" cho trang web.

- Ví dụ: Bên dưới là một trình xem phim.

- Để tạo một trình xem phim thì thẻ

- Đoạn mã bên dưới dùng để tạo một trình xem phim giống như ví dụ phía trên


Xem ví dụ

2) Các thuộc tính được sử dụng trong thẻ

- Thẻ

- Dưới đây là bảng mô tả sơ lược về chín thuộc tính đó:

src Xác định đường dẫn đến tập tin video mà bạn muốn phát
controls Xác định việc "thanh điều khiển của trình xem phim sẽ được hiển thị"
autoplay Thiết lập hành động:
"sau khi trang web được tải xong, trình xem phim sẽ tự động phát video"
loop Thiết lập hành động "video sẽ tự động được phát lặp lại sau mỗi lần kết thúc"
muted Xác định việc trình xem phim sẽ mặc định được thiết lập ở chế độ "tắt tiếng"
preload Xác định việc tập tin video có được tải cùng với lúc tải trang hay không
poster Xác định một tập tin hình ảnh dùng để làm ảnh đại diện cho video trước khi phát
width Xác định chiều rộng của trình xem phim
height Xác định chiều cao của trình xem phim

2.1) Thuộc tính src

- Thuộc tính src dùng để xác định đường dẫn đến tập tin video mà bạn muốn phát.

- Lưu ý: "Đường dẫn đến tập tin video mà bạn muốn phát" có thể được xác định bằng đường dẫn tương đối hoặc đường dẫn tuyệt đối.


Xem ví dụ

- Tuy nhiên, hầu hết các lập trình viên không sử dụng thuộc tính src của thẻ


Xem ví dụ

2.2) Thuộc tính autoplay

- Thuộc tính autoplay thiết lập hành động "sau khi trang web được tải xong, trình xem phim sẽ tự động phát video"


Xem ví dụ

2.3) Thuộc tính controls

- Thuộc tính controls xác định việc "thanh điều khiển của trình xem phim sẽ được hiển thị"


- Thanh điều khiển của trình xem phim bên dưới ĐƯỢC hiển thị.

- Thanh điều khiển của trình xem phim bên dưới KHÔNG ĐƯỢC hiển thị.

Xem ví dụ

2.4) Thuộc tính loop

- Thuộc tính loop thiết lập hành động "video sẽ tự động được phát lặp lại sau mỗi lần kết thúc"


Xem ví dụ

2.5) Thuộc tính muted

- Thuộc tính muted xác định việc trình xem phim sẽ mặc định được thiết lập ở chế độ "tắt tiếng"


Xem ví dụ

2.6) Thuộc tính preload

Mặc định khi trang web được tải thì tập tin video của trình xem phim cũng được tải theo, điều đó đồng nghĩa với việc tốc độ tải trang bị chậm lại.

- Thuộc tính preload xác định việc tập tin video có được tải cùng với lúc tải trang hay không.

- Thuộc tính preload có hai giá trị:

auto Tập tin video sẽ được tải cùng với lúc tải trang
none Tập tin video sẽ KHÔNG được tải cùng với lúc tải trang
(nó chỉ được tải khi người dùng bấm vào nút play)


Xem ví dụ

2.7) Thuộc tính poster

- Thuộc tính poster dùng để xác định đường dẫn đến một tập tin hình ảnh mà bạn muốn dùng để làm ảnh đại diện cho video trước khi phát.


Xem ví dụ

- Lưu ý: Giá trị của thuộc tính poster có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối.

2.8) Thuộc tính width & height

- Thuộc tính width & height dùng để xác định chiều rộng & chiều cao của trình xem phim.


Xem ví dụ

3) Những định dạng video được hỗ trợ

- Hiện nay có ba loại định dạng video phổ biến được hỗ trợ trên các trình duyệt: MP4, WebM, Ogg

FormatMIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

- Tuy nhiên, không phải tất cả các trình duyệt đều hỗ tợ hết ba loại định dạng video này.

Trình duyệtMP4WebMOgg
Chrome
Firefox
Opera
Safari KHÔNG KHÔNG
Internet Explorer KHÔNG KHÔNG

- Để đề phòng trường hợp trình duyệt không hỗ trợ định dạng tập tin video của bạn, bạn có thể "sơ cua" thêm một vài tập tin video khác bằng những thẻ khác (nếu định dạng tập tin video thứ nhất không được hỗ trợ thì nó sẽ chuyển sang sử dụng tập tin video thứ hai, ....)


lt;video controls>