Many a times, video streaming sites look to autoplay the video through the video player as soon as the page is loaded. Also, you may wish to loop the media in the video player and present the content again and again to the same viewer. It is generally desired that the bandwidth does not get consumed again on the same page when a video is repeated.
Some of you may want to hide player skin or use custom colors and controls for the video player. Certain times, you will need to get total time viewed by each viewer for each video to put certain restrictions on the user.
VdoCipher along with secure video streaming aims to give a complete suite to our customers to make a custom player. Here are the details for the following functionalities. Do check our embed api first to see how to embed videos.
-
Autoplay in video player
Here is the code –
window.onVdoCipherAPIReady = function(){
var videos = vdo.getObjects(); // use global variable vdo to query
var video = videos[videos.length - 1];
video.addEventListener('loaded', function(){
video.start(); // set video to autoplay
});
}
Just add this to your HTML will cause the video to autoplay
-
Loop Video in player – Replay the video when it reaches end
window.onVdoCipherAPIReady = function(){
var videos = vdo.getObjects(); // use global variable vdo to query
var video = videos[videos.length - 1];
video.addEventListener('end', function(){
video.seek(0);
});
}
-
Time Calculation per video playback
<div id="vdo<?= $OTP ?>" style="height: 300px; width: 520px;"></div>
<input type="text" id="totalPlayed" value="" />
/// this is the embed code
<script>
(function(v,i,d,e,o){v[o]={}; v[o].a = v[o].a || function V(a){ (v[o].d=v[o].d||[]).push(a);};
if(!v[o].l) { v[o].l=1*new Date(); a=i.createElement(d), m=i.getElementsByTagName(d)[0];
a.async=1; a.src=e; m.parentNode.insertBefore(a,m);}
})(window,document,'script','//de122v0opjemw.cloudfront.net/vdo.js','vdo');
vdo.a({
o: "<?= $OTP ?>",
});
</script>
/// this is the script
<script>
function onVdoCipherAPIReady(){
console.log("VdoCipher API init");
var videoObjects = vdo.getObjects();
var video_ = videoObjects[0];
video_.addEventListener("ready", function(data){
console.log("ready event called" , data);
});
video_.addEventListener("progress", function(data){
document.getElementById('totalPlayed').value = data.totalPlayed;
});
}
</script>
Note: Make sure you are using the latest embed script in your code as described at https://www.vdocipher.com/page/api.curl
4. Some useful player events to capture
Returns the complete list of vdocipher videos ever loaded on page
var videoObjects = vdo.getObjects();
Go the proper index. In most cases, the last embedded video is required
var video_ = videoObjects[videoObjects.length -1];
Pause and Resume
video_.pause() // pause
video_.resume() // resume
Listening to events:
To get the start of a video –
var videos = window.vdo.getObjects();
var video = videos[videos.length - 1]; // use the last added video
video.addEventListener('start', function() {
console.log('video has started');
})
Similarly. replace ‘start’ in the above code for the below events for –
- “end”
- “start”
- “resume”
- “pause”
- “mute”
- “unmute”
- “changeVolume”
5. Custom Video Player – Beta Feature
This is the link to custom video player – the colors, controls, themes, call to actions on the video player all can be customized.
https://www.vdocipher.com/page/mpml
https://www.vdocipher.com/files/c58f5a32961/demo/
For a free full version 5GB secure video streaming, custom video player trial, Sign up at VdoCipher.
Custom Video Player – Autoplay, Loop video
