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

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

Property syntax of extended properties for HTML5X 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