Thẻ đa phương tiện trong HTML5 – Audio & Video
HTML5 mang lại nhiều cải tiến, đặc biệt là khả năng nhúng âm thanh và video trực tiếp vào trang web mà không cần sử dụng các plugin bên ngoài như Adobe Flash.
Bài học này sẽ hướng dẫn bạn cách sử dụng thẻ <audio> và <video> để nhúng tệp đa phương tiện, cũng như các thuộc tính quan trọng giúp bạn kiểm soát cách các tệp này hiển thị và hoạt động.
1. Thẻ đa phương tiện trong HTML5
Cách nhúng âm thanh với thẻ <audio>
Thẻ <audio> được dùng để nhúng file âm thanh (nhạc, hiệu ứng) trực tiếp vào trang web.
Cú pháp cơ bản:
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Trình duyệt của bạn không hỗ trợ audio.
</audio>
Các thuộc tính quan trọng của <audio>:
| Thuộc tính | Mô tả |
|---|---|
controls |
Hiển thị thanh điều khiển phát nhạc (play, pause, volume). |
autoplay |
Tự động phát khi tải trang (có thể bị chặn bởi trình duyệt). |
loop |
Phát lặp lại. |
muted |
Tắt âm thanh khi phát. |
preload |
Chỉ định tải trước nội dung (auto, metadata, none). |
Ví dụ: Nhúng tệp âm thanh với nhiều định dạng:
<audio controls loop>
<source src="music.mp3" type="audio/mp3">
<source src="music.ogg" type="audio/ogg">
Trình duyệt của bạn không hỗ trợ phát nhạc.
</audio>
Lý do dùng nhiều định dạng: Không phải trình duyệt nào cũng hỗ trợ cùng một định dạng.
Hỗ trợ định dạng âm thanh phổ biến:
| Định dạng | Trình duyệt hỗ trợ |
|---|---|
| MP3 | Chrome, Firefox, Safari, Edge, Opera |
| OGG | Firefox, Chrome, Opera |
| WAV | Chrome, Firefox, Edge |
Cách nhúng video với thẻ <video>
Thẻ <video> cho phép chèn video trực tiếp vào trang web mà không cần plugin.
Cú pháp cơ bản:
<video controls width="600">
<source src="video.mp4" type="video/mp4">
Trình duyệt của bạn không hỗ trợ video.
</video>
Các thuộc tính quan trọng của <video>:
| Thuộc tính | Mô tả |
|---|---|
controls |
Hiển thị thanh điều khiển phát video. |
autoplay |
Tự động phát video khi tải trang. |
loop |
Phát video lặp lại. |
muted |
Tắt âm thanh khi phát video. |
poster |
Hình ảnh đại diện (hiện khi chưa phát video). |
width, height |
Xác định kích thước video. |
Ví dụ: Nhúng video với hình ảnh đại diện và tự động phát:
<video controls autoplay muted poster="thumbnail.jpg" width="800">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Trình duyệt của bạn không hỗ trợ video.
</video>
Hỗ trợ định dạng video phổ biến:
| Định dạng | Trình duyệt hỗ trợ |
|---|---|
| MP4 (H.264) | Chrome, Firefox, Safari, Edge, Opera |
| WebM | Chrome, Firefox, Opera |
| Ogg/Theora | Firefox, Opera |
So sánh thẻ <audio> và <video>
| Tính năng | <audio> |
<video> |
|---|---|---|
| Chức năng | Nhúng và phát nhạc, âm thanh | Nhúng và phát video |
| Các định dạng | MP3, WAV, OGG | MP4, WebM, Ogg/Theora |
| Điều khiển | controls |
controls |
| Tự động phát | autoplay |
autoplay |
| Phát lặp lại | loop |
loop |
| Tắt âm thanh | muted |
muted |
| Hình đại diện | Không hỗ trợ | poster |
2. Thực hành: Tạo trang web có nhúng âm thanh và video
Mã HTML hoàn chỉnh:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Trang Đa Phương Tiện</title>
</head>
<body>
<!-- Phần đầu trang -->
<header>
<h1>Chào mừng đến với trang đa phương tiện</h1>
</header>
<!-- Phần nội dung chính -->
<main>
<!-- Phát âm thanh -->
<section>
<h2>Phát nhạc yêu thích</h2>
<audio controls>
<source src="music.mp3" type="audio/mp3">
Trình duyệt của bạn không hỗ trợ phát nhạc.
</audio>
</section>
<!-- Phát video -->
<section>
<h2>Video giới thiệu</h2>
<video controls width="700" poster="thumbnail.jpg">
<source src="intro.mp4" type="video/mp4">
<source src="intro.webm" type="video/webm">
Trình duyệt của bạn không hỗ trợ phát video.
</video>
</section>
</main>
<!-- Phần chân trang -->
<footer>
<p>© 2025 Website Đa Phương Tiện. Mọi quyền được bảo lưu.</p>
</footer>
</body>
</html>
3. Kết luận
Bằng cách sử dụng thẻ <audio> và <video>, bạn có thể dễ dàng thêm nội dung đa phương tiện vào trang web mà không cần plugin. Các thuộc tính như controls, autoplay, loop, và muted giúp kiểm soát cách phát nhạc/video, nâng cao trải nghiệm người dùng.
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com