Nhúng Video HTML: Hướng Dẫn Bước Để Bước

Bạn có thể nhúng video vào tài liệu HTML bằng ba phương pháp: sử dụng thẻ <video>, <object> và <embed>. Mỗi cách hoạt động khác nhau, nhưng đều dùng thuộc tính src để trỏ đến URL của video.

Khi xây dựng trang web, bạn có thể muốn nhúng video vào nội dung. Ví dụ: viết hướng dẫn nấu ăn kèm video minh họa.

Có nhiều cách nhúng video trong HTML. Hướng dẫn này trình bày ba phương pháp phổ biến.

Thẻ <video>

HTML5 cung cấp phần tử <video> để nhúng video trực tiếp. Mặc dù còn mới, thẻ này đã được hỗ trợ bởi hầu hết trình duyệt hiện đại.

Phần tử <video> nhận hai tham số chính: nguồn video (src) và bộ điều khiển (controls). Cú pháp cơ bản:

<video controls="controls" src="videos/ourVideo.mp4"> Trình duyệt này không hỗ trợ phần tử video. </video>

Trong ví dụ, thuộc tính src trỏ đến file videos/ourVideo.mp4. Thuộc tính controls hiển thị bộ điều khiển mặc định (play, pause, volume...). Văn bản bên trong thẻ sẽ hiển thị nếu video không tải được.

Để cung cấp nhiều định dạng nguồn dự phòng, dùng thẻ <source> bên trong:

<video controls="controls">
  <source src="videos/ourVideo.mp4" type="video/mp4">
  <source src="videos/ourSecondVideo.webm" type="video/webm">
  Trình duyệt này không hỗ trợ phần tử video.
</video>

Bạn có thể liệt kê nhiều định dạng (MP4, WebM, Ogg) để tăng khả năng tương thích.

Thẻ <embed>

Phần tử <embed> cũng cho phép nhúng video và đa phương tiện. Ví dụ nhúng video Flash:

<embed src="videos/ourVideo.swf" width="600px" height="400px">

Thuộc tính width và height xác định kích thước trình phát. Tuy nhiên, Flash đã ngừng được hỗ trợ bởi hầu hết trình duyệt hiện nay, do đó phương pháp này không còn khuyến khích.

Thẻ <object>

Thẻ <object> có thể nhúng nhiều loại媒体: video HTML5, audio, Flash, PDF. Ví dụ nhúng video MP4:

<object src="videos/ourVideo.mp4" width="600px" height="400px"></object>

Tương tự <embed>, việc dùng <object> cho Flash cũng không còn phù hợp. Nên ưu tiên <video> hoặc kết hợp cả hai để đảm bảo tương thích.

Kết Luận

HTML cung cấp ba thẻ chính để nhúng video: <video>, <object>, <embed>. Hiện nay, <video> là lựa chọn chuẩn, hiện đại và được khuyến nghị nhất. Bạn đã sẵn sàng nhúng video vào bất kỳ trang web nào!