Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Description

The method TouchCastPlayerAPI.embed() allows you to embed touchcast players into any webpage you want. You can embed an unlimited number of players.

Code Block
languagejs
themeDJango
TouchCastPlayerAPI.embed(config);

...

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


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

object

...

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

...