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><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ử.

Phần tử
<source>
Google ChromeMS EdgeFirefoxSafariOpera
4.09.03.54.010.5

Các thuộc tính

Thuộc tínhGiá trịMô tả
mediamedia_queryChấp nhận mọi truy vấn media hợp lệ thường được xác định trong CSS
sizesChỉ định kích thước hình ảnh cho các bố cục trang khác nhau
srcURLBắt buộc khi <source> được sử dụng trong <audio><video>. Chỉ định URL của file media
srcsetURLBắt buộc khi <source> được sử dụng trong <picture>. Chỉ định URL của hình ảnh để sử dụng trong các tình huống khác nhau
typeMIME-typeChỉ định loại MIME của tài nguyên

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>
Chủ Nhật, 28/01/2024 10:24
52 👨 65
0 Bình luận
Sắp xếp theo
    ❖ HTML