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
-
3133 là gì? 3133 là số điện thoại của tổng đài nào? Có phải lừa đảo không?
Hôm qua -
Cách xóa đường kẻ ngang trong Word
Hôm qua -
Cách tắt đang soạn tin nhắn Zalo
Hôm qua -
eQuiz - Bài kiểm tra trắc nghiệm về lập trình C (Phần 1)
Hôm qua -
Cách đổi font chữ mặc định trong Google Docs
Hôm qua -
Mẹo lên level nhanh Blox Fruit, lên cấp nhanh Blox Fruit
Hôm qua -
Cách fix lỗi 0xc000007b trên Windows
Hôm qua 4 -
Cách thêm email vào Facebook trên điện thoại, máy tính
Hôm qua -
200 biệt danh cho người yêu bằng tiếng Anh hay và ngọt ngào
Hôm qua -
11 lựa chọn thay thế tốt nhất cho Canva
Hôm qua