Thẻ HTML <source>

Định nghĩa và cách sử dụng thẻ <source>

Thẻ <source> được sử dụng để chỉ định nhiều tài nguyên media cho các thành phần media, chẳng hạn như <video>, <audio> và <picture>. Ví dụ, một trình phát âm thanh có hai file nguồn. Trình duyệt sẽ chọn <source> đầu tiên mà nó hỗ trợ:

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

Thẻ <source> cho phép bạn chỉ định các file video/âm thanh/hình ảnh thay thế mà trình duyệt có thể chọn, dựa trên sự hỗ trợ của trình duyệt hoặc độ rộng khung nhìn. Trình duyệt sẽ chọn <source> đầu tiên mà nó hỗ trợ.

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử.

Các thuộc tính

Thuộc tính Global

Thẻ <source> cũng hỗ trợ thuộc tính Global trong HTML.

Thuộc tính sự kiện

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

Các ví dụ khác

Sử dụng <source> trong <video> để phát video:

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

Sử dụng <source> trong <picture> để xác định các hình ảnh khác nhau dựa trên chiều rộng khung nhìn:

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>