You are viewing an old version of this content. View the current version.
Compare with Current
View Version History
« Previous
Version 9
Next »
Description
The method TouchCastPlayerAPI.embed()
allows you to embed touchcast players into any webpage you want.
You can embed an unlimited number of players.
TouchCastPlayerAPI.embed(config);
Parameters
Name | Description | Type |
---|
config | Object with these possible properties: container[string]* - mandatory, represents a CSS selector for a container where the TouchCast player should be embedded. For example it can have a value of #player-container or .player-container . That means that somewhere on your webpage you should have a container like <div id="player-container"></div> or <div class="player-container"></div> width[string]* - mandatory, represents the player width. It accepts values like "100%" or "640" height[string]* - mandatory, represents the player height. It accepts values like "100%" or "400" videoUrl[string]* - mandatory, represents a touchcast video url.playerId[string]* - mandatory, represents a unique id for the player; helpful to identify the player instance.playerConfig[object] - an object that allows to customize player appearance. It accepts these possible properties:defaultStreamVariant[number] - start level for HLS. Possible values: 0, 1, 2, 3, 4 ... . Default 0startTime[number] - time when video start in seconds. Default 0interactiveTip[boolean] - Interactive guide, Default false interactiveTipShowTime[number] - Time(in milliseconds) when interactive tip can be visible after load tc. Default 5000 defaultSearchLanguage[string] - default language for search. Possible values: language abbreviation. Default "en" endScreen[boolean] - show/hide end screen. Default true playControl[boolean] - show/hide play-pause button. Default true logoInControls[boolean] - show/hide logo in controls. Default true volumeControl[boolean] - show/hide volume button. Default true timingControl[boolean] - show/hide time block in control. Default true infoControl[boolean] - show/hide info button. Default false shareControl[boolean] - show/hide share button. Default false shareToSocial[boolean] - show/hide share to social buttons. Default true fullscreenControl[boolean] - show/hide fullscreen button. Default true commentsControl[boolean] - show/hide comments button. Default false summaryControl[boolean] - show/hide summary button. Default false searchControl[boolean] - show/hide search button. Default true subtitlesControl[boolean] - show/hide subtitles button. Default true pipPosition[string] - change pip position. Possible values: "bottom-right" , "bottom-left" , "top-right", "top-left" . Default "bottom-right" controlsColor[string] - change color for controls. Possible values: any color. Default "rgba(33,33,33,.86)" subtitlesBackgroundColor[string] - change color for subtitles background. Possible values: any color. Default "r gba( 49,49,49,.93 )" subtitlesTextColor[string] - change color for subtitles text. Possible values: any color. Default "#fff "playerBackgroundColor[string] - change color for player background. Possible values: any color. Default "#000 "progressUpdateColor[string] - change color for progressbar. Possible values: any color or array with 3 colors. Default "["#635dfe", "#d638e8", "#e9006c"]" summaryTrailerDuration[number] - add custom trailer duration for summary( in seconds). Default 0summaryNoSkip[boolean] - If enabled summary doesn't skip chapters. But video should jump to first vApp. Default false speedButtonControl[boolean] - show/hide speed-button. Default false chaptersControl[boolean] - show/hide chapters block. Default true
Also You can see all parameters for playerConfig in TouchCastPlayerAPI.fieldsForEmbedPlayerConfig | object |
Example
TouchCastPlayerAPI.embed({
container: '#player-container',
videoUrl: '//touchcast.com/files/44df4sdfs55erw444wefw1',
playerId: ,
width: '960',
height: '405',
playerConfig: {
controlsColor: 'rgba(79, 56, 189, 0.66)',
playerBackgroundColor: '#b7c4c7',
progressUpdateColor: 'green',
interactiveTip: false,
playControl: false,
volumeControl: false,
logoInControls: true,
timingControl: false,
infoControl: false,
shareControl: false,
commentsControl: false,
summaryControl: true,
searchControl: false,
subtitlesControl: false,
fullscreenControl: true,
},
});