Embed Plugin and Javascript API

Learn about the embed plugins 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.