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
Cũ vẫn chất
-
90+ phím tắt Google Docs cho Windows và Mac
Hôm qua -
Game ‘Khủng long mất mạng’ trên Google Chrome được 3D hóa tuyệt đẹp, mời trải nghiệm
Hôm qua -
Code Kiếm Vương 1 - ADNX Mobile mới nhất
Hôm qua -
Last Name, First Name là gì? Cách điền chúng chính xác nhất
Hôm qua -
Code Mobile Legends mới nhất 12/2024
Hôm qua -
Cách dùng hàm IMPORTRANGE trong Google Sheets
Hôm qua -
Những tấm gương điển hình của tinh thần vượt lên số phận
Hôm qua -
Tổng hợp code Đại Chiến Tam Quốc mới nhất
Hôm qua -
Cách đổi màu phông nền trong Photoshop
Hôm qua -
Cách gán địa chỉ IP tĩnh trong Windows 11, 10, 8, 7, XP hoặc Vista
Hôm qua