helpVideoUrl Property
Description
The helpVideoUrl property is used to specify the help videos that will be available in the ESD/SPD Web editor. For a general overview please refer to the help videos overview topic.
To set this property, use the ESDWeb object's set method as illustrated in Example One below, or pass it to the startup method as part of the configuration parameter.
The value of this property should be the URI of JSON data that defines the help videos that will be available in the editor.
The format of this JSON data is described in the section JSON Structure.
The section JSON Schema contains a JSON schema for validating the JSON.
Server MIME Types
These MIME types must to be configured on your web server to deliver help video files:
- .mp4 - video/mp4
- .webm - video/webm
You may also need to configure a MIME type to deliver the JSON file containing video definitions:
- .json - application/json
Web server configuration is out of the scope of this document. Please refer to the appropriate documentation for your web server.
Example One
editor = new ESDWeb(null, 'editorNode');
var helpVideoUrl = 'http://www.example.com/videos.json';
editor.set('helpVideoUrl', helpVideoUrl);
/* set other properties here */
editor.startup(...);
Example Two
editor = new ESDWeb(null, 'editorNode');
// Disable help video viewer
editor.set('helpVideoUrl', null);
/* set other properties here */
editor.startup(...);
JSON Structure
Remarks
In the example below there are two sections defined, and two videos in each section. The screenshot below the example shows how this definition will appear when used in ESD/SPD Web.
Item Properties
- title: The title of the video.
- description: A description of the video and the core concepts it illustrates.
- duration: The length of the video.
- sources: An array of video formats available for each individual item. It is
recommended that you have at least the .mp4 and .webm formats available to cover all modern browsers
that we support.
- src: The url to the video resource.
- type: The mime type of the video resource.
Example JSON
{
"sections": [
{
"title": "Fundamentals",
"items": [
{
"title": "Properties Pane",
"description": "Learn how to efficiently use the new properties panel to change the appearance of shapes.",
"duration": "3:01",
"sources": [
{
"src": "helpVideos/Properties_Pane_Video.mp4",
"type": "video/mp4"
},
{
"src": "helpVideos/Properties_Pane_Video.webm",
"type": "video/webm"
}
]
},
{
"title": "Toolbar",
"description": "Learn about options available on the toolbar.",
"duration": "8:08",
"sources": [
{
"src": "helpVideos/Toolbar_Overview_Tutorial.mp4",
"type": "video/mp4"
},
{
"src": "helpVideos/Toolbar_Overview_Tutorial.webm",
"type": "video/webm"
}
]
},
{
"title": "Zoom and Pan",
"description": "Learn about how you can zoom in and out and move around in your diagrams.",
"duration": "2:47",
"sources": [
{
"src": "helpVideos/Zoom_and_Pan_Tutorial.mp4",
"type": "video/mp4"
},
{
"src": "helpVideos/Zoom_and_Pan_Tutorial.webm",
"type": "video/webm"
}
]
},
{
"title": "Text",
"description": "Learn how to enter and format text.",
"duration": "2:59",
"sources": [
{
"src": "helpVideos/Text_Operations_Tutorial.mp4",
"type": "video/mp4"
},
{
"src": "helpVideos/Text_Operations_Tutorial.webm",
"type": "video/webm"
}
]
}
]
},
{
"title": "Streets",
"items": [
{
"title": "Streets & Intersections",
"description": "Learn how to draw streets and intersections.",
"duration": "4:59",
"sources": [
{
"src": "helpVideos/Street_Operations_Tutorial.mp4",
"type": "video/mp4"
},
{
"src": "helpVideos/Street_Operations_Tutorial.webm",
"type": "video/webm"
}
]
},
{
"title": "Street Stripes",
"description": "Learn how to change the appearance of stripes in streets.",
"duration": "5:11",
"sources": [
{
"src": "helpVideos/Street_Striping_Tutorial.mp4",
"type": "video/mp4"
},
{
"src": "helpVideos/Street_Striping_Tutorial.webm",
"type": "video/webm"
}
]
}
]
},
{
"title": "Field Measurements",
"items": [
{
"title": "Station Lines",
"description": "Learn how to enter station Line measurements for accurate diagramming.",
"duration": "3:03",
"sources": [
{
"src": "helpVideos/Station_Lines_Tutorial.mp4",
"type": "video/mp4"
},
{
"src": "helpVideos/Station_Lines_Tutorial.webm",
"type": "video/webm"
}
]
},
{
"title": "Triangulation",
"description": "Learn how to enter triangulation measurements for accurate diagramming.",
"duration": "4:38",
"sources": [
{
"src": "helpVideos/Triangulation_Tutorial.mp4",
"type": "video/mp4"
},
{
"src": "helpVideos/Triangulation_Tutorial.webm",
"type": "video/webm"
}
]
}
]
}
]
}
Viewer Result
The JSON example above will produce the following help video viewer structure.
JSON Schema
The following schema is provided so you can validate your JSON. Numerous online validators exist such as the one here.
{
"$schema": "http://json-schema.org/schema#",
"id": "http://www.pae.com/schemas/templateLibrary.json",
"title": "ESD/SPD Web Template Library",
"description": "ESD/SPD Web SDK help video url definition",
"type": "object",
"properties": {
"sections": {
"description": "An array of sections that will be displayed in the help video viewer.",
"type": "array",
"items": {
"type": "object",
"properties": {
"title": {
"description": "The title of the section",
"type": "string"
},
"items": {
"description": "An array of video definition objects.",
"type": "array",
"items": {
"type": "object",
"properties": {
"title": {
"description": "The title of the video",
"type": "string"
},
"description": {
"description": "The description of the video",
"type": "string"
},
"duration": {
"description": "The duration of the video",
"type": "string"
},
"sources": {
"description": "An array of videos that can be used for this item.",
"type": "array",
"items": {
"type": "object",
"properties": {
"src": {
"description": "The source URI for this video.",
"type": "string"
},
"type": {
"description": "The mime type for this video.",
"type": "string"
}
}
}
}
}
}
}
}
}
}
}
}