Skip to content

Embed Plugin and Javascript API

EMBED OPTIONS AND PLUGIN

Embed Options are the attributes that will help make your video's behavior favorable to your viewer. For Instance, you can add a Full Screen Button to your video player by adding the boolean 'fullscreenbutton.

Embed Plugin is an essential part while generating an embed code as well for customizing the embeds. So what is it? Embed Plugin is basically a script that can be added to your video without changing the content. It can give you new functionalities and also help in adding new interfaces. For Instance, you can use an embed plugin that will add form to collect your viewers contact details.

HOW TO USE EMBED OPTIONS?

You can use embed options to add custom events that will override the default customizations that customData key.

<script> 
    function loader()
      {
        new Player
        (
          idElement="Animker_player_-S9HyHcBoARLA-5il5_9",
          userid = "xohdp61401",
          videoid = "14115bFqDiD9jtv0kRtWb",
          playerid = "Qy9IyHcBoARLA-5icqDi",
          mediaid = "-S9HyHcBoARLA-5il5_9",
          videoFlag = false,
          videoUrl = "",
          customData = {
            playerThemeStructure:{
                        mainPlayBtn: {bgColor: "#B3D547"}
                        progressBarFill: {bgColor: "#B3D547"}
                        }
          } 
        );
      }
  </script>
  <script onload="loader()"     src="https://static.getshow.io/play/app.bundle.js" type="text/javascript" async></script>
<section id="Animker_player_-S9HyHcBoARLA-5il5_9" style="height:360px;position:relative;width:640px"></section>

Now the question arises, What are the events that can be added?

AVAILABLE EVENT OPTIONS

The list of events in their syntax that are available for customization are 

autopauseEnabled: false
autoplayEnabled: false
clickForSound: true
Controls:{
    backgroundColor: "rgba(140,93,233,0.9)"
}
controlsVisibleOnLoad: true
defaultFullscreen: false
defaultLevel: "Auto"
defaultMute: false
downloadButtonVisibility: false
linkTypePopupText: "This is a popover link."
mainPlayButtonVisibility: true
pageControls: {
        comments: true
        likes: true
        message: true
        username: false
}
pageCustomization: {
title: "videoplayback.mp4"
}
passwordEnabled: false
playBarVisibility: true
player: {backgroundColor: "#000000"}
playerCustomShadowStyleVisibility: false
playerCustomShadowValues: {yVal: "2", blur: "10", xVal: "2"}
settingsButtonVisibility: true
shareIconVisibility: false
smallPlayButtonVisibility: true
thumbnailVisibility: true
videoAsPopUp: false
volumeButtonVisibility: true
autopauseEnabled If you set it to *true*, your video will be paused as soon as it loads.
autoplayEnabled If you set it to *true*, your video will play as soon as it loads. The autoplay feature will work in most conditions. Some devices and browsers might prevent the Autoplay feature.
clickForSound Set to *true* and the '**Click For Sound**' button will be visible.
backgroundColor: "rgba(140,93,233,0.9)" Change the whole background color by inserting hexadecimal rgb strings like “ff0000” (red), “000000” (black), “ffffff” (white), or “0000ff” (blue), etc.
controlsVisibleOnLoad Default setting is true where player controls will be visible as soon as the video is embedded.
defaultFullscreen Player will display in full screen if set to *true*.
defaultLevel Set to *true* and the default settings will be chosen.
defaultMute By setting this to *true*, your video will start playing silently, and '*click for sound'* button will not be visible.
downloadButtonVisibility Set to *true* and the download button will be visible.
linkTypePopupText Set to *true* and the video will display in new window/popup
mainPlayButtonVisibility By setting this to *true*, the big main *Play* button will be visible.
pageControls: comments Set this option to *true* and enable the comments section.
pageControls: likes Set this option to *true* and enable the likes feature.
pageControls: message Set this option to *true* and enable the message feature.
pageControls: username Set this option to *true* and make the volume button visible.
pageCustomization: title Allow changing of video landing page title by setting it to *true*.
passwordEnabled Enable password to play the video by setting it to *true*.
playBarVisibility Default setting is true where the play bar that includes the playhead, current time, etc. will be visible. If set to false, it will be invisible
player: \{backgroundColor: ""} Change the background color of the player here. Insert the hexadecimal rgb string like “ff0000” (red), “000000” (black), “ffffff” (white), or “0000ff” (blue), etc.
playerCustomShadowStyleVisibility This will create a shadow for the player if you set it to *true*.
playerCustomShadowValues: \{yVal: "2", blur: "10", xVal: "2"} Insert the shadow values you require in the x and y axes.
settingsButtonVisibility Set this option to *true* and make the settings button visible.
shareIconVisibility Set this option to *true* and make the Share icon visible.
smallPlayButtonVisibility Set this option to *true* and make the small play button visible.
thumbnailVisibility Set this option to *true* and make the thumbnail visible.
videoAsPopUp Make your video as a popup by setting it to *true*.
volumeButtonVisibility Set this option to *true* and make the volume button visible.