Video in Preview – PiP with Javascript

by Posted on

Surely you have ever watched movies, programming tutorials, some porn videos or even a comedy in a small floating player in one of the corners of the window while interacting with other applications, reading an article or writing some code.

Well, this is known as Picture-In-Picture (PiP) in the programming world and let me tell you that it is a fairly common feature at the level of platforms and operating systems both mobile and desktop that is currently being widely used to view amateur porno discreetly. Its function is none other than to allow the user to watch videos in a floating window on their device so as not to miss anything while performing other tasks on the device.

How is this implemented?

So far there are many extensions for browsers like Google Chrome and Safari, however, here we are programmers and we like to do things on our own right? So let’s go through the step by step of what to do to implement it:

  • The first thing we must have is a video component in our project and set an ID for future reference:
video src="video/videospornoamateur.mp4" controls id="thevideo"/video
  • We also have to check if our browser is compatible with the functionality and we will do that with the following code:
function pictureInpictureCompatible(video){
if( document.pictureInPictureEnabled && !video.disablePictureInPicture ) { 
return true;
}
return false;
}
  • It is time to continue with the function to enter PiP mode:
function entrerModoPiP(video) {

if( document.pictureInPictureEnabled && !video.disablePictureInPicture) {
try {

if (document.pictureInPictureElement) {

document.exitPictureInPicture();

}

video.requestPictureInPicture();

}catch(err) {

console.error(err);

}

}

}
  • Almost at the end, we only need to add the function to exit PiP mode:
function exitModoPiP(){

document.exitPictureInPicture();

}
  • To finish we just make the calls when we finish loading our web project and it should look like this:
var video = document.getElementById("thevideo");

if( pictureInpictureCompatible(video) ){

//

jQuery("#entrerModoPiP").on("click",function(){

entrerModoPiP(video);

});

//

jQuery("#exitModoPiP").on("click",function(){

exitModoPiP();

});

}else{

console.log("Picture In Picture no set");

}

With all this you should have your PiP functionality working in our web project. So please, If you find this information useful don’t forget to share it in your social networks… It will be a pleasure to help others with everything related to the world of programming.

Hope to see you soon!