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. Additionally, this plugin contains functions for rotating the image. The plugin can be used with version 0.1.74 or higher.

Usage

The plugin must be loaded with an image URL. Optionally, the display duration, the filler type, the background color, and the initial rotation 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}&rotation={ROTATION}

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|string	20	No	The display duration of the image in seconds. You can also set this parameter to "slideshow" to use the slideshow interval settings from the application (Settings → Slideshow Interval). The following interval values can be set. Very Fast: 1 sec Fast: 5 sec Normal: 10 sec Slow: 20 sec Very Slow: 40 sec
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").
rotation	number	0	No	The initial rotation of the image in degrees. During runtime, it is possible to rotate the image by using the action player:commit:message:rotate:{ROTATION_VALUE}. In this case, a direction or a number can be indicated as rotation value. Please see following examples. player:commit:message:rotate:right player:commit:message:rotate:left player:commit:message:rotate:full player:commit:message:rotate:full-right player:commit:message:rotate:full-left player:commit:message:rotate:reset player:commit:message:rotate:-270 player:commit:message:rotate:-180 player:commit:message:rotate:-90 player:commit:message:rotate:0 player:commit:message:rotate:90 player:commit:message:rotate:180 player:commit:message:rotate:270 Note: If the rotation value is a number (which must be divisible by 90), it is applied as an absolute rotation in degrees.

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",
            "button:rewind:icon": "rotate-left",
            "button:rewind:action": "player:commit:message:rotate:left",
            "button:rewind:key": "delete",
            "button:forward:icon": "rotate-right",
            "button:forward:action": "player:commit:message:rotate:right",
            "button:forward:key": "insert",
            "button:speed:icon": "settings-backup-restore",
            "button:speed:action": "player:commit:message:rotate:reset"
        }
    },
    "items": [{
            "title": "Video 1",
            "playerLabel": "Video 1",
            "action": "video:http://msx.benzac.de/media/video1.mp4",
            "properties": {
                "control:load": "silent"
            }
        }, {
            "background": "http://msx.benzac.de/img/bg1.jpg",
            "title": "Audio 1",
            "playerLabel": "Audio 1",
            "action": "audio:http://msx.benzac.de/media/audio1.mp3",
            "properties": {
                "control:load": "silent"
            }
        }, {            
            "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",
            "properties": {
                "control:load": "silent"
            }
        }, {
            "background": "http://msx.benzac.de/img/bg2.jpg",
            "title": "Audio 2",
            "playerLabel": "Audio 2",
            "action": "audio:http://msx.benzac.de/media/audio2.mp3",
            "properties": {
                "control:load": "silent"
            }
        }, {
            "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
• Panorama Plugin
• Background Plugin
• Ad Plugin
• Plugin API Reference