Bài 42: HTML Multimedia

Đã cập nhật: 1 năm trước

1. Giới thiệu

HTML Multimedia (đa phương tiện trong HTML) bao gồm các thành phần như âm thanh, video, hình ảnh, và nội dung nhúng từ các nguồn bên ngoài, giúp làm phong phú thêm nội dung trang web. HTML cung cấp các thẻ mạnh mẽ và dễ sử dụng để hiển thị và điều khiển các loại nội dung đa phương tiện này trực tiếp trên trang web mà không cần phải sử dụng các plugin bên ngoài như Flash.

Trong bài viết này, chúng ta sẽ tìm hiểu về các thẻ HTML quan trọng để xử lý nội dung đa phương tiện như hình ảnh, âm thanh, video, và các cách nhúng nội dung từ các service bên ngoài như YouTube.

2. Hiển thị hình ảnh với thẻ `<img>`

Thẻ <img> được sử dụng để chèn hình ảnh vào trang web. Hình ảnh có thể được tải từ URL bên ngoài hoặc từ thư mục trong máy chủ của bạn.

Cú pháp cơ bản:

html

<img src="path_to_image.jpg" alt="Mô tả hình ảnh" width="500" height="300">

src: Đường dẫn đến tệp hình ảnh. Có thể là URL hoặc đường dẫn tương đối trên máy chủ.
alt: Văn bản thay thế hiển thị khi hình ảnh không tải được, giúp cải thiện SEO và khả năng truy cập.
width và height: Xác định kích thước của hình ảnh.

Ví dụ:

html

Thử online

<img src="https://codetuthub.com/example/file_JPG_500kB.jpg" alt="Hình ảnh mô tả một chiếc máy tính" width="500" height="300">

3. Nhúng video với thẻ `<video>`

HTML5 cung cấp thẻ <video> để nhúng video vào trang web. Thẻ này cho phép bạn phát video trực tiếp trên trình duyệt mà không cần phải cài đặt plugin bên ngoài.

Cú pháp cơ bản:

html

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

controls: Hiển thị các nút điều khiển video (phát, tạm dừng, tua).
source: Đường dẫn đến tệp video và loại tệp video (type).
width: Độ rộng của video trên trang.
Nội dung bên trong thẻ: Văn bản thay thế sẽ hiển thị nếu trình duyệt không hỗ trợ thẻ <video>.

Ví dụ:

html

Thử online

<video controls width="600">
    <source src="https://codetuthub.com/example/file_MP4_1920_18MG.mp4" type="video/mp4">
    Trình duyệt của bạn không hỗ trợ phát video.
</video>

Bạn có thể cung cấp nhiều định dạng video khác nhau để đảm bảo tính tương thích với tất cả các trình duyệt:

html

Thử online

<video controls width="600">
    <source src="https://codetuthub.com/example/file_MP4_1920_18MG.mp4" type="video/mp4">
    <source src="https://codetuthub.com/example/file_OGG_1920_13_3mg.ogg" type="video/ogg">
    Trình duyệt của bạn không hỗ trợ phát video.
</video>

4. Phát âm thanh với thẻ `<audio>`

Thẻ <audio> trong HTML5 được sử dụng để nhúng âm thanh vào trang web. Tương tự như thẻ <video>, thẻ <audio> cũng có các nút điều khiển âm thanh như phát, tạm dừng, và thay đổi âm lượng.

Cú pháp cơ bản:

html

<audio controls>
    <source src="path_to_audio.mp3" type="audio/mpeg">
    Trình duyệt của bạn không hỗ trợ phát âm thanh.
</audio>

controls: Hiển thị các nút điều khiển cho âm thanh (phát, tạm dừng, âm lượng).
source: Đường dẫn đến tệp âm thanh và định dạng âm thanh.

Ví dụ:

html

Thử online

<audio controls>
    <source src="https://codetuthub.com/example/file_MP3_1MG.mp3" type="audio/mpeg">
    Trình duyệt của bạn không hỗ trợ phát âm thanh.
