Khóa học IT HTML Cơ bản 014_Đa phương tiện và Nội dung nhúng

Đa phương tiện và Nội dung nhúng Sử dụng thẻ âm thanh và video trong HTML5 Ứng dụng nội dung nhúng, như bản đồ, trang web nhúng, v.v.

Hình ảnh

Hình ảnh là một loại phương tiện rất quan trọng, có thể nâng cao trải nghiệm người dùng, làm cho việc truyền tải thông tin trực quan và sinh động hơn. Trong HTML, chúng ta sử dụng thẻ <img> để chèn hình ảnh. Thẻ <img> là thẻ rỗng tự đóng, nghĩa là nó không có thẻ đóng. Địa chỉ hình ảnh được chỉ định thông qua thuộc tính src (source) của thẻ <img>.

Ví dụ:

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="Mô tả hình ảnh">

Hiệu ứng:

Phần tử hình ảnh cũng có thể chứa các thuộc tính sau:

• width: Chỉ định chiều rộng của hình ảnh.
• height: Chỉ định chiều cao của hình ảnh.
• align: Chỉ định căn chỉnh của hình ảnh.
• border: Chỉ định đường viền của hình ảnh.
• hspace: Chỉ định khoảng cách ngang giữa hình ảnh và các phần tử xung quanh.
• vspace: Chỉ định khoảng cách dọc giữa hình ảnh và các phần tử xung quanh.
• ismap: Chỉ định hình ảnh có phải là hình ảnh bản đồ hay không.

Đặt kích thước hình ảnh

Chúng ta có thể đặt chiều rộng và chiều cao của hình ảnh thông qua thuộc tính width và height của thẻ <img>. Giá trị của hai thuộc tính này có thể là giá trị pixel cụ thể hoặc phần trăm.

Ví dụ:

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="Mô tả hình ảnh" width="100" height="100" align="center" border="1">

Hiệu ứng:

Đặt văn bản thay thế

Văn bản thay thế (alt text) được sử dụng để hiển thị khi hình ảnh không thể tải, và cũng được trình đọc màn hình sử dụng để đọc nội dung của hình ảnh, giúp người khiếm thị hiểu hình ảnh. Chúng ta đặt văn bản thay thế thông qua thuộc tính alt của thẻ <img>.

Ví dụ:

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar1.png" alt="Văn bản này hiển thị khi không tìm thấy hình ảnh">

Hiệu ứng:

Liên kết hình ảnh

Hình ảnh cũng có thể được sử dụng làm siêu liên kết. Chúng ta chỉ cần đặt thẻ <img> bên trong thẻ <a> để tạo liên kết hình ảnh.

Ví dụ:

1
<a href="https://www.zhaojian.net/">
2
  <img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="Mô tả hình ảnh" width="100" height="100" align="center" border="5">
3
</a>

Hiệu ứng:

[!Tóm tắt]

• Sử dụng thuộc tính width và height để đặt chiều rộng và chiều cao của hình ảnh. Giá trị của hai thuộc tính này có thể là giá trị pixel cụ thể hoặc phần trăm.
• Nếu bạn đặt cả chiều rộng và chiều cao của hình ảnh, và tỷ lệ của hai giá trị này không khớp với tỷ lệ gốc của hình ảnh, hình ảnh có thể bị kéo giãn hoặc nén, gây ra biến dạng.
• Nếu liên kết hình ảnh có đường viền, đường viền mặc định có cùng màu với siêu liên kết.

Video

Phần tử video HTML được sử dụng để nhúng video vào trang web. Thẻ cho phần tử video là <video>.

Ví dụ:

1
<video src="https://www.zhaojian.net/images/mp4.mp4" controls>
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.ogg" type="video/ogg">
4
</video>

Hiệu ứng:

Phần tử video cũng có thể chứa các thuộc tính sau:

• width: Chỉ định chiều rộng của video.
• height: Chỉ định chiều cao của video.
• poster: Chỉ định khung poster của video.
• autoplay: Chỉ định video có tự động phát khi tải hay không.
• loop: Chỉ định video có phát lặp hay không.
• muted: Chỉ định video có tắt tiếng hay không.
• preload: Chỉ định video có được tải trước khi tải hay không.

Ví dụ:

1
<video src="https://www.zhaojian.net/images/mp4.mp4" controls width="400" height="300" poster="https://www.zhaojian.net/images/zhaojian-avatar.png" autoplay loop muted preload="auto">
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.ogg" type="video/ogg">
4
</video>

Ví dụ này chứa một phần tử video. URL tệp video được đặt thành mp4.mp4, chiều rộng được đặt thành 400 pixel, chiều cao được đặt thành 300 pixel, khung poster được đặt thành zhaojian-avatar.png, tự động phát được đặt thành true, phát lặp được đặt thành true, tắt tiếng được đặt thành true, và tải trước được đặt thành auto.

Hiệu ứng:

Một giải pháp video HTML rất toàn diện (Không khuyến nghị)

Ví dụ sau sử dụng 4 định dạng video khác nhau. Phần tử <video> HTML5 sẽ cố gắng phát video ở một trong các định dạng mp4, ogg hoặc webm. Nếu tất cả đều thất bại, nó sẽ quay lại phần tử <embed>.

Ví dụ:

1
<video width="320" height="240" controls>
2
  <source src="video.mp4" type="video/mp4">
3
  <source src="video.ogg" type="video/ogg">
4
  <source src="video.webm" type="video/webm">
5
  <object data="video.mp4" width="320" height="240">
6
    <embed src="video.swf" width="320" height="240">
