Using the Player API

Advanced player control is available via our Javascript API

Viostream’s Player API allows you to dynamically embed videos onto a web page using Javascript.

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, rather than included in a bundle or hosted yourself.

<script src=""></script>

Replace ACCOUNT_KEY with your account key. It is important you provide this, as many features will not work, or behave unpredictably without it.

$viostream.embed(publicKey, target?, options?)

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

$viostream.embed Method parameters

publicKey required string

The public key of the Media Asset or Channel you wish to embed.

target required string

The id of the container (e.g. <div>) into which you wish to place the Player.

options optional object

Player settings object. This can be used to specify the Player key, and to override any of the supported player settings:

Setting Type Description Example
audioOnlyPlayer bool Render a slim audio-only player { audioOnlyPlayer: true }
chapters bool Override the player’s chapter display default { chapters: true }
chapterDisplayType string Override the player’s chapter display type. dropdown, progressbar or horizontal { chapterDisplayType: 'dropdown' }
chapterSlug string Seek to a chapter point before playing { chapterSlug: 'keynote' }
displayTitle bool Override the player’s display title default { displayTitle: true }
hlsQualitySelector bool Override the player’s HLS quality selector default { hlsQualitySelector: true }
playerKey string Specify a player to use { playerKey: 's-0m3p14y3r' }
sharing bool Override the player’s sharing default { sharing: true }
speedSelector bool Override the player’s speed selector default { speedSelector: true }
startEndTimespan string Play a specific section of a video { startEndTimespan: '65-75s' }
startTime string Seek to a point in the video before playing { startTime: '30s' }
transcriptDownload bool Override the player’s transcript download default { transcriptDownload: true }


Use $viostream.ready(handler) to delay execution of a function until after the DOM has finished loading.

$viostream.ready Method parameters

handler required function

A function to execute after the DOM has loaded.

Example usage

    <title>Test page</title>
    <script src=""></script>
    <h1>Test page</h1>
    <div id="viostream-n1obizmdm965pc">
            $viostream.ready(function () {
                $viostream.embed('n1obizmdm965pc', 'viostream-n1obizmdm965pc');

Getting Started
Your Library
Managing Media
Embedding Your Media
Media Players
Managing Your Account
Managing Events
Technical Information