Thẻ <source> HTML

Định nghĩa và cách sử dụng

<source> Thẻ được sử dụng để chỉ định các yếu tố phương tiện (như <video>,<audio> và <picture>）Để chỉ định nhiều nguồn phương tiện.

<source> Thẻ cho phép bạn chỉ định các tệp video/âm thanh/hình ảnh thay thế, trình duyệt sẽ chọn tệp đầu tiên mà nó hỗ trợ. <source>.

Xem thêm:

HTML Hướng dẫn:Video HTML

HTML Hướng dẫn:Âm thanh HTML

HTML DOM Tài liệu tham khảo:Đối tượng Source

Mô hình

Ví dụ 1

Đây là một trình phát âm thanh có hai tệp nguồn âm thanh. Trình duyệt sẽ chọn tệp đầu tiên mà nó hỗ trợ. <source>:

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

Thử nghiệm trực tiếp

Ví dụ 2

Sử dụng trong <video> <source> Chơi video:

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

Thử nghiệm trực tiếp

Ví dụ 3

Sử dụng trong <picture> <source> Để định nghĩa các hình ảnh khác nhau dựa trên độ rộng của viewport:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Thử nghiệm trực tiếp

Thuộc tính

Thuộc tính Giá trị Mô tả
media Điều tra media Chấp nhận bất kỳ điều tra media hợp lệ nào, thường được định nghĩa trong CSS.
sizes Để chỉ định kích thước hình ảnh cho các bố cục trang khác nhau.
src URL

Để chỉ định URL của tệp phương tiện.

Khi <source> được sử dụng cho <audio> và <video>, thuộc tính này là bắt buộc.
srcset URL

Để chỉ định URL của hình ảnh được sử dụng trong các tình huống khác nhau.

Khi <source> được sử dụng trong <picture>, thuộc tính này là bắt buộc.
type Loại MIME Định nghĩa loại MIME của tài nguyên.

Thuộc tính toàn cục

<source> Thẻ còn hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<source> Thẻ còn hỗ trợ Thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Không có.

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 4.0 10.5