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.
To allow users to upload videos to your account, this example might be helpful:
https://jsfiddle.net/petarsubotic/8hpz2djx/
<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>