Using the Player API

Advanced player control is available via our Javascript API

Note: this documentation is for the current Viostream Player. For the previous version, see the legacy documentation

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 https://play.viostream.com, rather than included in a bundle or hosted yourself.

<script src="https://play.viostream.com/api/ACCOUNT_KEY"></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 }

$viostream.ready(handler)

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

<html>
<head>
    <title>Test page</title>
    <script src="https://play.viostream.com/api/VC-10000001"></script>
</head>
<body>
    <h1>Test page</h1>
    <div id="viostream-n1obizmdm965pc">
        <script>
            $viostream.ready(function () {
                $viostream.embed('n1obizmdm965pc', 'viostream-n1obizmdm965pc');
            })
        </script>
    </div>
</body>
</html>