Spotlightr API opens up below defined set of methods and events you can use to:

  • Send commands and data to the video player from your web page.

  • Listen to events in the player from the web page and react.

To learn more about the available functions methods and callbacks please refer to the API documentation.

<div className="padding-30">
<form id="voo-video-upload" method="post" encType="multipart/form-data">
<input id="voo-video-upload-input" type="file" name="files[]" multiple/>
<input type="submit" value="Upload Video" name="submit"/>
</form>
</div>
<script>
window.addEventListener('DOMContentLoaded', () => {
const url = 'https://api.vooplayer.com/api/createVideo';
const form = document.getElementById('voo-video-upload');
form.addEventListener('submit', (e) => {
e.preventDefault();
const files = document.getElementById('voo-video-upload-input').files;
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
let file = files[i];
formData.append('files[]', file);
}
formData.append('vooKey', 'INSERT YOUR API KEY HERE');
formData.append('name', 'Upload from API');
formData.append('customS3', '0');
formData.append('create', 1);
formData.append('file', files[0]);
fetch(url, {
method: 'POST',
body: formData,
}).then((response) => {
console.log(response);
})
});
});
</script>
  • Another example - when the video reaches a certain time, I want a section of the page to appear beneath it with an offer.

https://jsfiddle.net/petarsubotic/u9zprL21/

<script src="https://convertview.cdn.spotlightr.com/assets/spotlightr.js"></script><iframe allow="autoplay" class="video-player-container spotlightr" data-playerid="MTA5ODEyMw==" allowtransparency="true" style="max-width:100%" name="videoPlayerframe" allowfullscreen="true" src="https://convertview.cdn.spotlightr.com/watch/MTA5ODEyMw==" watch-type="" url-params="" frameborder="0" scrolling="no"> </iframe>

<div id="hidden" style="display: none; background:yellow; font-size:3em"> this is hidden until second 3</div>


<script>
document.addEventListener('vooPlayerReady', vooPlayerReady, false);
function vooPlayerReady(event){
vooAPI("MTA5ODEyMw==", 'getTime', ['3'], getTime);
}
function getTime(time){
console.log("[vp]getTime",time);
document.querySelector("#hidden").style.display = "block";

}
</script>

Did this answer your question?