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ử.
Phần tử <source> | Google Chrome | MS Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Các thuộc tính
Thuộc tính | Giá trị | Mô tả |
---|---|---|
media | media_query | Chấp nhận mọi truy vấn media hợp lệ thường được xác định trong CSS |
sizes | Chỉ định kích thước hình ảnh cho các bố cục trang khác nhau | |
src | URL | Bắt buộc khi <source> được sử dụng trong <audio> và <video> . Chỉ định URL của file media |
srcset | URL | Bắ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 |
type | MIME-type | Chỉ đị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>
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Cách mở camera trên laptop Windows 7/8/10/11
Hôm qua 3 -
Cách dọn dẹp và khôi phục không gian trên ổ C Windows
Hôm qua -
Phần gạch dưới biểu tượng pin trên iPhone có nghĩa gì? Tại sao lại nguy hiểm?
Hôm qua -
Tổng hợp câu hỏi Nhanh như chớp mùa 2
Hôm qua -
Khóa ngoại Foreign Key trong SQL Server
Hôm qua 5 -
Tổng hợp những từ viết tắt trên Facebook thông dụng nhất hiện nay
Hôm qua 1K+ -
Tên nhân vật hay, tên nhân vật ngầu, tên nhân vật kí tự đặc biệt
Hôm qua -
1000+ công thức chế thuốc Minecraft, cách chế thuốc Minecraft
Hôm qua -
Sửa lỗi micro không hoạt động trong Windows 10
Hôm qua 1 -
Căn bậc 2, cách tính căn bậc 2
Hôm qua