JavaScript Custom Video Player

This JavaScript code snippet helps you to create a custom HTML5 video player on the webpage. It offers different modes, such as Playlist and Normal, for flexible playback. You can even enable a Mini Player, adjust button visibility, and scroll to the Mini Player.

Moreover, the video player also supports version updates and playlist management.

How to Create JavaScript Custom Video Player

1. First of all, load the Playervid JS by adding the following CDN link into the head tag of your HTML document.

<script src="https://fcasfs-official.zohosites.com/playervid.js"></script>

2. After that, create a div element with an id "pl-vide" in which the video player will be rendered.

<div id="pl-vide"></div>

3. If you want to customize the video player, you can define the CSS style for it. (Optional)

#pl-vide{
   /* Your CSS Styles */
}

4. In the JavaScript code, you’ll find an array named rbd_playlisttbl. This array contains video information, including the file URL, title, and poster image URL. Customize this array by adding your video data. Each object in the array represents a video.

var rbd_playlisttbl = [
{"file":"https://raw.githubusercontent.com/fcasfs-oficial-website/Fcas_FS/master/Rebelde Video 26.mp4","title":"Rebelde Vídeo Clipe","poster":"https://raw.githubusercontent.com/FCASfs/server/master/rebelde-poster.jpg"},
{"file":"https://raw.githubusercontent.com/fcasfs-oficial-website/Fcas_FS/master/RBD - Nuestro Amor (CD Completo).mp3","title":"RBD - Nuestro Amor (CD Completo)","poster":"https://raw.githubusercontent.com/FCASfs/server/master/rbd_1.jpg"},
{"file":"https://raw.githubusercontent.com/fcasfs-oficial-website/Fcas_FS/master/RBD - Rebelde (CD Completo - Version Mexicana).mp3","title":"RBD - Rebelde (CD Completo - Version Mexicana)","poster":"https://raw.githubusercontent.com/FCASfs/server/master/rbd_1.jpg"},
]; 


function mdpl_handleFileSelect(evt) {    playevid_setmode_file("pl-vide", create_mdpl_file(evt).create_url(0), create_mdpl_file(evt).get_name(0));           }


function playevid_setmode_file(ob, f,t){
set_player_IconsColor("#1874CD");

set_file_videoplayer(ob,f, t, "","", "", "", "true");
set_player_settings().size(ob, "80%");   set_player_settings().position.center(ob);   set_player_settings().version_update();
  

/*set_icon_controls("");*/

var app_plconfig_playlist={ search:false, autoplay:false };
var app_plconfig = { Playlist:app_plconfig_playlist, Controls:true, Title:true };
var controls_settings_buttons = { Icon:true, Speed_Control:true, Stop:true, Download:false };
set_player_controls_settings(controls_settings_buttons);
set_player_config(app_plconfig);  set_player_settings().Button_Light(true);
}
function playevid_setmode_normal(ob){
var app_plconfig_playlist={ autoplay:false };
var app_plconfig = { Playlist:app_plconfig_playlist,Controls:true, Title:true };
var controls_settings_buttons = { Icon:true, Speed_Control:true, Stop:true, Download:false };
set_player_IconsColor("#1874CD");   
  
set_file_videoplayer(ob,"https://raw.githubusercontent.com/fcasfs-oficial-website/Fcas_FS/master/Rebelde Video 26.mp4", "Rebelde Vídeo Clipe", "","", "", "https://raw.githubusercontent.com/FCASfs/server/master/rebelde-poster.jpg", "true");
  set_icon_controls("https://raw.githubusercontent.com/FCASfs/server/master/Rebelde_logo.png");
set_player_settings().size("pl-vide", "80%");   set_player_settings().position.center("pl-vide");  set_player_settings().version_update();
set_player_settings().Button_Light(true);
set_player_controls_settings(controls_settings_buttons);   set_player_config(app_plconfig);  
}


function playevid_setmode_plalist(ob){
var app_plconfig_playlist={ search:true, autoplay:false };
var app_plconfig = { Playlist:app_plconfig_playlist,Controls:true, Title:true };
var controls_settings_buttons = { Icon:true, Speed_Control:true, Stop:true, Download:false };
set_player_IconsColor("#1874CD");   
  
set_playlist_videoplayer("pl-vide", rbd_playlisttbl,"");  
  set_icon_controls("https://raw.githubusercontent.com/FCASfs/server/master/Rebelde_logo.png");
  set_player_settings().size("pl-vide", "80%");   set_player_settings().position.center("pl-vide");  set_player_settings().version_update();
set_player_settings().Button_Light(true);
set_player_controls_settings(controls_settings_buttons);   set_player_config(app_plconfig);  
}


  document.getElementById('inp_sle').onchange=function(){  mdpl_handleFileSelect(this);  };

playevid_setmode_plalist("pl-vide");

At the end of the code, you’ll find the line playevid_setmode_plalist("pl-vide");. This line initializes the player in “Playlist” mode with the container element specified as "pl-vide". You can change this mode or container ID according to your preferences.

That’s it! Hopefully, you’ve successfully created a custom video player for your website using JavaScript. You can further enhance and customize the player by exploring the provided functions and making adjustments as needed. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.