</audio>

Bạn cũng có thể cung cấp nhiều định dạng âm thanh khác nhau:

html

Thử online

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Trình duyệt của bạn không hỗ trợ phát âm thanh.
</audio>

5. Nhúng nội dung từ các nguồn bên ngoài với thẻ `<iframe>`

<iframe> cho phép bạn nhúng nội dung từ các trang web khác vào trang web của bạn. Nó thường được sử dụng để nhúng video từ các nền tảng như YouTube hoặc Google Maps.

Cú pháp cơ bản:

html

<iframe src="https://www.youtube.com/embed/video_id" width="560" height="315" frameborder="0" allowfullscreen></iframe>

src: Đường dẫn đến nội dung cần nhúng, chẳng hạn như video YouTube.
width và height: Xác định kích thước của iframe.
allowfullscreen: Cho phép phát video ở chế độ toàn màn hình.

Ví dụ nhúng video từ YouTube:

html

Thử online

<iframe src="https://www.youtube.com/embed/abc123" width="560" height="315" frameborder="0" allowfullscreen></iframe>

6. Thêm hình ảnh SVG với thẻ `<svg>`

SVG (Scalable Vector Graphics) là định dạng hình ảnh vẽ bằng vector, cho phép bạn tạo và hiển thị đồ họa mà không mất độ phân giải khi phóng to. Thẻ <svg> giúp nhúng hình ảnh vector trực tiếp vào HTML.

Cú pháp cơ bản:

html

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

<circle>: Tạo một hình tròn trong SVG. Các thuộc tính cx và cy xác định tọa độ tâm của hình tròn, r xác định bán kính.

Ví dụ:

html

Thử online

<svg width="200" height="200">
    <circle cx="100" cy="100" r="80" stroke="black" stroke-width="4" fill="yellow" />
</svg>

7. Nhúng các tệp PDF và nội dung khác với `<embed>`

Thẻ <embed> được sử dụng để nhúng các nội dung như tệp PDF hoặc các tệp phương tiện khác trực tiếp vào trang web.

Cú pháp cơ bản:

html

<embed src="path_to_pdf.pdf" width="600" height="500" type="application/pdf">

src: Đường dẫn đến tệp mà bạn muốn nhúng.
width và height: Kích thước của khung nhúng.

Ví dụ nhúng tệp PDF:

html

Thử online

<embed src="https://codetuthub.com/example/file_PDF.pdf" width="600" height="500" type="application/pdf">

8. Điều khiển các nội dung đa phương tiện với JavaScript

Bạn có thể điều khiển video và âm thanh bằng JavaScript để thêm tính tương tác vào nội dung đa phương tiện. Dưới đây là ví dụ điều khiển video với JavaScript:

Cú pháp:

html

<video id="myVideo" width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

<button onclick="playVideo()">Phát</button>
<button onclick="pauseVideo()">Tạm dừng</button>

<script>
function playVideo() {
    document.getElementById("myVideo").play();
}

function pauseVideo() {
    document.getElementById("myVideo").pause();
}
</script>

play(): Bắt đầu phát video.
pause(): Tạm dừng video.

9. Ví dụ sử dụng HTML Multimedia

Dưới đây là ví dụ hoàn chỉnh sử dụng các thành phần đa phương tiện trong một trang web:

