JSignage media layers

This page is related to jSignage layers.

Description

Media layers display external content specified by a source URI, which can be a local file (e.g., "media/img.png") or a resource located on the remote web server (e.g., "http://server_name/resource_path").

The media layer can be any of the following:

Audio only layers, constructed with $.audio( { ... } ) contain only audio and are not visible.
Video layers, constructed with $.video( { ... } ) contain video and optionally audio.
Image layers, constructed with $.image( { ... } ) show static content only (bitmap or vector graphics).
Animation layers, constructed with $.animation( { ... } ) contain SVG or SMIL documents.
Media layers, constructed with $.media( { ... } ) combine all of the above and are the preferred way to handle media in an SVG document as they automatically choose the right type of layer for the given URI.

The media layer is part of the basic layer types, along with text area and group layers.

Specific attributes

All jSignage layers share a common set of attributes to define their screen layout and active time interval.

The media layer accepts the following specific attributes:

href (required)
URI of the content source.

layerFit
Specify whether to adjust the dimensions of the layer to fit the aspect ratio of its content, must be one of:
- 'horizontal': Adapt the width of the layer to match the aspect ratio of the media. The layer may be become narrower than specified as a result, but will keep to the specified height. It will not extend beyond the specified nominal width.
- 'vertical': Adapt the height of the layer to match the aspect ratio of the media. The layer may be become shorter than specified as a result, but will keep to the specified width. It will not extend beyond its specified nominal height.
- 'both': Adapt the height or the width of the layer to match the aspect ratio of the media. The layer will become either narrower or shorter as a result, while keeping respectively to the specified height or width, but will never extend beyond its specified nominal dimensions.
- 'none': Do not adapt the layer dimensions to the aspect ratio of the media
Default: 'none'. Requires firmware 3.0.

layerAlign
Specify the alignment of a layer that was shrunk to fit the aspect ratio of its media content with regard to its nominal viewport, must be one of 'topLeft', 'topMid', 'topRight', 'midLeft', 'center', 'midRight', 'bottomLeft', 'bottomMid' or 'bottomRight'.

Default: 'center'.

mediaFit
Specify how to fit the media inside the viewport defined by the layer, must be one of:
- 'fill': Scale the media's width and height independently so that it occupies the entire area of the viewport, possibly altering its aspect ratio.
- 'meet': Scale the media uniformly so that it just touches either the horizontal or vertical borders of the viewport and fits entirely within the viewport, possibly leaving some area of the viewport uncovered if the aspect ratio of the media and of the layer do not match.
- 'slice': Scale the media uniformly so that it just covers the entire viewport, possibly cropping part of the media if the aspect ratio of the media and of the layer do not match. Requires firmware 3.0.
- Default: 'meet'.

mediaAlign
Specify the alignment of the media content inside the layer if both aspect ratios don't match, must be one of 'topLeft', 'topMid', 'topRight', 'midLeft', 'center', 'midRight', 'bottomLeft', 'bottomMid' or 'bottomRight'.

Default: 'center'.

mimetype
Specify the mime type of the content in case it is not (or incorrectly) returned by the server or inferred from the file name extension. Default: 'auto'.

Notes:

Warning: by default, media such as video are displayed only once and will not loop. If you need the video to play in loop, you need to use repeatDur:'indefinite' when constructing your media.
The frame and decoration attribute has some specific settings that can only be applied to media layers.

Specific functions

The media layer does not have any specific function.

See the list of functions to work with layers.

Examples

Full screen video

Create a full screen video:

$(function(){ 
    $('svg').add( 
      $.video({
        href: 'clip.avi',
        id : 'vid1'
      }) 
    );
});

The $(function(){ ... }); ensures that the media is inserted into the DOM tree after the entire document is loaded.
The $('svg').add( ... ) adds the video in the DOM tree as a child of the <svg> element.
The $.video({ ... }) creates the video layer with the specified attributes.

Controlling the size

Create a video a quarter of the size of the screen, centered and looping indefinitely:

$(function(){  
  $('svg').add( 
    $.video({
      href: 'clip.avi',
      id: 'media2',
      repeatCount: 'indefinite',
      width: '50%',
      height: '50%',
      top: '25%',
      left: '25%'
    }) 
  ); 
});

Image with a nice frame

Create an image with a predefined frame around it using the frame decoration attribute.

$(function(){  
  $('svg').add( 
    $.image({
      href: 'portrait.jpg',
      frame: { frameColor: 'white' },
      layerFit: 'both',
      width: '50%',
      height: '50%',
      top: '25%',
      left: '25%'
    }) 
  ); 
});

The frame: { frameColor: 'white' } adds a frame decoration around the image.
The layerFit: 'both' makes sure the frame border sticks to the media.

Timings

Create a sequence of images. The first two images are displayed one after the other for a duration of 5s each. The last two images are displayed on top of the first ones at different intervals. Note that $.playlist() can be used to create a playlist of images and/or videos.

$(function(){ 
   $('svg').add([ 
      $.image({ href: 'images/1.jpg', begin: 0, dur:5 }),
      $.image({ href: 'images/3.jpg', begin: 5, dur:5 }),
      $.image({ href: 'images/2.jpg', begin: 1, dur:5, width:'50%', height:'50%', top:'25%', left:'25%' }),
      $.image({ href: 'images/4.jpg', begin: 7, dur:3, width:'50%', height:'50%', top:'25%', left:'25%' })
   ]);
});

Effects

Create a full-screen image with a duration of 5 seconds, with a fade-in and a fade-out effect controlling the way it appears and disappears from the screen.

$(function(){
     $.media( { href: 'images/1.jpg', dur: 5 }).fadeIn().fadeOut().addTo( 'svg' );
});

The .fadeIn() adds a fade in effect on the image.
The .fadeOut() adds a fade in effect on the image. See JSignage:Effects for more on effects.

Base64 image

To reference a base64-encoded image, use the data URI scheme, such as:

$(function(){
     $.image({ 
          width: 512, height:512, left:'20%', top: 250,  
          href: 'data:image/png;base64,\
                    iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAIAAADTED8xAAADMElEQVR4\
                    nOzVwQnAIBQFQYXff81RUkQCOyDj1YOPnbXWPmeTRef+/3O/OyBjzh3CD95BfqI\
                    CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0\
                    CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0\
                    CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0\
                    CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0\
                    CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0\
                    CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0\
                    CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0\
                    CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0\
                    CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0\
                    CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0\
                    CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0\
                    CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0\
                    CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0\
                    CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0\
                    CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0\
                    CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0\
                    CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0\
                    CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0\
                    CMO0TAAD//2Anhf4QtqobAAAAAElFTkSuQmCC'
     }).addTo('svg');
});