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>
