Image Plugin

This is a special video plugin that displays an image for a specific time. It can be used to create a mixed playlist of videos, audios, and images. The plugin can be used with version 0.1.74 or or higher.

Usage

The plugin must be loaded with an image URL. Optionally, the display duration, the filler type, and the background color of the image can be indicated. Please see following action syntax example.

• video:plugin:http://msx.benzac.de/plugins/image.html?url={URL}&duration={DURATION}&filler={FILLER}&color={COLOR}

If you would like to use the plugin as reference to implement your own plugin, please have a look at this implementation script: http://msx.benzac.de/plugins/js/image.js.

Syntax

Parameter syntax of image plugin

Parameter	Type	Default Value	Mandatory	Description
url	string	null	Yes	The URL of the image. It is recommended to encode the value to ensure that it is evaluated correctly (e.g. "http://msx.benzac.de/img/bg1.jpg" → "http%3A%2F%2Fmsx.benzac.de%2Fimg%2Fbg1.jpg").
duration	number	30	No	The display duration of the image in seconds.
filler	string	"fit"	No	The filler type of the image. "fit": The image is sized (by keeping the ratio) to fit into the size and is positioned in the center. "cover": The image is sized (by keeping the ratio) to cover the entire size and is positioned in the center. "smart": If the ratio of the image and the size is the same, "cover" is used, otherwise "fit" is used.
color	string	"black"	No	The background color of the image in CSS syntax. It is recommended to encode the value to ensure that it is evaluated correctly (e.g. "#000000" → "%23000000").

Example

Screenshot

Example Screenshot (Image Plugin)

Code

{
    "type": "pages",
    "headline": "Image Plugin Test",
    "template": {       
        "type": "separate",
        "layout": "0,0,2,4",
        "icon": "msx-white-soft:extension",
        "color": "msx-glass",
        "properties": {
            "control:load": "silent"		
        }
    },
    "items": [{
            "title": "Video 1",
            "playerLabel": "Video 1",
            "action": "video:http://msx.benzac.de/media/video1.mp4"
        }, {
            "background": "http://msx.benzac.de/img/bg1.jpg",
            "title": "Audio 1",
            "playerLabel": "Audio 1",
            "action": "audio:http://msx.benzac.de/media/audio1.mp3"
        }, {            
            "title": "Image 1",
            "playerLabel": "Image 1",
            "action": "video:plugin:http://msx.benzac.de/plugins/image.html?url=http://msx.benzac.de/img/bg3.jpg"
        }, {
            "title": "Video 2",
            "playerLabel": "Video 2",
            "action": "video:http://msx.benzac.de/media/video2.mp4"
        }, {
            "background": "http://msx.benzac.de/img/bg2.jpg",
            "title": "Audio 2",
            "playerLabel": "Audio 2",
            "action": "audio:http://msx.benzac.de/media/audio2.mp3"
        }, {
            "title": "Image 2",
            "playerLabel": "Image 2",
            "action": "video:plugin:http://msx.benzac.de/plugins/image.html?url=http://msx.benzac.de/img/test.jpg"
        }]
}

Demo

• Launch via App: https://msx.benzac.de/?start=content:https://msx.benzac.de/info/xp/data/plugin_test_3.json
• Launch via Demo Page: https://msx.benzac.de/info/?start=content:https://msx.benzac.de/info/xp/data/plugin_test_3.json

See also

• Video/Audio Plugin
• Interaction Plugin
• HTML5X Plugin
• Plugin API Reference