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);

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  "
400px
  • 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.
themeConfiguration
  • 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 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 buttonDefault 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 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]
  • summaryTrailerDuration[number]
  • summaryNoSkip[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

    Code Block
    languagejs
    themeDJango
      TouchCastPlayerAPI.embed({
          container: '#player-container',
          videoUrl: 'https://portaldevtc.touchcast.iocom/files/YSAgICAgICAgICAgICAgIHdQR2NuL3RpVDJFQm1COTVKUHRSY2pzVi95cy83L3dhVTgvRE5GM3pMUGdFY0ZvekR2ZTY1UnpGM1UrR1hvNEgYSAgICAgICAgICAgICAgIE1uejVPOW80SjlINUdsT3kxR0cvbi9YUkhjNkZyaGJjd09IMk03SDU4N0NCU0p4cEZwOC9mK281NHhvUlhWSWQ=',
          playerId: ,
          width: '960px960',
          height: '405px405',
          playerConfig: {
            controlsColor: 'rgba(79, 56, 189, 0.66)',
            playerBackgroundColor: 'grey#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,
          },
        });

    ...