Struct Video 

pub struct Video;

The <video> element - embeds video content into documents.

Purpose

The <video> element embeds video content in documents. It may contain multiple video sources via <source> elements or use the src attribute. Provides native playback controls, poster images, and comprehensive JavaScript APIs for media control and monitoring.

Content Categories

• Flow Content
• Phrasing Content
• Embedded Content
• Interactive Content
• Palpable Content

Permitted Content Model

• Zero or more <source> elements
• Zero or more <track> elements
• Transparent content (fallback for browsers without video support)
• No media elements among descendants

Common Use Cases

• Embedding tutorial and educational videos
• Product demonstrations and marketing videos
• Video backgrounds for hero sections
• Live streaming and recorded broadcasts
• Video conferencing and communication

Key Attributes

• src: URL of the video file
• controls: Display video controls
• autoplay: Automatically start playback
• loop: Loop the video
• muted: Mute audio by default
• poster: URL of image to show before playback
• preload: Loading strategy (“none”, “metadata”, “auto”)
• width: Display width in CSS pixels
• height: Display height in CSS pixels
• playsinline: Play inline on mobile devices
• crossorigin: CORS settings for video fetching

Example

<!-- Basic video with controls -->
<video src="/videos/tutorial.mp4" controls width="640" height="360">
  Your browser doesn't support the video element.
</video>

<!-- Multiple sources with poster -->
<video controls width="800" height="450" poster="/images/poster.jpg">
  <source src="/videos/movie.webm" type="video/webm">
  <source src="/videos/movie.mp4" type="video/mp4">
  <track src="/captions/en.vtt" kind="subtitles" srclang="en" label="English">
  <p>Your browser doesn't support HTML5 video. <a href="/videos/movie.mp4">Download</a></p>
</video>

<!-- Autoplay muted background video -->
<video autoplay loop muted playsinline class="bg-video">
  <source src="/videos/background.webm" type="video/webm">
  <source src="/videos/background.mp4" type="video/mp4">
</video>

<!-- Video with lazy loading -->
<video controls preload="none" poster="/images/video-thumb.jpg">
  <source src="/videos/demo.mp4" type="video/mp4">
</video>

Accessibility

• Provide captions for deaf and hard-of-hearing users
• Include audio descriptions for blind and low-vision users
• Ensure video controls are keyboard accessible
• Provide transcripts for video content
• Use descriptive poster images
• Avoid autoplay with sound (can be disorienting)
• Ensure sufficient contrast for controls

WHATWG Specification

• 4.8.9 The video element

Trait Implementations

impl HtmlElement for Video

const TAG: &'static str = "video"

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

const VOID: bool = false

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

impl CanContain<Source> for Video

impl CanContain<Track> for Video

impl EmbeddedContent for Video

impl FlowContent for Video

impl InteractiveContent for Video

impl PalpableContent for Video

impl PhrasingContent for Video