Skip to main content

Lining up multiple video's in a playlist

In this example we make a playlist that the player follows, in this case we set a playlist upfront but with a callback to your website, or with the integration of a few functions this snippet can "ask" the website for a new entry in the playlist when the viewer has arrived at the end of the last video.

I have chosen for a 2d array as the playlist, so we can save multiple attributes of the video's and customise the player even more, you can easily extend this to for example save poster images of the content to show in the overlay.

The overlay is an simple html div, you can change and style it every way you want, I have chosen for a simple "popup" design that shows the title of the next video. And of course a Next button that allows the user to skip the end of the current video, when this popup will appear is controlled by the 3rd variable in each entry in the playlist array.

Live Example#

The code#

<html>
<head>
<script src="//cdn.jet-stream.com/static/pp/2.1.1/privacy-player.min.js"></script>
</head>
<body>
<div style="width: 480px; height: 300px; position: relative">
<div id="video-wrapper" style="height: 300px; width: 480px"></div>
</div>
</body>
<script>
// the format is: url, title, seconds from end to start overlay
let playlist =[
["https://rrr.sz.xlcdn.com/?account=demo&file=tv.mp4&type=streaming&service=wowza&output=player&events=1&autostart=1", "Test Video", 10],
["https://rrr.sz.xlcdn.com/?account=25yearsstreaming&file=readysetrocknroll6.smil&type=streaming&service=wowza&output=player&events=1&autostart=1", "25 years of streaming", 60],
["https://rrr.sz.xlcdn.com/?account=demo&file=STERAD_P_621_38988.mp4&type=streaming&service=wowza&output=player&events=1&autostart=1", "test ad", 5]
]
// then we define the video wrapper and options as usual
let video_wrapper = document.querySelector("#video-wrapper")
let options = {
'theme': {
'controlBarText': '#FFFFFF',
'controlBarButtons': '#FFFFFF',
'progressBarBackground': 'rgba(244, 150, 150, .7)',
'progressBarLoaded':'#F49600',
'progressBarPlayed': '#F49600',
'volumeBarLevel' : '#F49600',
'progressBarPosition': '#FFFFFF',
'overlayText': '#FFFFFF',
'controlBarBackground': 'rgba( 0, 0, 0, .7)',
'volumeBarBackground' : 'rgba(0, 0, 0 , .7)'
}
}
// a simple function that will call the player with the index in de playlist given
function startPlayer(index){
player = new PrivacyPlayerPro(
playlist[index][0],
video_wrapper, true, true, options
);
}
// this function will be called when the user presses the button or the end of the video is reached, and will call a new player with the next url in the
function nextVideo(){
positionInPlaylist ++
if(positionInPlaylist > playlist.length -1){
positionInPlaylist = 0
}
startPlayer(positionInPlaylist)
}
// we start at the first position in the playlist and start the first player
let positionInPlaylist = 0
startPlayer(0)
// this is the callback that sends us the position of the viewer
player.position_callback = function (position) {
let secondsLeft = player.duration - position
// based on how many seconds are still left in the content we decide what to do, if there are more seconbds left then when the overlay needs to start(set in de playlist at the top) we do nothing
if(secondsLeft < playlist[positionInPlaylist][2]){
if(!playlist[positionInPlaylist + 1]){
// optionally Here you could get the next enrty in the playlist from the webiste when there is no next enrty
// playlist.push(getNextVideoFromWebsite)
// and push this onto the playlist array
}
// here we prepare the overlay and put it on top of the video
overlay = document.createElement("div")
overlay.style.cssText = "position: absolute; height: 10%; bottom: 15px; left: 15px; right: 15px; padding: 15px; border-radius: 5px; background-color: #F49600; color: white;"
overlay.innerHTML = "<h4 style='margin: 0px; display: inline'>Next up: " + playlist[positionInPlaylist +1 ][1] + "</h4>" + "<button style=\"float: right; background-color: #638FC0; border-radius: 5px; color: white; padding:10px 25px; position: absolute; top: 10px; right: 5px;\" type=\"button\" onclick=\"nextVideo()\" >Next("+Math.round(secondsLeft)+")</button>"
if(overlay){
overlay.remove()
}
player.addOverlay(overlay)
// and finnaly if the end of the video is reached we start tehe next video if the user did not already do this
if(secondsLeft < 1){
nextVideo()
}
}
}
</script>
</html>