JavaScript Custom Video Player

JavaScript Custom Video Player
Code Snippet:Video PLAYER
Author: ycpro
Published: January 20, 2024
Last Updated: January 22, 2024
Downloads: 835
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X