Skip to main content

Autoplay example

Adding autoplay to your content can me really useful to make your page more attractive, to enable autoplay click the autoplay box in the VDO-X publish menu, your link will sligtly change and now autoplay is enabled, it really is as easy as that.

You can also add &autostart=1 to the end of your content link when you are using the ProPlayer to enable autoplay.

Live Example#

The code#

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- First we load the SDK -->
<script type='text/javascript' src="//cdn.jet-stream.com/static/pp/2.1.0/privacy-player.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<style>
html, body {
background: none transparent;
}
</style>
</head>
<body>
<!-- then we make a div to put the player into-->
<div style="height: 300px; width: 480px; position: relative; ">
<div id="video-wrapper" style="height: 300px; width: 400px; "></div>
</div>
<!-- Then we make a div with our 2 buttons -->
<div style=" width: 480px; text-align: center">
<button class="btn btn-primary" onclick="player.play()">Play</button>
<button class="btn btn-primary" onclick="player.pause()">Pause</button>
<button class="btn btn-primary" onclick="player.">Unmute</button>
</div>
</body>
<script type="text/javascript">
// in out script tag we make the wrapper and declare the player so that we have something we can controll with all te functions
let video_wrapper = document.querySelector("#video-wrapper")
options = {
'VAST_url': "https://docs.jet-stream.com/docs/privacy-player/examples/vast.xml"
}
options = null;
let player = new PrivacyPlayerPro(
// this is the link to your content
// for autoplay we simply add &autostart=1 to the end of the link
"https://rrr.sz.xlcdn.com/?account=jetstreammanual&file=readysetrocknroll6.smil&type=streaming&service=wowza&sub=readysetrocknroll6_EN.vtt,readysetrocknroll6_NL.vtt&output=player&events=1&autostart=1",
video_wrapper, true, true, options
)
//now when the player.ready_callback is called we want to hide the controlbar, set the video to start playing at 0 seconds and finally enable a station logo overplay.
player.ready_callback = function () {
player.control_bar.hide()
}
</script>
</html>