Trong HTML5, bạn có thể nhúng trực tiếp các tệp âm thanh và video vào trang web mà không cần bên thứ ba như YouTube hay SoundCloud. Điều này giúp nội dung của bạn được kiểm soát tốt hơn và trải nghiệm người dùng mượt mà hơn.
1. Nhúng tệp âm thanh với <audio>
Cú pháp cơ bản:
<audio controls>
<source src="ten-file.mp3" type="audio/mpeg">
Trình duyệt của bạn không hỗ trợ âm thanh.
</audio>
Giải thích:
<audio>là thẻ cha chứa âm thanh.controlscho phép hiển thị nút play, pause, âm lượng.<source>chứa đường dẫn và loại định dạng của file.- Dòng văn bản bên dưới là nội dung thay thế nếu trình duyệt không hỗ trợ.
Một số định dạng âm thanh thường dùng:
| Định dạng | Thuộc tính type |
|---|---|
.mp3 | audio/mpeg |
.ogg | audio/ogg |
.wav | audio/wav |
2. Nhúng tệp video với <video>
Cú pháp cơ bản:
<video width="640" height="360" controls>
<source src="video-demo.mp4" type="video/mp4">
Trình duyệt của bạn không hỗ trợ video.
</video>
Giải thích:
<video>là thẻ chính để hiển thị video.widthvàheightlà kích thước khung video.controlshiển thị thanh điều khiển (play, pause, tua, âm lượng).- Có thể thêm nhiều định dạng
<source>để tăng độ tương thích.
Một số định dạng video phổ biến:
| Định dạng | Thuộc tính type |
|---|---|
.mp4 | video/mp4 |
.webm | video/webm |
.ogg | video/ogg |
3. Ví dụ: thêm cả nhạc và video vào cùng một trang
Tạo file media-demo.html với nội dung sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Thêm nhạc và video</title>
</head>
<body>
<h1>Phát nhạc</h1>
<audio controls>
<source src="nhac-nen.mp3" type="audio/mpeg">
Trình duyệt không hỗ trợ định dạng âm thanh.
</audio>
<h1>Phát video</h1>
<video width="640" height="360" controls>
<source src="video-gioi-thieu.mp4" type="video/mp4">
Trình duyệt không hỗ trợ định dạng video.
</video>
</body>
</html>
Lưu ý: bạn cần có file thật đặt đúng tên trong cùng thư mục thì mới chạy được.
4. Thuộc tính bổ sung
| Thuộc tính | Tác dụng |
|---|---|
autoplay | Tự động phát khi tải xong |
loop | Lặp lại khi kết thúc |
muted | Tắt tiếng khi bắt đầu |
preload | Điều khiển việc tải trước (auto, metadata, none) |
Ví dụ:
<audio controls autoplay loop muted>
<source src="nhac.mp3" type="audio/mpeg">
</audio>
5. So sánh nhanh
| Mục | audio | video |
|---|---|---|
| Thẻ dùng | <audio> | <video> |
| Tập tin | .mp3, .wav | .mp4, .webm |
| Có controls | Có | Có |
| Hình ảnh | Không có | Có khung hình |
Ghi nhớ
- HTML5 hỗ trợ phát nhạc và video mà không cần plugin.
- Luôn dùng thuộc tính
controlsđể người dùng có thể điều khiển. - Nên cung cấp nội dung thay thế nếu trình duyệt không hỗ trợ.
- Để phát tự động, cần dùng thêm
autoplaynhưng lưu ý nhiều trình duyệt sẽ chặn âm thanh tự phát nếu không cómuted.
Thảo luận