Using the Player API

Viostream's Player API allows you to dynamically embed videos onto a web page using Javascript. This is an advanced featured intended for developers who want to build an interactive experience around the Viostream Player.

Include the Javascript

Include the Viostream script on each page of your website where you want to load video — it should always be loaded directly from https://play.viostream.com, rather than included in a bundle or hosted yourself. Replace ACCOUNT_KEY with your account key in the link below.

<script src="https://play.viostream.com/api/ACCOUNT_KEY"></script>

note

If you don't provide the correct account key, many features may not work, or may behave unpredictably.

API Documentation

Ready

Use $viostream.ready(handler) to delay execution of a function until after the DOM is ready for Viostream to modify.

Parameter	Type	Description
handler	function	A function to execute once the DOM is ready for Viostream to modify

Example

<script>
  $viostream.ready(function () {
    console.info("DOM is ready");
  });
</script>

Embed

Use $viostream.embed(publicKey, target, options?) to embed a video inside the target element in the DOM.

Parameter	Type	Description
publicKey	string	The public key of the Media Asset you wish to embed.
target	string	The id of the container (e.g. <div>) into which you wish to place the Player.
options	object	Player settings object. This can be used to specify the Player key, and to override any of the supported player settings.
options.audioOnlyPlayer	bool	Render a slim audio-only player.
options.chapters	bool	Override the player's chapter display default.
options.chapterDisplayType	string	Override the player's chapter display type. dropdown, progressbar or horizontal.
options.chapterSlug	string	Seek to a chapter point before playing.
options.displayTitle	bool	Override the player's display title default.
options.hlsQualitySelector	bool	Override the player's HLS quality selector default.
options.playerKey	string	Specify a player to use.
options.sharing	bool	Override the player's sharing default.
options.speedSelector	bool	Override the player's speed selector default.
options.startEndTimespan	string	Play a specific section of a video.
options.startTime	string	Seek to a point in the video before playing.
options.transcriptDownload	bool	Override the player's transcript download default.

Example

<div id="my-video-div" />
<script>
  $viostream.ready(function () {
    $viostream.embed("nhedxonrxsyfee", "my-video-div", {
      chapterSlug: "chapter-1",
      displayTitle: true,
      hlsQualitySelector: true,
      sharing: true,
      speedSelector: true,
      transcriptDownload: true,
    });
  });
</script>