Idomoo's Video Player consists of many configuration options, below you can see the full list of available configurations.
Below options need to be defined inside the var player_options script.
Video Link
Video link created by Idomoo can contain the full video url or just the video's ID. Configure the player by your needs.
By default, video player plays a full video link.
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
src | url | string | None | Video Embed. A Link to a specific all viewers to watch. If it exists, it overwrites the video link in the URL. | src: 'xyz.idomoo.com/videos/s amples/VideoForPlayer.mp4' |
build_url | URL Prefix (Consult professional services or support in case of doubt) | string | None | Video generating environment. To be use when the video link contain only video id | video's generating environment US: build_url: "https://c.idomoo.com/" ______ video's generating environment EU: build_url: "https://e.idomoo.com/" |
extension | mp4 / m3u8 | string | mp4 | To be use when the video link contain only video id | extension: "m3u8" |
Sizing and Aspect ratio
The size and aspect ratio of the player needs to match the video's dimensions.
By default size is HD , ratio is 16:9 (Horizontal HD videos).
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
size | sd hd fhd wide | string | hd | The size of the video player needs to match the video's dimensions | size: "hd" |
ratio | number : number | string | 16:9 | The video player’s aspect ratio should match the video's aspect ratio | ratio: "1:1" |
width | Integer in pixels | number | 1280 | Width dimension of the Player | width: 1080 |
fluid_mode | true / false | Boolean | false | Auto calculates the correct aspect ratio | Fluid_mode: true |
Autoplay
Video will be muted in case the browser blocks videos to autoplay.
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
autoplay | true / false | Boolean | true | Determine whether the video should play automatically on load or when the viewer presses “Play” | autoplay: false |
Mute
For some browsers, videos can not autoplay if the sound is not muted. This parameter will assure that video will start muted and if autoplay determined, autoplayed.
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
mute | true / false | Boolean | false | Determine whether the video should start muted or not | mute: true |
Share
Share options to be shown under the player's share button
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
share_button | true / false , object | Boolean, object | { download: true, copy: true, mail: true, whatsapp: true, facebook: false, twitter: false } | Controls share options displayed inside the player share menu. If set to “false”, the player share button is hidden | share_button: { download: true, copy:false, mail: true, whatsapp: true, facebook: true, twitter: true } or share_button: false |
share_button.download | true / false | Boolean | true | Show “download” share option | download: false |
download_filename |
Any text ; Parameters from url ; Saved words: <date_time> shown in format dd MMM YYYY, HHMM). <date> shown in format (YYYY-MM-DD) | string | my_video | Downloaded file name | |
share_button.copy | true / false | Boolean | true | Show “copy” share option | copy: false |
share_button.mail | true / false | Boolean | true | Show “mail” share option | mail: false |
share_button.whatsapp | true / false | Boolean | true | Show “whatsapp” share option | whatsapp: false |
share_button.facebook | true / false | Boolean | false | Show “facebook” share option | facebook: true |
share_button.twitter | true / false | Boolean | false | Show “twitter” share option | twitter: true |
Interaction
Enable player actions
If your video contains an 'Interactive Player Action', you'll need to make sure that it is also enabled here on the player.
The full screen option will not be available on iOS systems (iPhone, iPad). Native player is the one that opens at full screen state and it doesn't support use of any of the interactivity features. If you want your video viewers to have full screen take into consideration that interactivity will not work in this state and it’s not recommended.
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
interactive | true / false | Boolean | false | Video contains an 'Interactive Player Action', must enable “interactive” on the player. | interactive: true |
ios_full_screen | true / false | Boolean | false | We think it is a bad UX, but if you like viewers to have a full screen on iOS, take into consideration that interactivity will not work in this state. | ios_full_screen:true |
Mark "Visited" placeholder
Player to mark clicked interactive choices of the viewer while the viewer is in the same session.
Demo can be seen here and at the example below how the ‘Kids club’ text is marked after being clicked.
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
visited_placheholder | true / false | Binary | false | Player to mark clicked interactive choices of the viewer. | visited_placheholder:true |
Choose when the In-Player Menu will appear, if the video contains one.
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
show_customise | “on_click”, “on_start”, “on_end” | string | “on_click” | Choose when the In-Player Menu will appear: On user click , when video starts playing or when the video finishes playing. | show_customise: on_start |
Analytics
Data Collection
The player is a data collection tool, define all buttons you want to measure under the cta_analytics property.
See how viewers interact with page’s buttons on Idomoo's analytics dashboard.
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
cta_analytics | Array [button class, Analytics event name] | string | None | Holds data that is sent to Idomoo’s analytics engine from page elements (usually call to action buttons) | cta_analytics: [ ["idm-cta-btn1", "Click Me"], ["idm-cta-btn2", "Join Now"] ] |
Display
Appearance of the thumbnails and messages shown on the player
Opening image
Choose which image that will show before the video begins playing.
“image_url” is the strongest option, stating this will overwrite other keys.
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
opening_i mage | Array { image_suffix :'', image_extension:'', image_url:' ' } | string | None | Possible keys’ members of this object defined below | opening_image: { image_suffix: '_start' } |
image_url | url (public) | string | None | Image to display | image_url:'https://goo.gl/ LxgrFt' |
image_suf fix | String | string | None | state which suffix to use (_end is what is usually being configured by idomoo’s professional services. Other suffix can be stated on the API call | image_suffix: '_start' |
image_extension | jpg,gif | string | jpg | state extension | image_extension:jpg |
Closing image
Choose which image that will show when the video finishes playing.
“image_url” is the strongest option, stating this will overwrite other keys.
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
closing_image | Array { image_suffix :'', image_ext ension:'', image_url:' ' } | string | None | Possible keys’ members of this object defined below | opening_image: { image_suffix: '_start' } |
image_url | url (public) | string | None | Image to display | closing_image: { image_url:'https://goo.gl/LxgrFt' } |
image_suffix | String | string | None | Suffix can be stated on the API call | image_suffix: '_end' |
image_extenson | jpg,gif | string | jpg | state extension | image_extension:jpg |
Loading gif
Choose if animated gif shown while the video loads
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
remove_gif | Boolean | True , false | false | Animated gif will not show | remove_gif:true |
Error message
Replace Idomoo's default error message with your own
Accessibility
Closed Captioning
*Captions are available for full service users only *
Add a closed captions button on the player and choose its default and other languages.
If no language is set to default, the video will start playing without captions.
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
close_captions | array { "srclang": "en", "Label": "English", "src": "https://s3.amazonaws.co m/idoplayer-us.idomoo.com/player2.0/vtt/sample.vtt", "default": "true" }, { "srclang": "es", "label": "Espanol" } | string | None | Array that holds all information about the available and default captions languages. See below each field. | close_captions: [ { "srclang": "en", "label": "English", "src": "https://s3.amazonaws.co m/idoplayer-us.idomoo.com/player2.0/vtt/sample.vtt", "default": "true" }, { "srclang": "es", "label": "Espanol", "src": "https://s3.amazonaws.co m/idoplayer-us.idomoo.co m/player2.0/vtt/sample.vtt " } ] |
srclang | Language code in 2 characters | string | None | Language code in 2 characters | srclang: "es" |
label | text | string | None | Language label (as shown on the player) | label: "Espanol" |
src | URL | string | None | Define outsource CC. If not defined, the video URL extension replaced with .vtt and used as captions source | src: "https://s3.amazonaws.co m/idoplayer-us.idomoo.co m/player2.0/vtt/sample.vtt " |
default | true / false | Binary | None | Start video with marked default language | default: true |
Alternativer text
Replace Idomoo's default video div label for screen readers.
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
"descriptive_title"
| alphanumeric characters, spaces, underscores, and dashes.
| string | Video player | the visible text or alternative text used to label the video player. This label is announced after activating the Play button. | "descriptive_title"=video with personalized information
|
Control Bar
Customize player control bar appearance
Control bar position
Control bar position can be at the bottom of the video frame area (Default) or Below the video frame area.
Here is an example of the control bar below the video frame area.
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
toolbar_position
| low | string | - | Position player’s control bar below the video | toolbar_position: "low" |
Remove progress bar
Remove progress bar from control bar. This is useful when you do not want users to be able to navigate forward and backward in the video.
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
disabled_control_bar
| True , false | Boolean | false | Prevent user to control the playback using the progress bar control | disabled_control_bar: true |
Mobile compact version
Display a control bar which is optimized for the user experience on a narrow device such as a mobile device
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
minimal_version | True , false | Boolean | false | Define Player to show minimal control bar when loaded on mobile | minimal_version: true |
Fade out control bar
Control bar to fade out after 3 seconds in pause mode . When the user will hover on the player it becomes visible again.
This mimics the player’s behavior in play mode.
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
fade_control_bar_on _pause | True , false | Boolean | false | Progress bar to fade out after 3 sec. in pause mode. This will act exactly as the player acts in "play" state. | fade_control_bar_on_pause: true |
Fixed control bar
Control bar to stay always on screen.
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
fade_control_bar | True , false | Boolean | true | If true, Progress bar to stay always on screen | fade_control_bar: true |
Pause / Play on the whole video frame area
Control the player’s play / pause behavior by clicking on the whole video frame area.
Parameter name | Possible values | Data/ Unit Type | Default | Description | Example |
|---|
click_to_pause | “disable”, “enable” | string | disable | Control the player’s play / pause behavior by clicking on the whole video frame area. | click_to_pause: enable |
