Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 11 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

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


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,
      },
    });
  • No labels