7
  </object>
8
</video>

[!Tóm tắt]

• Phần tử <source> cung cấp tùy chọn dự phòng. Nếu trình duyệt không hỗ trợ định dạng đó, nó sẽ cố gắng phát tệp video được chỉ định bởi phần tử <source> thứ hai.

Âm thanh

Phần tử <audio> trong HTML được sử dụng để nhúng nội dung âm thanh vào trang web.

Ví dụ:

1
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls>
2
</audio>

Hiệu ứng:

Phần tử âm thanh cũng có thể chứa các thuộc tính sau:

• controls: Chỉ định có hiển thị điều khiển âm thanh hay không, giá trị mặc định là true.
• autoplay: Chỉ định âm thanh có tự động phát khi tải hay không.
• loop: Chỉ định âm thanh có phát lặp hay không.
• muted: Chỉ định âm thanh có tắt tiếng hay không.
• preload: Chỉ định âm thanh có được tải trước khi tải hay không.

Ví dụ:

1
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls autoplay loop muted preload="auto">
2
</audio>

Ví dụ này chứa một phần tử <audio>. URL tệp âm thanh được đặt thành mp3.mp3, điều khiển được đặt thành true, tự động phát được đặt thành true, phát lặp được đặt thành true, tắt tiếng được đặt thành true, và tải trước được đặt thành auto.

Hiệu ứng:

Phần tử embed

Phần tử embed được giới thiệu trong HTML 4.01. Nó có thể nhúng bất kỳ loại tài nguyên nào, bao gồm video, âm thanh, hình ảnh, Flash, v.v. Phần tử embed yêu cầu trình duyệt hỗ trợ các plugin cụ thể để hiển thị.

Ví dụ:

1
<embed src="URL tài nguyên" type="Loại tài nguyên">

[!Tóm tắt]

• HTML5 đã giới thiệu các phần tử <video> và <audio> để thay thế phần tử <embed>.
• Phần tử embed có thể nhúng bất kỳ loại tài nguyên nào, trong khi các phần tử <video> và <audio> chỉ có thể nhúng tài nguyên video và âm thanh.
• Phần tử embed yêu cầu trình duyệt hỗ trợ các plugin cụ thể để hiển thị, trong khi các phần tử <video> và <audio> thì không.
• Phần tử <embed> vẫn có thể được sử dụng, nhưng không còn được khuyến nghị.

Phần tử object

Phần tử object được giới thiệu trong HTML 4.01. Nó có thể nhúng bất kỳ loại tài nguyên nào, bao gồm video, âm thanh, hình ảnh, Flash, v.v. Phần tử object sử dụng các phần tử <param> để chỉ định thuộc tính tài nguyên, như chiều rộng, chiều cao, màu nền của tài nguyên, v.v.

Ví dụ:

1
<object data="URL tài nguyên" type="Loại tài nguyên">
2
  <param name="Tên thuộc tính" value="Giá trị thuộc tính">
3
  ...
4
</object>

Sự khác biệt cụ thể giữa các phần tử object và embed:

[!Tóm tắt]

• Nếu bạn cần nhúng bất kỳ loại tài nguyên nào và trình duyệt hỗ trợ các plugin cụ thể, bạn có thể sử dụng phần tử object.
• Nếu bạn chỉ cần nhúng các loại tài nguyên cụ thể và không cần trình duyệt hỗ trợ các plugin cụ thể, bạn có thể sử dụng phần tử embed.
• Nếu bạn chỉ cần nhúng tài nguyên video hoặc âm thanh, nên sử dụng các phần tử <video> hoặc <audio>.
• Các phần tử <video> và <audio> không yêu cầu trình duyệt hỗ trợ các plugin cụ thể và cung cấp chức năng phong phú hơn.

Khung

Phần tử <iframe> là thẻ trong HTML được sử dụng để lồng một tài liệu vào tài liệu khác. Nó cho phép nhúng một tài liệu vào tài liệu khác và hiển thị nội dung của tài liệu được lồng. Điều này thường được sử dụng để nhúng các trang web khác, video, bản đồ và nội dung khác.

Phần tử <iframe> có các thuộc tính sau:

• Thuộc tính src định nghĩa URL của trang web hoặc tài liệu cần nhúng.
• Thuộc tính width định nghĩa chiều rộng của phần tử <iframe>.
• Thuộc tính height định nghĩa chiều cao của phần tử <iframe>.
• Thuộc tính frameborder định nghĩa đường viền của phần tử <iframe> có hiển thị hay không.
• Thuộc tính border định nghĩa độ rộng đường viền của phần tử <iframe>.
• Thuộc tính framespacing định nghĩa khoảng cách giữa phần tử <iframe> và nội dung xung quanh.
• Thuộc tính marginwidth định nghĩa lề trái và phải của phần tử <iframe>.
• Thuộc tính marginheight định nghĩa lề trên và dưới của phần tử <iframe>.
• Thuộc tính scrolling định nghĩa phần tử <iframe> có cho phép cuộn hay không.
• Thuộc tính name định nghĩa tên của phần tử <iframe>.
• Thuộc tính id định nghĩa ID của phần tử <iframe>.
• Thuộc tính class định nghĩa class của phần tử <iframe>.

Ví dụ:

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <title>Phần tử HTML iframe</title>
5
</head>
6
<body>
7
  <iframe src="https://www.zhaojian.net">
8
    <p>Đây là một iframe hiển thị nội dung từ trang web zhaojian.net.</p>
9
  </iframe>
10
</body>
11
</html>

Hiệu ứng: