WORK-018
ID:WORK-018Status:pending

Build video Rune

Priority:mediumComplexity:unknownSource:SPEC-008
claude/file-naming-convention-LJdwR View source

Relationships

Implements 1
Branches 3
claude/file-naming-convention-LJdwR current pending
main pendingchangeset-release/main pendingclaude/align-sidenav-styling-4MuxV pending
History 1
  1. f2b3512
    Created (pending)by Claude
    Add {ID}-{slug}.md filename convention + migrate filenames subcommand

Summary

Self-hosted video player with poster image, captions, subtitles, and responsive sizing. For video that you host yourself — use embed for YouTube/Vimeo. Schema.org: VideoObject.

Attributes

NameTypeDefaultRequiredDescription
srcString—YesVideo file URL
posterString—NoPoster/thumbnail image URL
captionsString—NoWebVTT captions file URL
subtitlesString—NoWebVTT subtitles file URL
aspectString'16:9'NoAspect ratio: 16:9, 4:3, 1:1, 9:16 (vertical)
autoplayBooleanfalseNoAutoplay (muted)
loopBooleanfalseNoLoop playback
titleString—NoVideo title
durationString—NoISO 8601 duration

Content Model

  • Paragraph → video description/caption
  • Self-closing is common: {% video src="/video.mp4" poster="/thumb.jpg" /%}

Transform Output

  • typeof: Video
  • Tag: <figure>
  • Properties: src, poster, captions, subtitles, aspect, autoplay, loop, title, duration
  • Refs: player (video element), caption (figcaption)

Implementation Tasks

  1. Create schema in runes/media/src/tags/video.ts
  2. Add RuneConfig entry in runes/media/src/config.ts
  3. Write CSS in packages/lumina/styles/runes/video.css
  4. Import CSS in packages/lumina/index.css
  5. Implement web component (rf-video) for play controls, caption track loading, responsive sizing — follows Diagram/Sandbox/Map pattern
  6. Add SEO extractor for VideoObject
  7. Write tests in runes/media/test/tags/video.test.ts
  8. Create inspector fixture

Dependencies

None — standalone web component.