/
.embed()

.embed()

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

NameDescriptionType
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-containerThat 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 0
    • startTime[number] - time when video start in seconds. Default 0
    • interactiveTip[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 abbreviationDefault "en"
    • endScreen[boolean] - show/hide end screen. Default true
    • playControl[boolean]  - show/hide play-pause button. Default true
    • logoInControls[boolean]  - show/hide logo in controlsDefault true
    • volumeControl[boolean]  - show/hide volume buttonDefault true
    • timingControl[boolean] - show/hide time block in controlDefault true
    • infoControl[boolean]  -  show/hide info buttonDefault false
    • shareControl[boolean]  - show/hide share buttonDefault false
    • shareToSocial[boolean]  - show/hide share to social buttonsDefault true
    • fullscreenControl[boolean]  - show/hide fullscreen buttonDefault true
    • commentsControl[boolean]  -  show/hide comments buttonDefault false
    • summaryControl[boolean] -  show/hide summary buttonDefault false
    • searchControl[boolean] - show/hide search buttonDefault true
    • subtitlesControl[boolean] - show/hide subtitles buttonDefault 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  "rgba(49,49,49,.93)"
    • subtitlesTextColor[string] - change color for subtitles text. Possible values: any colorDefault  "#fff"
    • playerBackgroundColor[string]- change color for player background. Possible values: any colorDefault  "#000"
    • progressUpdateColor[string] - change color for progressbar. Possible values: any color  or array with 3 colors.  Default  "["#635dfe", "#d638e8", "#e9006c"]"
    • speedButtonControl[boolean]show/hide speed-button. Default false
    • chaptersControl[boolean]show/hide chapters block. Default true
    • googleAnalytics[boolean] - enable/disable google analytics. Default true
    • startScreenTitle[boolean] - show/hide the title for the start screen. Default false
    • startScreenSource[boolean] - show/hide the name of source for the start screen. Default false
    • startScreenInfo[boolean] - show/hide the block of info for the start screen. Default false
    • startScreenSmallPlayButton[boolean] - show/hide the small play button for the start screen. Default false


Also You can see all parameters for playerConfig in TouchCastPlayerAPI.fieldsForEmbedPlayerConfig

object


Example

  TouchCastPlayerAPI.embed({
      container: '#player-container',
      videoUrl: '//tc.touchcast.com/files/YSAgICAgICAgICAgICAgIE1uejVPOW80SjlINUdsT3kxR0cvbi9YUkhjNkZyaGJjd09IMk03SDU4N0NCU0p4cEZwOC9mK281NHhvUlhWSWQ=',
      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,
      },
    });

Related content

Tutorial 01 - Programmatically Embed a TouchCast Player and Control it
Tutorial 01 - Programmatically Embed a TouchCast Player and Control it
More like this
TouchCast Studio: How Can I Embed A TouchCast On My Website?
TouchCast Studio: How Can I Embed A TouchCast On My Website?
More like this
Quick Start
Quick Start
More like this
Player API
Player API
More like this
Tutorial 02 - Connect to an Embedded TouchCast Player
Tutorial 02 - Connect to an Embedded TouchCast Player
More like this
Reference
Reference
More like this