Articles
Giới thiệu về HTML
Các thẻ liên quan đến phương tiện truyền thông

Các thẻ liên quan đến phương tiện truyền thông

Bài viết này giải thích các thẻ liên quan đến phương tiện truyền thông.

Giải thích cách mô tả hình ảnh, video, âm thanh, v.v. trong HTML, cũng như các phần tử có thể thu gọn và khung nội tuyến.

YouTube Video

Các thẻ liên quan đến phương tiện truyền thông

Thẻ <img>

Description of the image 
1<img src="/images/image.jpg" alt="Description of the image" width="200">
  • Thẻ <img> được sử dụng để nhúng hình ảnh. Thuộc tính src chỉ định đường dẫn hình ảnh, và thuộc tính alt cung cấp mô tả khi hình ảnh không thể hiển thị.

Thẻ <figure> và <figcaption>

A beautiful scenery
A beautiful scenery
1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>
  • Thẻ <figure> nhóm nội dung đa phương tiện như hình ảnh hoặc minh họa cùng với chú thích bằng thẻ <figcaption>.

Thẻ <picture>

Responsive image 
1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

  • Thẻ <picture> được sử dụng để hỗ trợ hình ảnh đáp ứng, cho phép chọn hình ảnh phù hợp dựa trên các điều kiện hiển thị khác nhau.

  • Thuộc tính media chỉ định các điều kiện theo cùng định dạng như các truy vấn phương tiện của CSS.

    • Bạn có thể chỉ định các điều kiện như chiều rộng tối thiểu (min-width), chiều rộng tối đa (max-width), hoặc hướng màn hình (orientation).

  • Trong ví dụ này, các hình ảnh sau sẽ được hiển thị tùy thuộc vào chiều rộng màn hình.

    • Nếu chiều rộng màn hình là 800px hoặc lớn hơn, large.jpg sẽ được hiển thị.
    • Nếu chiều rộng màn hình từ 400px trở lên nhưng nhỏ hơn 800px, medium.jpg sẽ được hiển thị.
    • Nếu chiều rộng màn hình nhỏ hơn 400px, small.jpg (hình ảnh trong thẻ <img>) sẽ được hiển thị.

Thẻ <canvas> 

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>
  • Thẻ <canvas> cung cấp một vùng để có thể vẽ đồ họa động bằng JavaScript.

Thẻ <map>

Example Map Area 1 
1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>
  • Thẻ <map> được sử dụng để định nghĩa một bản đồ hình ảnh. Các khu vực có thể nhấp trong bản đồ được định nghĩa bằng thẻ <area>. Điều này cho phép các phần cụ thể của hình ảnh có thể được nhấp để dẫn đến một liên kết.
  • Chỉ định tên của phần tử bản đồ liên kết (thẻ <map>) trong thuộc tính usemap của thẻ <img>, được thêm dấu # phía trước.
  • Bằng cách chỉ định hợp lý thuộc tính alt của thẻ <area>, bạn có thể cải thiện khả năng truy cập cho người khiếm thị.

Thẻ <embed> 

1<embed src="movie.mp4" width="300" height="200">
  • Thẻ <embed> được sử dụng để nhúng nội dung bên ngoài như PDF, video, hoặc âm thanh.

Thẻ <video> 

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>
  • Thẻ <video> được sử dụng để nhúng nội dung video. Bạn có thể chỉ định nhiều định dạng bằng cách sử dụng thẻ <source>.
1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>
  • Thuộc tính preload cho phép bạn chỉ định mức độ video cần tải trước bởi trình duyệt trước khi phát lại bắt đầu.
    • auto yêu cầu trình duyệt tải trước toàn bộ phương tiện. Điều này có thể giảm thời gian trễ khi bắt đầu phát lại, nhưng dữ liệu có thể vẫn được tải xuống ngay cả khi người dùng không phát phương tiện.
    • metadata chỉ tải siêu dữ liệu của phương tiện (ví dụ: thời lượng, thông tin track). Dữ liệu phương tiện thực tế không được tải cho đến khi người dùng bắt đầu phát. Điều này phù hợp khi bạn cần thông tin tổng quan về phương tiện.
    • none không tải trước tệp phương tiện. Phương tiện không tải tài nguyên cho đến khi phát lại bắt đầu. Điều này phù hợp khi bạn muốn giảm thiểu sử dụng dữ liệu.

Thẻ <audio> 

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>
  • Thẻ <audio> được sử dụng để nhúng nội dung âm thanh. Thẻ <source> hỗ trợ nhiều định dạng.
  • Giống như thẻ <video>, thuộc tính preload có thể được sử dụng để chỉ định mức độ âm thanh cần tải trước khi phát lại bắt đầu.

Thẻ <track> 

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>
  • Thẻ <track> được sử dụng để chỉ định các track văn bản như phụ đề và chú thích. Nó có thể được sử dụng trong các thẻ <audio> hoặc <video>.
  • Thuộc tính kind cho phép bạn chỉ định mục đích của track (ví dụ: phụ đề, chú thích, chương, v.v.). Bạn có thể chỉ định các giá trị sau.
    • subtitles cung cấp phụ đề để dịch nội dung video hoặc âm thanh hoặc giúp người xem dễ hiểu hơn. Mục đích chính của nó là dịch trực tiếp âm thanh.
    • captions cung cấp thêm thông tin như âm nhạc và hiệu ứng âm thanh cho người khiếm thính hoặc bị mất thính lực, ngoài phần âm thanh.
    • descriptions là các track mô tả nội dung hình ảnh của video, chẳng hạn như hành động và phong cảnh, dành cho người khiếm thị.
    • chapters cung cấp dấu mốc chương (tiêu đề chương) để chỉ ra các điểm cụ thể trong video.
    • metadata cung cấp thông tin bổ sung để phân tích hoặc xử lý phương tiện nhưng không được hiển thị cho người dùng.

Thẻ <iframe> 

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>
  • Thẻ <iframe> được sử dụng để nhúng các trang HTML khác hoặc nội dung bên ngoài (chẳng hạn như trang web, video, hoặc tài liệu) vào trang hiện tại. Nó thường được sử dụng để nhúng video YouTube vào một trang.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các thẻ liên quan đến bảngThẻ liên quan đến biểu mẫu