Sakala Code
1 year ago
sakalacode
#html
HTML source tag
HTML <source> tag is used to specify multiple media resources for elements like <audio>, <video>, and <picture>. It allows the browser to choose the best media resource based on the user's device and browser capabilities. This is particularly useful for providing different formats of a media file or images for responsive designs.
HTML source tag
With <video> and <audio> Elements:
The Select best media format.
With <picture> Element:
Allows for responsive images, where different images are displayed based on the viewport size or device.
HTML source tag Syntax
<source src="URL" type="MIME_type">
HTML source tag <video> Element
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Source Tag with Video</title> </head> <body> <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> </video> </body> </html>
HTML source tag <audio> Element
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Source Tag with Audio</title> </head> <body> <audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> </audio> </body> </html>
HTML source tag <picture> Element
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Source Tag with Picture</title> </head> <body> <picture> <source srcset="image-large.jpg" media="(min-width: 800px)"> <source srcset="image-small.jpg" media="(max-width: 799px)"> <img src="image-small.jpg" alt="A responsive image"> </picture> </body> </html>
