Chèn video trong HTML5

Quàng thượng

Cách chèn video vào HTML không khó. Bài viết sẽ hướng dẫn bạn cách chèn video vào website HTML.

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>

Thẻ <video> được hỗ trợ trên các trình duyệt nào?

Thường thẻ video được hỗ trợ cho các trình duyệt với các phiên bản tương ứng như sau:

Chrome 4.0 trở lên
Edge 9.0 trở lên
Firefox 3.5 trở lên
Safari 4.0 trở lên
Opera 10.5 trở lên

Định dạng video HTML

Có ba định dạng video được hỗ trợ trên trình duyệt là: MP4, WebM và Ogg. Trình duyệt hỗ trợ các định dạng khác nhau theo bảng dưới đây:

Trình duyệt	MP4	WebM	Ogg
Edge	Có	Có	Có
Chrome	Có	Có	Có
Firefox	Có	Có	Có
Safari	Có	Có
Opera	Có	Có	Có

Video HTML - Các loại media

File Format	Media Type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

Những câu hỏi thường gặp về cách thêm video vào HTML

Định dạng video nào được hỗ trợ bởi HMTL5?

HTML5 hỗ trợ các định dạng MP4, WebM và Ogg. Bao gồm nhiều định dạng đảm bảo khả năng tương thích rộng hơn với trình duyệt.

Làm thế nào để có thể làm cho video nhúng của mình phản hồi?

Sử dụng CSS để đặt chiều rộng của video thành 100% và điều chỉnh chiều cao cho phù hợp, đảm bảo video có thể thay đổi kích thước theo các kích thước màn hình khác nhau.

Có thể tự động phát video trong HTML không?

Có, bằng cách thêm thuộc tính autoplay vào thẻ <video>. Tuy nhiên, hãy thận trọng, vì việc tự động phát video có thể ảnh hưởng đến trải nghiệm của người dùng.