Media Layers
Media layers display video, images, audio, and animations. Use $.media() for auto-detection (preferred), or specific constructors for fine control.
Constructors
| Constructor | Content Type |
|---|---|
$.media({ ... }) | Auto-detect — preferred way |
$.video({ ... }) | Video + optional audio |
$.image({ ... }) | Static content (bitmap or vector) |
$.audio({ ... }) | Audio only (not visible) |
$.animation({ ... }) | SVG or SMIL documents |
See also: Layers Overview for common attributes
shared by all layers.
Media-Specific Attributes
href (required)
URI of the content source. Can be local ('media/img.png')
or remote ('http://server/path').
mediaFit
Value Behavior 'fill'Stretch to fill — may alter aspect ratio 'meet'Scale uniformly to fit (may leave empty space). Default 'slice'Scale uniformly to cover (may crop). Firmware 3.0+
mediaAlign
Alignment when aspect ratios don't match. Values: 'topLeft', 'topMid', 'topRight', 'midLeft', 'center' (default), 'midRight', 'bottomLeft', 'bottomMid', 'bottomRight'
layerFit
Adapt layer dimensions to media's aspect ratio: 'horizontal', 'vertical', 'both', 'none' (default).
Examples
Full Screen Video
$(function() {
$('svg').add(
$.video({ href: 'clip.avi', id: 'vid1'})
);
});
Looping Video at Quarter Size
$(function() {
$('svg').add(
$.video({
href: 'clip.avi',
repeatCount: 'indefinite',
width: '50%', height: '50%',
top: '25%', left: '25%'})
);
});
Image with Frame Decoration
$(function() {
$('svg').add(
$.image({
href: 'portrait.jpg',
frame: { frameColor: 'white'},
layerFit: 'both',
width: '50%', height: '50%'})
);
});
Media with Fade Effects
$(function() {
$.media({ href: 'images/1.jpg', dur: 5 })
.fadeIn()
.fadeOut()
.addTo('svg');
});
Important: Videos do NOT loop by default — use repeatDur: 'indefinite'. Never use dur="auto" for video.
Related Pages
- Layers Overview — common attributes (position,
size, timing)
- Frame Decoration — borders, backgrounds,
shadows
- Transitions & Effects — appear/disappear
animations
- Playlists & Slideshows — sequential
media playback