"<!DOCTYPE html>\n<html lang=\"vi\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>V\u00ed D\u1ee5 HTML Multimedia<\/title>\n<\/head>\n<body>\n\n<h1>Trang \u0110a Ph\u01b0\u01a1ng Ti\u1ec7n<\/h1>\n\n<h2>H\u00ecnh \u1ea3nh<\/h2>\n<img src=\"https:\/\/codetuthub.com\/example\/file_JPG_100kB.jpg\" alt=\"H\u00ecnh \u1ea3nh m\u00f4 t\u1ea3\" width=\"500\">\n\n<h2>Video<\/h2>\n<video controls width=\"600\">\n    <source src=\"https:\/\/codetuthub.com\/example\/file_MP4_1920_18MG.mp4\" type=\"video\/mp4\">\n    Tr\u00ecnh duy\u1ec7t c\u1ee7a b\u1ea1n kh\u00f4ng h\u1ed7 tr\u1ee3 ph\u00e1t video.\n<\/video>\n\n<h2>\u00c2m thanh<\/h2>\n<audio controls>\n    <source src=\"https:\/\/codetuthub.com\/example\/file_MP3_1MG.mp3\" type=\"audio\/mpeg\">\n    Tr\u00ecnh duy\u1ec7t c\u1ee7a b\u1ea1n kh\u00f4ng h\u1ed7 tr\u1ee3 ph\u00e1t \u00e2m thanh.\n<\/audio>\n\n<h2>Nh\u00fang video YouTube<\/h2>\n<iframe src=\"https:\/\/www.youtube.com\/embed\/ABRSGjT0oS4\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen><\/iframe>\n\n<h2>T\u00e0i li\u1ec7u PDF<\/h2>\n<embed src=\"https:\/\/codetuthub.com\/example\/file_PDF.pdf\" width=\"600\" height=\"500\" type=\"application\/pdf\">\n\n<\/body>\n<\/html>"

html

Thử online

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ví Dụ HTML Multimedia</title>
</head>
<body>

<h1>Trang Đa Phương Tiện</h1>

<h2>Hình ảnh</h2>
<img src="https://codetuthub.com/example/file_JPG_100kB.jpg" alt="Hình ảnh mô tả" width="500">

<h2>Video</h2>
<video controls width="600">
    <source src="https://codetuthub.com/example/file_MP4_1920_18MG.mp4" type="video/mp4">
    Trình duyệt của bạn không hỗ trợ phát video.
</video>

<h2>Âm thanh</h2>
<audio controls>
    <source src="https://codetuthub.com/example/file_MP3_1MG.mp3" type="audio/mpeg">
    Trình duyệt của bạn không hỗ trợ phát âm thanh.
</audio>

<h2>Nhúng video YouTube</h2>
<iframe src="https://www.youtube.com/embed/ABRSGjT0oS4" width="560" height="315" frameborder="0" allowfullscreen></iframe>

<h2>Tài liệu PDF</h2>
<embed src="https://codetuthub.com/example/file_PDF.pdf" width="600" height="500" type="application/pdf">

</body>
</html>

10. Kết luận

HTML Multimedia mang đến nhiều cách thức để tích hợp hình ảnh, video, âm thanh, và nội dung đa phương tiện khác trực tiếp vào trang web của bạn. Với các thẻ như <img>, <video>, <audio>, và <iframe>, bạn có thể dễ dàng làm phong phú nội dung của mình, đồng thời cung cấp trải nghiệm người dùng đa dạng và sống động hơn. Hãy sử dụng các công cụ này để tạo nên trang web hiện đại và hấp dẫn!

← Bài 41: HTML Input Attributes

HTML Audio →

Tác giả

Tôi là Toàn Nguyễn, một lập trình viên web fullstack với hơn 10 năm kinh nghiệm trong việc thiết kế và phát triển các hệ thống web và ứng dụng. Chuyên về các công nghệ hiện đại như Laravel, React, Vue.js, và Node.js,... đồng thời có đam mê chia sẻ kiến thức qua các bài viết, khóa học và dự án mã nguồn mở. Tôi muốn giúp cộng đồng lập trình phát triển mạnh mẽ hơn bằng cách cung cấp những hướng dẫn chi tiết, dễ hiểu và thực tế thông qua các chuỗi bài viết trên codetuthub.com.

Cảm ơn bạn đã dành thời gian đọc bài viết, và rất mong nhận được ý kiến đóng góp để nội dung ngày càng hoàn thiện hơn. Bạn có thể kết nối với tôi qua LinkedIn, Facebook. hoặc để lại comment bên dưới!🌟

Like1