Chèn video trong HTML5

Thứ sáu - 22/04/2022 23:19

Video là một thành phần không thể thiếu trên mỗi website. Việc chèn thêm video giúp cho website của bạn trở nên sinh động và đầy đủ hơn. Bài viết dưới đây, Quản Trị Mạng sẽ giới thiệu cho bạn cách sử dung thẻ <video> để hiển thị video trên website của bạn.

Ví dụ video dưới đây được chèn bằng thẻ video:

Phần tử <video> trong HTML

Để hiển thị video trên website, bạn hãy sử dụng thẻ <video> theo cấu trúc dưới đây:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Giải thích ví dụ trên:

- Thuộc tính controls trong ví dụ trên sẽ thêm thanh điều khiển video vào, như: phát, tạm dừng, phóng to và âm lượng...

- Bạn nên thêm thuộc tính width và height để đảm bảo cố định khung video sẽ được hiện trong quá trình load site.

- Phần tử source cho phép bạn chỉ định các tệp video thay thế mà trình duyệt có thể chọn. Mặc định, trình duyệt sẽ sử dụng định dạng được nhận dạng đầu tiên.

- Phần nội dung Text giữa các thẻ <video> và </video> sẽ chỉ hiển thị khi chạy trên các trình duyệt không hỗ trợ thẻ <video>.

Thiết lập video tự động chạy

Để video tự động chạy ngay sau khi load xong trình duyệt, bạn hãy sử dụng thuộc tính autoplay. Ví dụ như đoạn code dưới đây:

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Lưu ý: Trong hầu hết các trường hợp, trình duyệt nhân Chromium khoog cho phép tự động phát. Nếu có, thì video luôn bị tắt tiếng khi tự chạy.

Thêm muted sau autoplay để video của bạn luôn tự động phát (nhưng bị tắt tiếng):

<video width="320" height="240" autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>