Difference between revisions of "HTML5X Plugin"
(→Syntax) |
(→Syntax) |
||
| Line 28: | Line 28: | ||
== Syntax == | == Syntax == | ||
{| class="wikitable sortable" | {| class="wikitable sortable" | ||
| − | |+ Property syntax of extended properties | + | |+ Property syntax of extended properties of HTML5X plugin |
|- | |- | ||
! Property !! Value !! Example !! class="unsortable" | Description | ! Property !! Value !! Example !! class="unsortable" | Description | ||
Revision as of 14:30, 15 January 2021
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]
| Property | Value | Example | Description |
|---|---|---|---|
html5x:audiotrack |
{LANGUAGE} |
|
Preselects an audio track. If this property is not set, the last selected audio track is used. If the audio track does not exist or is set to |
html5x:content |
{BOOLEAN_VALUE} |
|
Adds/Removes the related content button (i.e. the button with the action |
html5x:cors |
{BOOLEAN_VALUE} |
|
Enables/Disables CORS support. By default, CORS support is enabled. If CORS support is enabled, the video URL and subtitle track URLs must contain the CORS headers. If CORS support is disabled, an online proxy is used for the subtitle track URLs, which means that these URLs must be publicly available. |
html5x:subtitle |
{LANGUAGE} |
|
Preselects a subtitle track. If this property is not set, the last selected subtitle track is used. If the subtitle track does not exist or is set to |
html5x:subtitle:{LANGUAGE}:{LABEL} |
{URL}|{ID} |
|
Sets up a subtitle track. If the value is not an HTTP/HTTPS URL, the interaction plugin is used to request the corresponding URL. |
html5x:subtitle:order |
{ORDER} |
|
Orders the subtitle tracks by label or language. If this property is not set, the order remains as it appears in the extended properties. |
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"
}]
}