Web Cơ Bản

Thẻ <video> trong HTML

1) Thẻ <video> trong HTML

- Thẻ <video> đượ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ẻ <video> cần phải được sử dụng kết hợp với thẻ <source> để xác định tập tin video mà bạn muốn phát.

Ví dụ:

- Đ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

<video controls>
  <source src="../file/bunny.mp4">
</video>
Xem ví dụ

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

- Thẻ <video> có chín thuộc tính cơ bản.

- 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.

Ví dụ:
<video src="../file/bunny.mp4" controls></video>
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ẻ <video> để xác định đường dẫn đến tập tin video mà bạn muốn phát. Họ sử dụng thẻ <source>, vì thẻ <source> có hỗ trợ thêm nhiều thuộc tính, giúp trình xem phim trở nên đa năng hơn.

Ví dụ:
<video controls>
    <source src="../file/bunny.mp4">
</video>
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"

Ví dụ:
<video controls autoplay>
    <source src="../file/bunny.mp4">
</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ị"

Ví dụ:
<p>- Thanh điều khiển của trình xem phim bên dưới ĐƯỢC hiển thị.</p>
<video autoplay controls>
    <source src="../file/bunny.mp4">
</video>
<p>- Thanh điều khiển của trình xem phim bên dưới KHÔNG ĐƯỢC hiển thị.</p>
<video autoplay>
    <source src="../file/bunny.mp4">
</video>
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"

Ví dụ:
<video controls loop>
    <source src="../file/bunny.mp4">
</video>
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"

Ví dụ:
<video controls muted>
    <source src="../file/bunny.mp4">
</video>
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)
Ví dụ
<video controls preload="none">
    <source src="../file/bunny.mp4">
</video>
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.

Ví dụ:
<video controls poster="../image/banner.png">
    <source src="../file/bunny.mp4">
</video>
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.

Ví dụ:
<video width="100%" height="350px" controls>
    <source src="../file/bunny.mp4">
</video>
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

Format MIME-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ệt MP4 WebM Ogg
Chrome CÓ CÓ CÓ
Firefox CÓ CÓ CÓ
Opera CÓ CÓ CÓ
Safari CÓ KHÔNG KHÔNG
Internet Explorer CÓ 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ẻ <source> 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, ....)

Ví dụ:
<video controls>
    <source src="../file/bunny.ogg">
    <source src="../file/bunny.mp4">
</video>