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
![❖](https://st.quantrimang.com/photos/avatars/default.png)
![❖](https://st.quantrimang.com/photos/image/icon/hoc-HTML-5-size-24x24-znd.png)
Cũ vẫn chất
-
Quay màn hình máy tính bằng OBS Studio, cách ghi màn hình laptop trên OBS
2 ngày -
Cách viết chữ màu Liên Quân Mobile
Hôm qua 2 -
Những status cảm động níu kéo người yêu cũ
2 ngày -
Stt cho những đêm tâm trạng không ngủ được
Hôm qua -
Hình nền mở khóa điện thoại hài hước, hình nền mở khóa troll bá đạo
Hôm qua -
11 thủ thuật mở Local Group Policy Editor trên Windows
Hôm qua -
Code Hello Cafe VNG mới nhất và cách nhập code
2 ngày -
Hướng dẫn chia nhỏ file nén bằng WinRAR
2 ngày -
Thủ thuật gỡ bỏ Microsoft Edge trên Windows 10
Hôm qua -
Reset rank Liên Quân mùa 27
2 ngày