HTML5X Plugin
HTML5X stands for HTML5 Extended and is a special video plugin that supports the following features.
- Setup subtitle tracks.
- Preselect subtitle track.
- Preselect audio track.
- Switch subtitle track at playback time.
- Switch audio track at playback time.
- Load video and/or subtitle tracks from the interaction plugin (this allows you to use the plugin with Google Drive MSX, OneDrive MSX, Dropbox MSX, and other services).
Note: Subtitle tracks should be specified in the Web Video Text Tracks Format (WebVTT) for best cross-platform compatibility. Please also note the selection of audio tracks may not work on each platform.
The plugin can be used with version 0.1.117 or higher and is configured via the extended properties of a content item. Please see Extended Properties for more information.
Usage[edit]
The plugin can be loaded with a video URL or ID. If a video ID is used, the interaction plugin is used to request the corresponding URL. Please see following action syntax examples.
video:plugin:http://msx.benzac.de/plugins/html5x.html?url={URL}video:plugin:http://msx.benzac.de/plugins/html5x.html?id={ID}
If you would like to use the plugin with Google Drive MSX, OneDrive MSX, or Dropbox MSX, please use the index.json file feature and reference all video and subtitle files with the inline expression {asset:id:{NAME}} (e.g. {asset:id:sintel.mp4}). For more information, please see Credits & Hints from the corresponding service.
Note: For Google Drive MSX, CORS support must be disabled and all referenced files must be publicly shared and smaller than 100 MB.
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/html5x.js.
In order to get access to the audio/subtitle track selection, you have to set up a custom content action in the extended properties (i.e. by setting the button:content:icon and button:content:action property).
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 |
30 |
No |
The display duration of the image in seconds. |
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. |
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"
}
},
"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"
}]
}