Thẻ HTML <source>
Thí dụ
Một trình phát âm thanh với hai tệp 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">
Your browser does not support the audio element.
</audio>
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thẻ <source>được sử dụng để chỉ định nhiều tài nguyên phương tiện cho các phần tử phương tiện, chẳng hạn như
<video> , <audio> và <picture> .
Thẻ <source>cho phép bạn chỉ định các tệp 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 chiều rộng khung nhìn. Trình duyệt sẽ chọn cái đầu tiên <source>
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ử.
| Element | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Thuộc tính
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Accepts any valid media query that would normally be defined in a CSS |
| sizes | Specifies image sizes for different page layouts | |
| src | URL | Required when <source> is used in <audio> and <video>. Specifies the URL of the media file |
| srcset | URL | Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations |
| type | MIME-type | Specifies the MIME-type of the resource |
Thuộc tính toàn cầu
Thẻ <source>cũng hỗ trợ Thuộc tính chung 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
Thí dụ
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">
Your browser does not support the video tag.
</video>
Thí dụ
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>
Các trang liên quan
Hướng dẫn HTML: Video HTML
Hướng dẫn HTML: HTML Audio
Tham chiếu HTML DOM: Đối tượng nguồn
Cài đặt CSS mặc định
Không có.