STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    HTML - Phần 5: Các Thẻ Hình Ảnh, Video, Audio

    Âm thanh, hình ảnh, video clip làm cho trang web thêm tiện ích, đẹp và sống động, những thành phần này cũng được hỗ trợ bởi HTML thông qua các thẻ <img>, <audio>, <video>.
    26/10/2015
    29/08/2020
    3 phút đọc
    HTML - Phần 5: Các Thẻ Hình Ảnh, Video, Audio

    Thẻ hiển thị hình ảnh <img>

    Trong HTML, hình ảnh được định nghĩa bởi thẻ <img> có cấu trúc như sau:

    <img src="liên kết" alt="nội dung thay thế" >

    Thuộc tính src xác định đường dẫn đến hình ảnh và thuộc tính alt là xác định một đoạn nội dung thay thế khi hình ảnh không được hiển thị do đường dẫn lỗi hoặc tải không được ảnh.

    Các thuộc tính của <img>

    • src: liên kết đến file hình ảnh.
    • alt: nội dung thay thế nếu không tải được ảnh.
    • width: độ rộng của ảnh (px, %).
    • height: độ cao của ảnh (px, %).

    Ví dụ sử dụng width, height

    Hiển thị logo của STDIO Training sử dụng thuộc tính width, height.

    <!DOCTYPE html>
    <html>
     <head></head>
     <body>
       <img
         src="https://resources.stdio.vn/content/article/5ef62da35ef9e26f89a5c78d/resources/res-1598668801-1598668801813.png"
         alt="STDIO Training"
    width="200px"
    height="32px"
       />
     </body>
    </html>

    Hiển thị logo của STDIO Training không có thuộc tính width, height, kích thước do ảnh tự quyết định.

    <!DOCTYPE html>
    <html>
     <head></head>
     <body>
       <img
         src="https://resources.stdio.vn/content/article/5ef62da35ef9e26f89a5c78d/resources/res-1598668801-1598668801813.png"
         alt="STDIO Training"
       />
     </body>
    </html>
    • * Nếu widthheight không tỷ lệ với kích thước thật của ảnh sẽ làm ảnh hiển thị không chính xác.
    • * Thẻ <img> không có thẻ đóng nhưng có thể dùng <img /> theo tiêu chuẩn.

    Thẻ phát âm thanh <audio>

    Trước khi HTML5 ra đời để chơi audio phải sử dụng plug-in thêm vào trình duyệt web như Flash, hiện tại HTML5 hỗ trợ chơi audio thông qua thẻ <audio>.

    <audio controls>
      <source src="liên kết" type="media type">
      Nội dung hiển thị nếu trình duyệt web không hỗ trợ thẻ audio
    </audio>
    

    Các thuộc tính của <audio>

    • controls: công cụ dùng để chơi nhạc như play, pause, volume.
    • autoplay: tự động chơi nhạc sau khi tải xong.

    Trong <audio> có thể có nhiều <source>, hỗ trợ nhiều loại định dạng cho trình duyệt, trình duyệt web sẽ lựa chọn <source> để phát.

    Các thuộc tính của <source>

    Thẻ source chứa thông tin về file nhạc: đường dẫn đến file, và định dạng của file.

    • src: liên kết đến file âm thanh.
    • type: định dạng của file âm thanh.
      • audio/mpeg: định dạng MP3.
      • audio/ogg: định dạng OGG.
      • audio/wav: định dạng WAV.

    Ví dụ phát audio sử dụng thẻ <audio>

    <!DOCTYPE html>
    <html>
     <head></head>
     <body>
       <h3>Sins Salvation gameplay music.</h3>
       <audio controls>
         <source src="https://resources.stdio.vn/content/article/5ef62da35ef9e26f89a5c78d/resources/res-1598673079-1598673079825.mp3" type="audio/mpeg" />
         Trình duyệt web hiện tại không hỗ trợ phát nhạc, hãy thử lại bằng trình
         duyệt web khác.
       </audio>
     </body>
    </html>

    Thẻ trình chiếu phim <video>

    Sử dụng thẻ <video> để trình chiếu video clip với cấu trúc như sau:

    <video controls height="value" width="value">
      <source src="liên kết" type="media type">
      Nội dung hiển thị nếu trình duyệt web không hỗ trợ thẻ video
    </video>

    Các thuộc tính của <video>

    • controls: công cụ dùng để hỗ trợ trình chiếu như play, pause, volume.
    • width: độ rộng hiển thị (px, %).
    • height: độ cao hiển thị (px, %).

    Trong <video> có thể có nhiều <source>, hỗ trợ nhiều loại định dạng cho trình duyệt, trình duyệt web sẽ lựa chọn <source> để chiếu.

    Các thuộc tính của <source>

    Thẻ source chứa thông tin về file video: đường dẫn đến file, và định dạng của file.

    • src: liên kết đến file video.
    • type: định dạng của file video.
      • video/mp4: định dạng MP4.
      • video/webm: định dạng WebM.
      • video/ogg: định dạng OGG.

    Ví dụ trình chiếu video clip sử dụng thẻ <video>

    <!DOCTYPE html>
    <html>
     <head></head>
     <body>
       <h3>Play Video Demo</h3>
       <video controls autoplay height="400" width="600">
         <source src="video_demo.mp4" type="video/mp4" />
         Trình duyệt web hiện tại không hỗ trợ phát nhạc, hãy thử lại bằng trình
         duyệt web khác.
       </video>
     </body>
    </html>

    Phụ lục - Hiển thị video từ Youtube

    Nếu website có nhu cầu liên kết video từ Youtube có thể sử dụng <iframe> để nhúng các clip từ Youtube vào trang web.

    Bài chung series

    0
    HTML Cheat Sheet

    HTML Cheat Sheet

    STDIO Training - Đào tạo lập trình Front-end.

    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích.. Tìm hiểu thêm.

    Đề xuất

    HTML - Phần 4: Các Thẻ Định Dạng Danh Sách
    Các thẻ định dạnh danh sách <ul>, <ol>, <li> trong HTML. Các thẻ danh ...
    HTML - Phần 6: Các Thẻ Input trong HTML
    Các loại thẻ <input> hỗ trợ nhập liệu chuỗi, số, mật khẩu, ... trong ...

    Khám phá

    HTML - Phần 2: Các Thẻ Định Dạng Văn Bản
    Giới thiệu và hướng dẫn sử dụng 1 số thẻ định dạng văn bản HTML.
    HTML - Phần 3: Thẻ Liên Kết trong HTML
    Thẻ liên kết <a href="...">...</a> được xem như là trái tim của 1 trang ...
    HTML - Phần 8: Thẻ Form trong HTML
    Thẻ <form> - "khung nhập liệu" trong HTML điền thông tin ứng dụng trong ...
    HTML - Phần 1: Cơ Bản Về HTML
    Các kiến thức cơ bản về HTML trong thiết kế web và tạo trang web đầu ...
    HTML - Phần 7: Thẻ Table Trong HTML
    Trình bày dữ liệu thống kê theo dòng và cột với thẻ <table>.
    Các Thẻ - Tag Thông Dụng trong HTML
    Liệt kê các loại thẻ (tag) thường dùng trong HTML để trình bày 1 trang ...
    Tìm Hiểu Về WebM
    WebM là một loại định dạng video file mã nguồn mở, royalty-free, được ...
    18/07/2016
    Xử Lý Ảnh Với OpenCV: Các Phép Toán Hình Thái Học
    Giới thiệu những thuật toán cơ sở trong xử lý hình thái học, những thuật ...
    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020