Difference between revisions of "Image Plugin"
Line 131: | Line 131: | ||
== See also == | == See also == | ||
* [[Video/Audio Plugin]] | * [[Video/Audio Plugin]] | ||
− | |||
− | |||
* [[Plugin API Reference]] | * [[Plugin API Reference]] |
Latest revision as of 12:04, 12 June 2023
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[edit]
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.
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[edit]
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. |
duration |
number |string |
20 |
No |
The display duration of the image in seconds. You can also set this parameter to
|
filler |
string |
"fit" |
No |
The filler type of the image.
|
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. |
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
Note: If the rotation value is a number (which must be divisible by 90), it is applied as an absolute rotation in degrees. |
Example[edit]
Screenshot[edit]
Code[edit]
{
"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",
"control:dim": false,
"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[edit]
- 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