Struct Source 

pub struct Source;

The <source> element - specifies media resources for <picture>, <audio>, and <video>.

Purpose

The <source> element specifies multiple media resources for <picture>, <audio>, or <video> elements. The browser selects the most appropriate source based on media queries, format support, and other conditions. It enables responsive media delivery and format fallbacks.

Content Categories

• None (used only within specific parent elements)

Permitted Content Model

• None (void element)

Common Use Cases

• Providing multiple video formats for cross-browser compatibility
• Offering different audio quality levels or formats
• Specifying image sources for different screen sizes in <picture>
• Delivering modern media formats with legacy fallbacks
• Bandwidth optimization with multiple quality levels

Key Attributes

• src: URL of the media resource (for <audio> and <video>)
• srcset: Image URLs for responsive images (for <picture>)
• type: MIME type of the resource
• media: Media query for when this source applies
• sizes: Image sizes for different viewport widths (for <picture>)
• width: Intrinsic width for image sources
• height: Intrinsic height for image sources

Example

<!-- Video with multiple formats -->
<video controls>
  <source src="/video/movie.webm" type="video/webm">
  <source src="/video/movie.mp4" type="video/mp4">
  Your browser doesn't support the video element.
</video>

<!-- Audio with quality options -->
<audio controls>
  <source src="/audio/music.opus" type="audio/opus">
  <source src="/audio/music.ogg" type="audio/ogg">
  <source src="/audio/music.mp3" type="audio/mpeg">
</audio>

<!-- Responsive images in picture element -->
<picture>
  <source media="(min-width: 1200px)" srcset="/images/xl.jpg">
  <source media="(min-width: 768px)" srcset="/images/lg.jpg">
  <source srcset="/images/sm.jpg">
  <img src="/images/fallback.jpg" alt="Description">
</picture>

<!-- Modern image formats with type hints -->
<picture>
  <source srcset="/images/photo.avif" type="image/avif">
  <source srcset="/images/photo.webp" type="image/webp">
  <img src="/images/photo.jpg" alt="Photo">
</picture>

WHATWG Specification

• 4.8.2 The source element

Trait Implementations

impl HtmlElement for Source

const TAG: &'static str = "source"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = true

Whether this is a void element (self-closing, no children allowed).

impl CanContain<Source> for Audio

impl CanContain<Source> for Picture

impl CanContain<Source> for Video