Stellar Video Player

jQuery plugin


Thank you for purchasing our item. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact form on CodeCanyon. Thanks so much! CreativeMedia team

This is pure HTML5 video player that plays videos from:

- YouTube,

Vimeo,

- self hosted videos (mp4),

- Google Drive video,

- Amazon S3 video,

- local videos,

- Dropbox video,

- LiveStreaming HLS m3u8 videos,

with optional pre-roll,  mid-roll, post-roll and pop-up advertising system for each video you create.

Player can be used with playlist (with unlimited videos) , or as single video player.

Inside the download zip from CodeCanyon you'll find the following structure:



deploy - containes "minified" versions of all scripts (js/css). This means the scripts/css files have been compressed so they load faster. These files will be used for your production website.

documentation - containes documentation files

source - containes original versions of all scripts (js/css).Identical to "deploy" folder except nothing is minified. If you wish to change css and javascript files use this folder. After making changes, for faster loading you can minify the CSS/JS files by using the following tools:

JS: http://closure-compiler.appspot.com/home
CSS: http://refresh-sf.com/

 

Open index.html file from the "deploy" folder with some text editor ( Notepad++, or Atom).

Video player only needs few lines of code to get started:

$(document).ready(function($)
{
    videoPlayer = $("#Stellar_video_player").Video();
});

But you can also override the default settings by passing the arguments.

Below is example of calling the plugin with explanation of arguments (all plugin options) and added 1 video to the playlist:

$(document).ready(function($)
{
videoPlayer = $("#Stellar_video_player").Video({               <!-- ALL PLUGIN OPTIONS -->
<!-- GLOBAL SETTINGS -->
instanceName:"player1",                                        //name of the player instance (for multiple players per page change this name)
instanceTheme:"dark",                                          //choose video player theme: "dark", "light"
playerLayout: "fixedSize",                                     //Select player layout: "fitToContainer" (responsive mode), "fixedSize" (fixed size on page load,responsive on resize), "fitToBrowser" (fill the browser window)
playerOrientation:"LTR",                                       //adjust player text orientation: "LTR", "RTL" (left to right or right to left for eastern countries)
autohideControls:5,                                            //autohide controls
hideControlsOnMouseOut:false,                                  //hide controls on mouse out of the player: true, false
videoPlayerWidth:768,                                          //fixed total player width (only for playerLayout: "fixedSize")
videoPlayerHeight:432,                                         //fixed total player height (only for playerLayout: "fixedSize")
videoRatio: 16/9,                                              //set any video ratio (calculate video width/video height)
videoRatioStretch: false,                                      //adjust video ratio for case when playlist is "opened" : true/false
iOSPlaysinline: true,                                          //on iOS device: play videos inline (like on desktop) or in Fullscreen by default: true/false
autoplay:false,                                                //autoplay when webpage loads: true/false
colorAccent:"#ff0000",                                         //plugin colors accent (hexadecimal or RGB value - http://www.colorpicker.com/)
videoAnimationTime: 350,                                       //video transition animation when using show/hide playlist [miliseconds], 0-instant animation, larger number will increase animation time
playSpecificVideo: 0,                                          //load and play specific video from playlist on page load [0-first video, 1-second video...]
progressBarThickness: 3,                                       //adjust progress bar height [px]
progressBarThicknessOnMouseover: 6,                            //adjust video progress bar height on mouse over [px]
tooltipFontSize:12,                                            //adjust tooltip font size
videoPlayerShadow:"effect1",                                   //choose player shadow:  "effect1" , "effect2", "effect3", "effect4", "effect5", "effect6", "off"
loadRandomVideoOnStart:false,                                  //choose to load random video when webpage loads: true, false
shuffle:false,                                                 //choose to shuffle videos when playing one after another: true, false (shuffle button enabled/disabled on start)
posterImg:"assets/images/poster.jpg",                          //player poster image
posterImgOnVideoFinish:"assets/images/poster2.jpg",            //player poster image on video finish (works if enabled onFinish:"Stop video")
onFinish:"Play next video",                                    //"Play next video","Restart video", "Stop video",
nowPlayingText:true,                                           //enable disable now playing title: true, false
showAllControls:true,                                          //enable/disable all player controls: true/false
allowSkipAd:true,                                              //enable/disable "Skip advertisement" option: true/false
infoShow:true,                                                 //enable/disable info option: true, false
nextShow:true,                                                 //enable/disable next video option: true, false
rewindShow:true,                                               //enable/disable rewind video option: true, false
qualityShow:true,                                              //enable/disable rewind video option: true, false
fastForwardShow:true,                                          //enable/disable fast forwarding video option: true, false
fastBackwardShow:true,                                         //enable/disable fast backwarding video option: true, false
stepFastForwardAndBackward: 5,                                 //step for how much player will fast forward and fast backward (seconds)
<!-- LIGHTBOX SETTINGS -->
lightBox:false,                                                //lightbox mode :true/false
lightBoxAutoplay: false,                                       //autoplay when lightbox opens: true/false
lightBoxThumbnail:"assets/images/poster.jpg",                  //lightbox thumbnail image
lightBoxThumbnailWidth: 400,                                   //lightbox thumbnail image width
lightBoxThumbnailHeight: 220,                                  //lightbox thumbnail image height
lightBoxCloseOnOutsideClick: true,                             //close lightbox when clicked outside of player area
<!-- PLAYLIST SETTINGS -->
playlist:"Right playlist",                                     //choose playlist type: "Right playlist", "Bottom playlist", "Off"
playlistScrollType:"inset",                                    //choose scrollbar type: "light","minimal","light-2","light-3","light-thick","light-thin","inset","inset-2","inset-3","rounded","rounded-dots","3d","dark","minimal-dark","dark-2","dark-3","dark-thick","dark-thin","inset-dark","inset-2-dark","inset-3-dark","rounded-dark","rounded-dots-dark","3d-dark","3d-thick-dark"
playlistBehaviourOnPageload:"opened (default)",                //choose playlist behaviour when webpage loads: "closed", "opened (default)" (not apply to Vimeo player) 
<!-- VIMEO PLAYER SETTINGS -->
vimeoColor:"00adef",                                           //set "hexadecimal value", default vimeo color is "00adef"
<!-- YOUTUBE SETTINGS -->
youtubeControls:"custom controls",                             //choose youtube player controls: "custom controls", "default controls"
youtubeSkin:"dark",                                            //default youtube controls theme: light, dark
youtubeColor:"red",                                            //default youtube controls bar color: red, white
youtubeQuality:"default",                                      //choose youtube quality: "small", "medium", "large", "hd720", "hd1080", "highres", "default"
youtubeShowRelatedVideos:true,                                 //choose to show youtube related videos when video finish: true, false (onFinish:"Stop video" needs to be enabled)
<!-- HTML5 SELF HOSTED VIDEOS SETTINGS -->
HTML5VideoQuality:"HD",                                        //choose HTML5 video quality (HD, SD)
preloadSelfHosted:"none",                                      //choose preload buffer for self hosted mp4 videos (video type HTML5): "none", "auto"
rightClickMenu:true,                                           //enable/disable right click over HTML5 player: true/false
hideVideoSource:false,                                         //option to hide self hosted video 'src' attribute from <video> tag (to prevent users from download/steal your videos): true/false
<!-- SHARE SETTINGS  -->
shareShow:true,                                                //enable/disable complete share options (facebook/twitter/googlePlus): true, false
facebookShow:true,                                             //enable/disable facebook option individually: true, false
twitterShow:true,                                              //enable/disable twitter option individually: true, false
googlePlusShow:true,                                           //enable/disable googlePlus option individually: true, false
facebookShareName:"Stellar video player",                      //first parametar of facebook share in facebook feed dialog is title
facebookShareLink:"http://codecanyon.net/",                    //second parametar of facebook share in facebook feed dialog is link below title
facebookShareDescription:"Stellar Video Player is stunning, modern, responsive, fully customisable high-end video player for WordPress that support advertising and the most popular video platforms like YouTube, Vimeo or self-hosting videos (mp4).",  //third parametar of facebook share in facebook feed dialog is description below link
facebookSharePicture:"https://0.s3.envato.com/files/123866118/preview.jpg", //fourth parametar in facebook feed dialog is picture on left side
twitterText:"Stellar video player",                            //first parametar of twitter share in twitter feed dialog is text
twitterLink:"http://codecanyon.net/",                          //second parametar of twitter share in twitter feed dialog is link
twitterHashtags:"wordpressvideoplayer",                        //third parametar of twitter share in twitter feed dialog is hashtag
twitterVia:"Creative media",                                   //fourth parametar of twitter share in twitter feed dialog is via (@)
googlePlus:"http://codecanyon.net/",                           //share link over Google +
<!-- LOGO SETTINGS  -->
logoShow:true,                                                 //true, false
logoClickable:true,                                            //true, false
logoPath:"assets/images/logo.png",                             //logo image url
logoGoToLink:"http://codecanyon.net/",                         //redirect to specific page when logo clicked
logoPosition:"bottom-left",                                    //choose logo position: "bottom-right","bottom-left"
<!-- EMBED SETTINGS  -->
embedShow:true,                                                //enable/disable embed option: true, false
embedCodeSrc:"www.yourwebsite.com/videoplayer/index.html",     //path to your jQuery version of video player on server
embedShareLink:"www.yourwebsite.com/videoplayer/index.html",   //direct link to your site (or any other URL) you want to be "shared"
<!-- GLOBAL PREROLL ADS SETTINGS  -->
showGlobalPrerollAds: false,                                   //enable/disable 'global' ads and overwrite each individual ad in 'videos' :true/false
globalPrerollAds: "url1;url2;url3;url4;url5",                  //set 'pool' of url's that are separated by ; (global prerolls will play randomly)
globalPrerollAdsSkipTimer: 5,                                  //skip global advertisement seconds
globalPrerollAdsGotoLink: "http://codecanyon.net/",            //global advertisement goto link
<!-- TRANSLATE TEXTS TO YOUR LANGUAGE  -->                     //translate all texts to any language
advertisementTitle:"Advertisement",                    
skipAdvertisementText:"Skip advertisement",
skipAdText:"You can skip this ad in",
playBtnTooltipTxt:"Play",            
pauseBtnTooltipTxt:"Pause",          
rewindBtnTooltipTxt:"Rewind",        
downloadVideoBtnTooltipTxt:"Download video",
qualityBtnOpenedTooltipTxt:"Close quality",
qualityBtnClosedTooltipTxt:"Select quality",
muteBtnTooltipTxt:"Mute",            
unmuteBtnTooltipTxt:"Unmute",        
fullscreenBtnTooltipTxt:"Fullscreen",
exitFullscreenBtnTooltipTxt:"Exit fullscreen",
infoBtnTooltipTxt:"Show info", 
embedBtnTooltipTxt:"Embed",          
shareBtnTooltipTxt:"Share",       
volumeTooltipTxt:"Volume",
fastForwardBtnTooltipTxt:"Fast forward", 
fastBackwardBtnTooltipTxt:"Fast backward",            
playlistBtnClosedTooltipTxt:"Show playlist",
playlistBtnOpenedTooltipTxt:"Hide playlist",
facebookBtnTooltipTxt:"Share on Facebook",
twitterBtnTooltipTxt:"Share on Twitter",
googlePlusBtnTooltipTxt:"Share on Google+",
nextBtnTooltipTxt:"Next video",     
previousBtnTooltipTxt:"Previous video",
playlistSearchText: "Search for video...",
nextVideoInPlaylistText: "UP NEXT",  
autoplayNextVideoInPlaylistOn: "Autoplay next video on",
autoplayNextVideoInPlaylistOff: "Autoplay next video off",
countVideos: "of",
shuffleBtnOnTooltipTxt:"Shuffle on", 
shuffleBtnOffTooltipTxt:"Shuffle off",
embedWindowTitle2:"EMBED PLAYER IN YOUR SITE:",
embedWindowTitle3:"SHARE CURRENT VIDEO:",
copyTxt:"Copy",
copiedTxt:"Copied!",
<!-- AUTOMATIC YOUTUBE PLAYLIST/CHANNEL SETTINGS  -->
youtubePlaylistID:"",                                                             //automatic youtube playlist ID (leave blank "" if you want to use manual playlist) PLuFX50GllfgP_mecAi4LV7cYva-WLVnaM
youtubeChannelID:"",                                                              //automatic youtube channel ID (leave blank "" if you want to use manual playlist) UCHqaLr9a9M7g9QN6xem9HcQ

<!-- MANUAL PLAYLIST -->
videos:[
{
videoType:"youtube",                                                              //choose video type: "HTML5", "youtube", "vimeo", "image"
title:"Youtube video",                                                            //video title
youtubeID:"Ts2vpJpoLoc",                                                          //last part if the URL https://www.youtube.com/watch?v=0dJO0HyE8xE
youtubeIDStartSeconds: "",                                                        //specifies the time from which the video should start
youtubeIDEndSeconds: "",                                                          //specifies the time when the video should stop playing
vimeoID:"119641053",                                                              //last part of the URL http://vimeo.com/119641053
//mp4HD:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",           //HTML5 video HD mp4 url
mp4HD:"assets/videos/Short_Elegant_Logo_Reveal.mp4",                              //HTML5 video HD mp4 url
//mp4SD:"http://creativeinteractivemedia.com/player/videos/PiecesSD.mp4",         //HTML5 video SD mp4 url
mp4SD:"assets/videos/Short_Elegant_Logo_Reveal.mp4",                              //HTML5 video SD mp4 url
enable_mp4_download:false,                                                        //enable download button for self hosted videos: true, false
imageUrl:"assets/images/poster2.jpg",                                             //display image instead of playing video
imageTimer:4,    //set time how long image will display
prerollAD:false,                                                                  //show pre-roll true, false
prerollGotoLink:"http://codecanyon.net/",                                         //pre-roll goto link
preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",   //pre-roll video mp4 format
prerollSkipTimer:5,
midrollAD:false,                                                                  //show mid-roll true, false
midrollAD_displayTime:"00:10",                                                    //show mid-roll at any custom time in format "minutes:seconds" ("00:00")
midrollGotoLink:"http://codecanyon.net/",                                         //mid-roll goto link
midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4", //mid-roll video mp4 format
midrollSkipTimer:5, 
postrollAD:false,                                                                 //show post-roll true, false
postrollGotoLink:"http://codecanyon.net/",                                        //post-roll goto link
postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4",  //post-roll video mp4 format
postrollSkipTimer:5,
popupImg:"assets/images/popup.jpg",                                               //popup image URL
popupAdShow:false,                                                                //enable/disable popup image: true, false
popupAdStartTime:"00:03",                                                         //time to show popup ad during playback
popupAdEndTime:"00:07",                                                           //time to hide popup ad during playback
popupAdGoToLink:"http://codecanyon.net/",                                         //re-direct to URL when popup ad clicked
description:"Video description goes here.",                                       //video description
thumbImg:"assets/images/pic1.jpg",                                                //set "auto" or leave blank "" to grab it automatically from youtube, or set your own thumbnail url
info:"Video info goes here.<br>This text can be <i>HTML formatted</i>, <a href='http://codecanyon.net/user/_zac_' target='_blank'><font color='008BFF'>find out more</font></a>.<br>You can disable this info window in player options. <br><br>Lorem ipsum dolor sit amet, eu pri dolores theophrastus. Posidonium vituperatoribus cu mel, cum feugiat nostrum sapientem ne. Vis ea summo persius, unum velit erant in eos, pri ut suas iriure euripidis. Ad augue expetendis sea. Ne usu saperet appetere honestatis, ne qui nulla debitis sententiae."                                                                                    //video info
}
]
});
});
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Stellar Video Player"/>
<meta property="og:title" content="Stellar Video Player by _CreativeMedia_"/>
<meta property="og:image" content="http://creativeinteractivemedia.com/player/imgFB/stellar.png"/>
<link rel="stylesheet" href="css/stellar.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/stellar-font-awesome.css" type="text/css">
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="js/froogaloop.js" type="text/javascript"></script>
<script src="js/jquery.mCustomScrollbar.js" type="text/javascript"></script>
<script src="js/videoPlayer.js" type="text/javascript"></script>
<script src="js/Playlist.js" type="text/javascript"></script>
<script src="js/iphone-inline-video.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function($)

{
videoPlayer = $("#Stellar_video_player").Video({                       <!-- ALL PLUGIN OPTIONS -->
<!-- GLOBAL SETTINGS -->
instanceName:"player1",                                        //name of the player instance (for multiple players per page change this name)
instanceTheme:"dark",                                          //choose video player theme: "dark", "light"
playerLayout: "fixedSize",                                     //Select player layout: "fitToContainer" (responsive mode), "fixedSize" (fixed size on page load,responsive on resize), "fitToBrowser" (fill the browser window)
playerOrientation:"LTR",                                       //adjust player text orientation: "LTR", "RTL" (left to right or right to left for eastern countries)
autohideControls:5,                                            //autohide controls
hideControlsOnMouseOut:false,                                  //hide controls on mouse out of the player: true, false
videoPlayerWidth:768,                                          //fixed total player width (only for playerLayout: "fixedSize")
videoPlayerHeight:432,                                         //fixed total player height (only for playerLayout: "fixedSize")
videoRatioStretch: false,                                      //adjust video ratio for case when playlist is "opened" : true/false
iOSPlaysinline: true,                                          //on iOS device: play videos inline (like on desktop) or in Fullscreen by default: true/false
videoRatio: 16/9,                                              //set any video ratio (calculate video width/video height)
autoplay:false,                                                //autoplay when webpage loads: true/false
colorAccent:"#ff0000",                                         //plugin colors accent (hexadecimal or RGB value - http://www.colorpicker.com/)
videoAnimationTime: 350,                                       //video transition animation when using show/hide playlist [miliseconds], 0-instant animation, larger number will increase animation time
playSpecificVideo: 0,                                          //load and play specific video from playlist on page load [0-first video, 1-second video...]
progressBarThickness: 3,                                       //adjust progress bar height [px]
progressBarThicknessOnMouseover: 6,                            //adjust video progress bar height on mouse over [px]
tooltipFontSize:12,                                            //adjust tooltip font size
videoPlayerShadow:"effect1",                                   //choose player shadow:  "effect1" , "effect2", "effect3", "effect4", "effect5", "effect6", "off"
loadRandomVideoOnStart:false,                                  //choose to load random video when webpage loads: true, false
shuffle:false,                                                 //choose to shuffle videos when playing one after another: true, false (shuffle button enabled/disabled on start)
posterImg:"assets/images/poster.jpg",                          //player poster image
posterImgOnVideoFinish:"assets/images/poster2.jpg",            //player poster image on video finish (works if enabled onFinish:"Stop video")
onFinish:"Play next video",                                    //"Play next video","Restart video", "Stop video",
nowPlayingText:true,                                           //enable disable now playing title: true, false
showAllControls:true,                                          //enable/disable all player controls: true/false
allowSkipAd:true,                                              //enable/disable "Skip advertisement" option: true/false
infoShow:true,                                                 //enable/disable info option: true, false
nextShow:true,                                                 //enable/disable next video option: true, false
rewindShow:true,                                               //enable/disable rewind video option: true, false
qualityShow:true,                                              //enable/disable rewind video option: true, false
fastForwardShow:true,                                          //enable/disable fast forwarding video option: true, false
fastBackwardShow:true,                                         //enable/disable fast backwarding video option: true, false
stepFastForwardAndBackward: 5,                                 //step for how much player will fast forward and fast backward (seconds)
<!-- LIGHTBOX SETTINGS -->
lightBox:false,                                                //lightbox mode :true/false
lightBoxAutoplay: false,                                       //autoplay when lightbox opens: true/false
lightBoxThumbnail:"assets/images/poster.jpg",                  //lightbox thumbnail image
lightBoxThumbnailWidth: 400,                                   //lightbox thumbnail image width
lightBoxThumbnailHeight: 220,                                  //lightbox thumbnail image height
lightBoxCloseOnOutsideClick: true,                             //close lightbox when clicked outside of player area
<!-- PLAYLIST SETTINGS -->
playlist:"Right playlist",                                     //choose playlist type: "Right playlist", "Bottom playlist", "Off"
playlistScrollType:"inset",                                    //choose scrollbar type: "light","minimal","light-2","light-3","light-thick","light-thin","inset","inset-2","inset-3","rounded","rounded-dots","3d","dark","minimal-dark","dark-2","dark-3","dark-thick","dark-thin","inset-dark","inset-2-dark","inset-3-dark","rounded-dark","rounded-dots-dark","3d-dark","3d-thick-dark"
playlistBehaviourOnPageload:"opened (default)",                //choose playlist behaviour when webpage loads: "closed", "opened (default)" (not apply to Vimeo player) 
<!-- VIMEO PLAYER SETTINGS -->
vimeoColor:"00adef",                                           //set "hexadecimal value", default vimeo color is "00adef"
<!-- YOUTUBE SETTINGS -->
youtubeControls:"custom controls",                             //choose youtube player controls: "custom controls", "default controls"
youtubeSkin:"dark",                                            //default youtube controls theme: light, dark
youtubeColor:"red",                                            //default youtube controls bar color: red, white
youtubeQuality:"default",                                      //choose youtube quality: "small", "medium", "large", "hd720", "hd1080", "highres", "default"
youtubeShowRelatedVideos:true,                                 //choose to show youtube related videos when video finish: true, false (onFinish:"Stop video" needs to be enabled)
<!-- HTML5 SELF HOSTED VIDEOS SETTINGS -->
HTML5VideoQuality:"HD",                                        //choose HTML5 video quality (HD, SD)
preloadSelfHosted:"none",                                      //choose preload buffer for self hosted mp4 videos (video type HTML5): "none", "auto"
rightClickMenu:true,                                           //enable/disable right click over HTML5 player: true/false
hideVideoSource:false,                                         //option to hide self hosted video 'src' attribute from <video> tag (to prevent users from download/steal your videos): true/false
<!-- SHARE SETTINGS  -->
shareShow:true,                                                //enable/disable complete share options (facebook/twitter/googlePlus): true, false
facebookShow:true,                                             //enable/disable facebook option individually: true, false
twitterShow:true,                                              //enable/disable twitter option individually: true, false
googlePlusShow:true,                                           //enable/disable googlePlus option individually: true, false
facebookShareName:"Stellar video player",                      //first parametar of facebook share in facebook feed dialog is title
facebookShareLink:"http://codecanyon.net/",                    //second parametar of facebook share in facebook feed dialog is link below title
facebookShareDescription:"Stellar Video Player is stunning, modern, responsive, fully customisable high-end video player for WordPress that support advertising and the most popular video platforms like YouTube, Vimeo or self-hosting videos (mp4).",  //third parametar of facebook share in facebook feed dialog is description below link
facebookSharePicture:"https://0.s3.envato.com/files/123866118/preview.jpg", //fourth parametar in facebook feed dialog is picture on left side
twitterText:"Stellar video player",                            //first parametar of twitter share in twitter feed dialog is text
twitterLink:"http://codecanyon.net/",                          //second parametar of twitter share in twitter feed dialog is link
twitterHashtags:"wordpressvideoplayer",                        //third parametar of twitter share in twitter feed dialog is hashtag
twitterVia:"Creative media",                                   //fourth parametar of twitter share in twitter feed dialog is via (@)
googlePlus:"http://codecanyon.net/",                           //share link over Google +
<!-- LOGO SETTINGS  -->
logoShow:true,                                                 //true, false
logoClickable:true,                                            //true, false
logoPath:"assets/images/logo.png",                             //logo image url
logoGoToLink:"http://codecanyon.net/",                         //redirect to specific page when logo clicked
logoPosition:"bottom-left",                                    //choose logo position: "bottom-right","bottom-left"
<!-- EMBED SETTINGS  -->
embedShow:true,                                                //enable/disable embed option: true, false
embedCodeSrc:"www.yourwebsite.com/videoplayer/index.html",     //path to your jQuery version of video player on server
embedShareLink:"www.yourwebsite.com/videoplayer/index.html",   //direct link to your site (or any other URL) you want to be "shared"
<!-- GLOBAL PREROLL ADS SETTINGS  -->
showGlobalPrerollAds: false,                                   //enable/disable 'global' ads and overwrite each individual ad in 'videos' :true/false
globalPrerollAds: "url1;url2;url3;url4;url5",                  //set 'pool' of url's that are separated by ; (global prerolls will play randomly)
globalPrerollAdsSkipTimer: 5,                                  //skip global advertisement seconds
globalPrerollAdsGotoLink: "http://codecanyon.net/",            //global advertisement goto link
<!-- TRANSLATE TEXTS TO YOUR LANGUAGE  -->                     //translate all texts to any language
advertisementTitle:"Advertisement",                   
skipAdvertisementText:"Skip advertisement",
skipAdText:"You can skip this ad in",
playBtnTooltipTxt:"Play",           
pauseBtnTooltipTxt:"Pause",         
rewindBtnTooltipTxt:"Rewind",       
downloadVideoBtnTooltipTxt:"Download video",
qualityBtnOpenedTooltipTxt:"Close quality",
qualityBtnClosedTooltipTxt:"Select quality",
muteBtnTooltipTxt:"Mute",           
unmuteBtnTooltipTxt:"Unmute",       
fullscreenBtnTooltipTxt:"Fullscreen",
exitFullscreenBtnTooltipTxt:"Exit fullscreen",
infoBtnTooltipTxt:"Show info", 
embedBtnTooltipTxt:"Embed",         
shareBtnTooltipTxt:"Share",      
volumeTooltipTxt:"Volume",     
fastForwardBtnTooltipTxt:"Fast forward", 
fastBackwardBtnTooltipTxt:"Fast backward",     
playlistBtnClosedTooltipTxt:"Show playlist",
playlistBtnOpenedTooltipTxt:"Hide playlist",
facebookBtnTooltipTxt:"Share on Facebook",
twitterBtnTooltipTxt:"Share on Twitter",
googlePlusBtnTooltipTxt:"Share on Google+",
nextBtnTooltipTxt:"Next video",    
previousBtnTooltipTxt:"Previous video",
playlistSearchText: "Search for video...",
nextVideoInPlaylistText: "UP NEXT", 
autoplayNextVideoInPlaylistOn: "Autoplay next video on",
autoplayNextVideoInPlaylistOff: "Autoplay next video off",
countVideos: "of",
shuffleBtnOnTooltipTxt:"Shuffle on",
shuffleBtnOffTooltipTxt:"Shuffle off",
embedWindowTitle2:"EMBED PLAYER IN YOUR SITE:",
embedWindowTitle3:"SHARE CURRENT VIDEO:",
copyTxt:"Copy",
copiedTxt:"Copied!",
<!-- AUTOMATIC YOUTUBE PLAYLIST/CHANNEL SETTINGS  -->
youtubePlaylistID:"",                                                             //automatic youtube playlist ID (leave blank "" if you want to use manual playlist) PLuFX50GllfgP_mecAi4LV7cYva-WLVnaM
youtubeChannelID:"",                                                              //automatic youtube channel ID (leave blank "" if you want to use manual playlist) UCHqaLr9a9M7g9QN6xem9HcQ
<!-- MANUAL PLAYLIST -->

videos:[
{
videoType:"youtube",                                                              //choose video type: "HTML5", "youtube", "vimeo", "image"
title:"Youtube video",                                                            //video title
youtubeID:"Ts2vpJpoLoc",                                                          //last part if the URL https://www.youtube.com/watch?v=0dJO0HyE8xE
youtubeIDStartSeconds: "",                                                        //specifies the time from which the video should start
youtubeIDEndSeconds: "",                                                          //specifies the time when the video should stop playing
vimeoID:"119641053",                                                              //last part of the URL http://vimeo.com/119641053
mp4HD:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",             //mp4 HD video url
mp4SD:"http://creativeinteractivemedia.com/player/videos/PiecesSD.mp4",           //mp4 SD video url
enable_mp4_download:false,                                                        //enable download button for self hosted videos: true, false
imageUrl:"assets/images/poster2.jpg",                                                    //display image instead of playing video
imageTimer:4,    //set time how long image will display
prerollAD:false,                                                                  //show pre-roll true, false
prerollGotoLink:"http://codecanyon.net/",                                         //pre-roll goto link
preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",   //pre-roll video mp4 format
prerollSkipTimer:5,
midrollAD:false,                                                                  //show mid-roll true, false
midrollAD_displayTime:"00:10",                                                    //show mid-roll at any custom time in format "minutes:seconds" ("00:00")
midrollGotoLink:"http://codecanyon.net/",                                         //mid-roll goto link
midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4", //mid-roll video mp4 format
midrollSkipTimer:5, 
postrollAD:false,                                                                 //show post-roll true, false
postrollGotoLink:"http://codecanyon.net/",                                        //post-roll goto link
postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4",  //post-roll video mp4 format
postrollSkipTimer:5,
popupImg:"assets/images/popup.jpg",                                               //popup image URL
popupAdShow:false,                                                                //enable/disable popup image: true, false
popupAdStartTime:"00:03",                                                         //time to show popup ad during playback
popupAdEndTime:"00:07",                                                           //time to hide popup ad during playback
popupAdGoToLink:"http://codecanyon.net/",                                         //re-direct to URL when popup ad clicked
description:"Video description goes here.",                                       //video description
thumbImg:"assets/images/pic1.jpg",                                                //set "auto" or leave blank "" to grab it automatically from youtube, or set your own thumbnail url
info:"Video info goes here.<br>This text can be <i>HTML formatted</i>, <a href='http://codecanyon.net/user/_zac_' target='_blank'><font color='008BFF'>find out more</font></a>.<br>You can disable this info window in player options. <br><br>Lorem ipsum dolor sit amet, eu pri dolores theophrastus. Posidonium vituperatoribus cu mel, cum feugiat nostrum sapientem ne. Vis ea summo persius, unum velit erant in eos, pri ut suas iriure euripidis. Ad augue expetendis sea. Ne usu saperet appetere honestatis, ne qui nulla debitis sententiae."                                                                                    //video info
},

{
videoType:"vimeo",
title:"Vimeo vimeo",
youtubeID:"Ts2vpJpoLoc",
youtubeIDStartSeconds: "",
youtubeIDEndSeconds: "",
vimeoID:"119641053",
mp4HD:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",
mp4SD:"http://creativeinteractivemedia.com/player/videos/PiecesSD.mp4",
enable_mp4_download:false,
imageUrl:"assets/images/poster2.jpg",
imageTimer:4,
prerollAD:false,
prerollGotoLink:"http://codecanyon.net/",
preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",
prerollSkipTimer:5,
midrollAD:false,                                                         
midrollAD_displayTime:"00:10",                                           
midrollGotoLink:"http://codecanyon.net/",                                
midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4",
midrollSkipTimer:5, 
postrollAD:false,                                                       
postrollGotoLink:"http://codecanyon.net/",                               
postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4",
postrollSkipTimer:5,
popupImg:"assets/images/popup.jpg",                         
popupAdShow:false,                                                       
popupAdStartTime:"00:03",                                                
popupAdEndTime:"00:07",                                                 
popupAdGoToLink:"http://codecanyon.net/",                                
description:"Video description goes here.",
thumbImg:"assets/images/pic1.jpg",
info:"Video info goes here.<br>This text can be <i>HTML formatted</i>, <a href='http://codecanyon.net/user/_zac_' target='_blank'><font color='008BFF'>find out more</font></a>.<br>You can disable this info window in player options. <br><br>Lorem ipsum dolor sit amet, eu pri dolores theophrastus. Posidonium vituperatoribus cu mel, cum feugiat nostrum sapientem ne. Vis ea summo persius, unum velit erant in eos, pri ut suas iriure euripidis. Ad augue expetendis sea. Ne usu saperet appetere honestatis, ne qui nulla debitis sententiae."
},

{
videoType:"HTML5",
title:"Video title",
youtubeID:"0dJO0HyE8xE",
youtubeIDStartSeconds: "",
youtubeIDEndSeconds: "",
vimeoID:"119641053",
mp4HD:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",
mp4SD:"http://creativeinteractivemedia.com/player/videos/PiecesSD.mp4",
enable_mp4_download:true,
imageUrl:"assets/images/poster2.jpg",
imageTimer:4,
prerollAD:false,
prerollGotoLink:"http://codecanyon.net/",
preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",
prerollSkipTimer:5,
midrollAD:false,                                                         
midrollAD_displayTime:"00:10",                                           
midrollGotoLink:"http://codecanyon.net/",                                
midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4",
midrollSkipTimer:5, 
postrollAD:false,                                                       
postrollGotoLink:"http://codecanyon.net/",                               
postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4",
postrollSkipTimer:5,
popupImg:"assets/images/popup.jpg",                         
popupAdShow:false,                                                       
popupAdStartTime:"00:03",                                                
popupAdEndTime:"00:07",                                                 
popupAdGoToLink:"http://codecanyon.net/",
description:"Video description goes here.",
thumbImg:"assets/images/pic1.jpg",
info:"Video info goes here.<br>This text can be <i>HTML formatted</i>, <a href='http://codecanyon.net/user/_zac_' target='_blank'><font color='008BFF'>find out more</font></a>.<br>You can disable this info window in player options. <br><br>Lorem ipsum dolor sit amet, eu pri dolores theophrastus. Posidonium vituperatoribus cu mel, cum feugiat nostrum sapientem ne. Vis ea summo persius, unum velit erant in eos, pri ut suas iriure euripidis. Ad augue expetendis sea. Ne usu saperet appetere honestatis, ne qui nulla debitis sententiae."
},

{
videoType:"HTML5",
title:"Video title",
youtubeID:"0dJO0HyE8xE",
youtubeIDStartSeconds: "",
youtubeIDEndSeconds: "",
vimeoID:"119641053",
mp4HD:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",
mp4SD:"http://creativeinteractivemedia.com/player/videos/PiecesSD.mp4",
enable_mp4_download:true,
imageUrl:"assets/images/poster2.jpg",
imageTimer:4,
prerollAD:false,
prerollGotoLink:"http://codecanyon.net/",
preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",
prerollSkipTimer:5,
midrollAD:false,                                                         
midrollAD_displayTime:"00:10",                                           
midrollGotoLink:"http://codecanyon.net/",                                
midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4",
midrollSkipTimer:5, 
postrollAD:false,                                                       
postrollGotoLink:"http://codecanyon.net/",                               
postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4",
postrollSkipTimer:5,
popupImg:"assets/images/popup.jpg",                         
popupAdShow:false,                                                       
popupAdStartTime:"00:03",                                                
popupAdEndTime:"00:07",                                                 
popupAdGoToLink:"http://codecanyon.net/",
description:"Video description goes here.",
thumbImg:"assets/images/pic1.jpg",
info:"Video info goes here.<br>This text can be <i>HTML formatted</i>, <a href='http://codecanyon.net/user/_zac_' target='_blank'><font color='008BFF'>find out more</font></a>.<br>You can disable this info window in player options. <br><br>Lorem ipsum dolor sit amet, eu pri dolores theophrastus. Posidonium vituperatoribus cu mel, cum feugiat nostrum sapientem ne. Vis ea summo persius, unum velit erant in eos, pri ut suas iriure euripidis. Ad augue expetendis sea. Ne usu saperet appetere honestatis, ne qui nulla debitis sententiae."
},

{
videoType:"HTML5",
title:"Video title",
youtubeID:"0dJO0HyE8xE",
youtubeIDStartSeconds: "",
youtubeIDEndSeconds: "",
vimeoID:"119641053",
mp4HD:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",
mp4SD:"http://creativeinteractivemedia.com/player/videos/PiecesSD.mp4",
enable_mp4_download:true,
imageUrl:"assets/images/poster2.jpg",
imageTimer:4,
prerollAD:false,
prerollGotoLink:"http://codecanyon.net/",
preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",
prerollSkipTimer:5,
midrollAD:false,                                                         
midrollAD_displayTime:"00:10",                                           
midrollGotoLink:"http://codecanyon.net/",                                
midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4",
midrollSkipTimer:5, 
postrollAD:false,                                                       
postrollGotoLink:"http://codecanyon.net/",                               
postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4",
postrollSkipTimer:5,
popupImg:"assets/images/popup.jpg",                         
popupAdShow:false,                                                       
popupAdStartTime:"00:03",                                                
popupAdEndTime:"00:07",                                                 
popupAdGoToLink:"http://codecanyon.net/",
description:"Video description goes here.",
thumbImg:"assets/images/pic1.jpg",
info:"Video info goes here.<br>This text can be <i>HTML formatted</i>, <a href='http://codecanyon.net/user/_zac_' target='_blank'><font color='008BFF'>find out more</font></a>.<br>You can disable this info window in player options. <br><br>Lorem ipsum dolor sit amet, eu pri dolores theophrastus. Posidonium vituperatoribus cu mel, cum feugiat nostrum sapientem ne. Vis ea summo persius, unum velit erant in eos, pri ut suas iriure euripidis. Ad augue expetendis sea. Ne usu saperet appetere honestatis, ne qui nulla debitis sententiae."
},
{
videoType:"HTML5",
title:"Video title",
youtubeID:"0dJO0HyE8xE",
youtubeIDStartSeconds: "",
youtubeIDEndSeconds: "",
vimeoID:"119641053",
mp4HD:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",
mp4SD:"http://creativeinteractivemedia.com/player/videos/PiecesSD.mp4",
enable_mp4_download:true,
imageUrl:"assets/images/poster2.jpg",
imageTimer:4,
prerollAD:false,
prerollGotoLink:"http://codecanyon.net/",
preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",
prerollSkipTimer:5,
midrollAD:false,                                                         
midrollAD_displayTime:"00:10",                                           
midrollGotoLink:"http://codecanyon.net/",                                
midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4",
midrollSkipTimer:5, 
postrollAD:false,                                                       
postrollGotoLink:"http://codecanyon.net/",                               
postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4",
postrollSkipTimer:5,
popupImg:"assets/images/popup.jpg",                         
popupAdShow:false,                                                       
popupAdStartTime:"00:03",                                                
popupAdEndTime:"00:07",                                                 
popupAdGoToLink:"http://codecanyon.net/",
description:"Video description goes here.",
thumbImg:"assets/images/pic1.jpg",
info:"Video info goes here.<br>This text can be <i>HTML formatted</i>, <a href='http://codecanyon.net/user/_zac_' target='_blank'><font color='008BFF'>find out more</font></a>.<br>You can disable this info window in player options. <br><br>Lorem ipsum dolor sit amet, eu pri dolores theophrastus. Posidonium vituperatoribus cu mel, cum feugiat nostrum sapientem ne. Vis ea summo persius, unum velit erant in eos, pri ut suas iriure euripidis. Ad augue expetendis sea. Ne usu saperet appetere honestatis, ne qui nulla debitis sententiae."
},
{
videoType:"HTML5",
title:"Video title",
youtubeID:"0dJO0HyE8xE",
youtubeIDStartSeconds: "",
youtubeIDEndSeconds: "",
vimeoID:"119641053",
mp4HD:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",
mp4SD:"http://creativeinteractivemedia.com/player/videos/PiecesSD.mp4",
enable_mp4_download:false,
imageUrl:"assets/images/poster2.jpg",
imageTimer:4,
prerollAD:false,
prerollGotoLink:"http://codecanyon.net/",
preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",
prerollSkipTimer:5,
midrollAD:false,                                                         
midrollAD_displayTime:"00:10",                                           
midrollGotoLink:"http://codecanyon.net/",                                
midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4",
midrollSkipTimer:5, 
postrollAD:false,                                                       
postrollGotoLink:"http://codecanyon.net/",                               
postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4",
postrollSkipTimer:5,
popupImg:"assets/images/popup.jpg",                         
popupAdShow:false,                                                       
popupAdStartTime:"00:03",                                                
popupAdEndTime:"00:07",                                                 
popupAdGoToLink:"http://codecanyon.net/",
description:"Video description goes here.",
thumbImg:"assets/images/pic1.jpg",
info:"Video info goes here.<br>This text can be <i>HTML formatted</i>, <a href='http://codecanyon.net/user/_zac_' target='_blank'><font color='008BFF'>find out more</font></a>.<br>You can disable this info window in player options. <br><br>Lorem ipsum dolor sit amet, eu pri dolores theophrastus. Posidonium vituperatoribus cu mel, cum feugiat nostrum sapientem ne. Vis ea summo persius, unum velit erant in eos, pri ut suas iriure euripidis. Ad augue expetendis sea. Ne usu saperet appetere honestatis, ne qui nulla debitis sententiae."
}
]
});
});

</script>
<div id="Stellar_video_player"></div>

A webpage should only load one instance of jQuery. Loading more then one instance of the jQuery library can cause conflicts. 

 

If you intend to use YouTube Channel or YouTube Playlist, you need to get Youtube API Key.
 
To get Youtube API Key for your video player follow these steps: 
 
https://developers.google.com/youtube/v3/getting-started
 
or watch the video tutorial:
 
https://www.youtube.com/watch?v=Im69kzhpR3I&feature=emb_title
To add videos from youtube playlist find option youtubePlaylistD
 
and insert youtube playlist ID from youtube URL, for example:
 
URL: https://www.youtube.com/watch?v=avwA2KPUHWc&list=PLuFX50GllfgP_mecAi4LV7cYva-WLVnaM
 
youtubePlaylistID: "PLuFX50GllfgP_mecAi4LV7cYva-WLVnaM"
 
To add videos from youtube user channel find option youtubeChannelID
 
and insert channel ID from youtube URL, for example:
 
URL: https://www.youtube.com/channel/UCHqaLr9a9M7g9QN6xem9HcQ
 
youtubeChannelID: "UCHqaLr9a9M7g9QN6xem9HcQ" 
 
or
 
URL: https://www.youtube.com/user/djolepiv
 
youtubeChannelID: "djolepiv" 
 
 
 
Videos will be added by published date so first video in your player will be latest video uploaded on your channel.
 
You can add videos manually one by one to your playlist.
 
You will need to set videoType for each video you add.
 
 
for
- self-hosted mp4,
- google drive,
- LiveStreaming HLS m3u8
- local (from computer),
- dropbox
- amazon3 
- or any mp4 url video:
videoType:"HTML5"
mp4:"http://player.pageflip.com.hr/videos/Pieces.mp4"
 
for youtube video:
 
URL: https://www.youtube.com/watch?v=LfTLc5JGFPc
videoType:"youtube"
youtubeID:"LfTLc5JGFPc"
 
for vimeo video:
 
URL: http://vimeo.com/32707724
videoType:"vimeo"
vimeoID:"32707724"
 
for displaying image (instead of video):
videoType:"image"
imageUrl:"images/preview_images/poster2.jpg"
imageTimer: 4
 
To add more videos just write " , " and duplicate all between curly brackets like this:
 
,
{
videoType:"HTML5",
title:"Video title",
youtubeID:"0dJO0HyE8xE",
vimeoID:"119641053",
mp4HD:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",
mp4SD:"http://creativeinteractivemedia.com/player/videos/PiecesSD.mp4",
enable_mp4_download:true,
imageUrl:"assets/images/poster2.jpg",
imageTimer:4,
prerollAD:false,
prerollGotoLink:"http://codecanyon.net/",
preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",
prerollSkipTimer:5,
midrollAD:false,                                                                  
midrollAD_displayTime:"00:10",                                                    
midrollGotoLink:"http://codecanyon.net/",                                         
midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4", 
midrollSkipTimer:5, 
postrollAD:false,                                                                
postrollGotoLink:"http://codecanyon.net/",                                        
postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4",  
postrollSkipTimer:5,
popupImg:"assets/images/popup.jpg",                           
popupAdShow:false,                                                                
popupAdStartTime:"00:03",                                                         
popupAdEndTime:"00:07",                                                          
popupAdGoToLink:"http://codecanyon.net/",
description:"Video description goes here.",
thumbImg:"assets/images/pic1.jpg",
info:"Video info goes here.<br>This text can be <i>HTML formatted</i>, <a href='http://codecanyon.net/user/_zac_' target='_blank'><font color='008BFF'>find out more</font></a>.<br>You can disable this info window in player options. <br><br>Lorem ipsum dolor sit amet, eu pri dolores theophrastus. Posidonium vituperatoribus cu mel, cum feugiat nostrum sapientem ne. Vis ea summo persius, unum velit erant in eos, pri ut suas iriure euripidis. Ad augue expetendis sea. Ne usu saperet appetere honestatis, ne qui nulla debitis sententiae."
}
 
and you have succesfully added another video to the playlist.
 
You can have unlimited videos in the playlist.

If you use self-hosted videos (videoType:"HTML5"), you will need to provide only mp4 format to make player work cross-browsers on all platforms (desktop and mobile phones/tablets).

To convert your video to mp4 you can use this online converter, or any other similar software.

 

To use pre-roll videos as advertising simply enable pre-roll option for particular video and enter URL to your ad video from your server:

prerollAD:true,                                                         
preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4", 
 

{
videoType:"youtube",                                                              //choose video type: "HTML5", "youtube", "vimeo", "image"
title:"Youtube video",                                                            //video title
youtubeID:"0dJO0HyE8xE",                                                          //last part if the URL https://www.youtube.com/watch?v=0dJO0HyE8xE
vimeoID:"119641053",                                                              //last part of the URL http://vimeo.com/119641053
mp4HD:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",
mp4SD:"http://creativeinteractivemedia.com/player/videos/PiecesSD.mp4",
enable_mp4_download:false,                                                        //enable download button for self hosted videos: true, false
imageUrl:"assets/images/poster2.jpg",                                             //display image instead of playing video
imageTimer:4,   //set time how long image will display
prerollAD:true,                                                                  //show pre-roll true, false
prerollGotoLink:"http://codecanyon.net/",                                         //pre-roll goto link
preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",   //pre-roll video mp4 format
prerollSkipTimer:5,

midrollAD:false,                                                                  //show mid-roll true, false
midrollAD_displayTime:"00:10",                                                    //show mid-roll at any custom time in format "minutes:seconds" ("00:00")
midrollGotoLink:"http://codecanyon.net/",                                         //mid-roll goto link
midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4", //mid-roll video mp4 format
midrollSkipTimer:5,
postrollAD:false,                                                                 //show post-roll true, false
postrollGotoLink:"http://codecanyon.net/",                                        //post-roll goto link
postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4",  //post-roll video mp4 format
postrollSkipTimer:5,
popupImg:"assets/images/popup.jpg",                                    //popup image URL
popupAdShow:false,                                                                //enable/disable popup image: true, false
popupAdStartTime:"00:03",                                                         //time to show popup ad during playback
popupAdEndTime:"00:07",                                                           //time to hide popup ad during playback
popupAdGoToLink:"http://codecanyon.net/",                                         //re-direct to URL when popup ad clicked
description:"Video description goes here.",                                       //video description
thumbImg:"assets/images/pic1.jpg",                                                //set "auto" or leave blank "" to grab it automatically from youtube, or set your own thumbnail url
info:"Video info goes here.<br>This text can be <i>HTML formatted</i>, <a href='http://codecanyon.net/user/_zac_' target='_blank'><font color='008BFF'>find out more</font></a>.<br>You can disable this info window in player options. <br><br>Lorem ipsum dolor sit amet, eu pri dolores theophrastus. Posidonium vituperatoribus cu mel, cum feugiat nostrum sapientem ne. Vis ea summo persius, unum velit erant in eos, pri ut suas iriure euripidis. Ad augue expetendis sea. Ne usu saperet appetere honestatis, ne qui nulla debitis sententiae."                                                                                    //video info
}

 
 
You can set to redirect URL when advertisement is clicked:
prerollGotoLink:"http://codecanyon.net/"

Also you can have timer when to show "skip advertisement" option,

which can be set to any time you want (seconds):

prerollSkipTimer:5

To use mid-roll advertising simply enable mid-roll option for particular video and enter URL to your ad video from your server:

midrollAD:true
midroll_mp4:"http://player.pageflip.com.hr/videos/Short_Elegant_Logo_Reveal.mp4"

{
videoType:"youtube",                                                           
title:"Youtube video",                                                         
youtubeID:"0dJO0HyE8xE",                                                      
vimeoID:"119641053",                                                           
mp4HD:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",
mp4SD:"http://creativeinteractivemedia.com/player/videos/PiecesSD.mp4",
enable_mp4_download:false,                                                     
imageUrl:"assets/images/poster2.jpg",                                          
imageTimer:4,   //set time how long image will display
prerollAD:false,                                                              
prerollGotoLink:"http://codecanyon.net/",                                     
preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",
prerollSkipTimer:5,
midrollAD:false,                                                                  //show mid-roll true, false
midrollAD_displayTime:"00:10",                                       //show mid-roll at any custom time in format "minutes:seconds" ("00:00")
midrollGotoLink:"http://codecanyon.net/",                       //mid-roll goto link
midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4", //mid-roll video mp4 format
midrollSkipTimer:5,
postrollAD:false,                                                              
postrollGotoLink:"http://codecanyon.net/",                                      
postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4",
postrollSkipTimer:5,
popupImg:"assets/images/popup.jpg",                                  
popupAdShow:false,                                                             
popupAdStartTime:"00:03",                                                      
popupAdEndTime:"00:07",                                                        
popupAdGoToLink:"http://codecanyon.net/",                                       
description:"Video description goes here.",                                    
thumbImg:"assets/images/pic1.jpg",                                            
info:"Video info goes here"                                                      
}

 
You can set to redirect URL when advertisement is clicked:
midrollGotoLink:"http://codecanyon.net/"
You can set when to show mid-roll video advertisement (in format minutes:seconds) :
midrollAD_displayTime:"00:10", 

Also you can have timer when to show "skip advertisement" option,

which can be set to any time you want (seconds):

midrollSkipTimer:5

To use post-roll advertising simply enable post-roll option for particular video and enter URL to your ad video from your server:

postrollAD:true
postroll_mp4:"http://player.pageflip.com.hr/videos/Short_Elegant_Logo_Reveal.mp4"
{
videoType:"youtube",                                                             
title:"Youtube video",                                                            
youtubeID:"0dJO0HyE8xE",                                                          
vimeoID:"119641053",                                                             
mp4HD:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",
mp4SD:"http://creativeinteractivemedia.com/player/videos/PiecesSD.mp4",
enable_mp4_download:false,                                                        
imageUrl:"assets/images/poster2.jpg",                                            
imageTimer:4,   //set time how long image will display
prerollAD:false,                                                                 
prerollGotoLink:"http://codecanyon.net/",                                        
preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",   
prerollSkipTimer:5,
midrollAD:false,                                                               
midrollAD_displayTime:"00:10",                                                  
midrollGotoLink:"http://codecanyon.net/",                                        
midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4", 
midrollSkipTimer:5,
postrollAD:false,                                                                 //show post-roll true, false
postrollGotoLink:"http://codecanyon.net/",                     //post-roll goto link
postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4",  //post-roll video mp4 format
postrollSkipTimer:5,
popupImg:"assets/images/popup.jpg",                                    
popupAdShow:false,                                                                
popupAdStartTime:"00:03",                                                        
popupAdEndTime:"00:07",                                                           
popupAdGoToLink:"http://codecanyon.net/",                                         
description:"Video description goes here.",                                      
thumbImg:"assets/images/pic1.jpg",                                               
info:"Video info goes here."
}
 
Post-roll advertisement will show at the end of the video.
 
You can set to redirect URL when advertisement is clicked:
postrollGotoLink:"http://codecanyon.net/"

Also you can have timer when to show "skip advertisement" option,

which can be set to any time you want (seconds):

postrollSkipTimer:5

To use pop-up advertising simply enable pop-up option for particular video and enter URL to your image ad from your server:

popupAdShow:true
popupImg:"images/preview_images/popup.jpg"
{
videoType:"youtube",                                                            
title:"Youtube video",                                                           
youtubeID:"0dJO0HyE8xE",                                                          
vimeoID:"119641053",                                                             
mp4HD:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",
mp4SD:"http://creativeinteractivemedia.com/player/videos/PiecesSD.mp4",
enable_mp4_download:false,                                                       
imageUrl:"assets/images/poster2.jpg",                                             
imageTimer:4,   //set time how long image will display
prerollAD:false,                                                                 
prerollGotoLink:"http://codecanyon.net/",                                        
preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",   
prerollSkipTimer:5,
midrollAD:false,                                                                 
midrollAD_displayTime:"00:10",                                                    
midrollGotoLink:"http://codecanyon.net/",                                        
midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4", 
midrollSkipTimer:5,
postrollAD:false,                                                                 
postrollGotoLink:"http://codecanyon.net/",                                        
postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4",  
postrollSkipTimer:5,
popupImg:"assets/images/popup.jpg",                                    //popup image URL
popupAdShow:false,                                                                     //enable/disable popup image: true, false
popupAdStartTime:"00:03",                                                         //time to show popup ad during playback
popupAdEndTime:"00:07",                                                           //time to hide popup ad during playback
popupAdGoToLink:"http://codecanyon.net/",                            //re-direct to URL when popup ad clicked
description:"Video description goes here.",                                       //video description
thumbImg:"assets/images/pic1.jpg",                                                //set "auto" or leave blank "" to grab it automatically from youtube, or set your own thumbnail url
info:"Video info goes here."
}
 
You can set to redirect URL when pop-up is clicked:
popupAdGoToLink:"http://codecanyon.net/",
You can set when to show and hide pop-up image ad (in format minutes:seconds) :
 popupAdStartTime:"00:03"                                                        
 popupAdEndTime:"00:07"      

 

To use Google Drive videos, you'll need to obtain google drive API key.
 
Here's steps how to get Google Drive API key:
 
Step 1
 
visit Google Cloud Platform and login with your Google account: https://console.cloud.google.com/apis/
 
Step 2
 
In Google Cloud Platform dashboard, click to select a project, then click "New Project".
 
 
 
Step 3
 
Enter "Project name" and click "Create"
 
 
Step 4
 
Select your new "Project name" from dropdown menu and click "Library"
 
 
Step 5
 
Select "Google Drive API" and click "Enable"
 
 
 
Step 6
 
To create Google Drive API key, click "Credentials", "Create credentials", "API key"
 
In the popup API key dialog, copy the API key.
 
 
 
After you get Google drive API key you'll need to restrict your key.
 
Follow this short tutorial on how to restrict Google drive API key:
 
http://creativeinteractivemedia.com/player/CC/GoogleDriveAPIkey_tutorial/restrictGoogleDriveAPIKey.webm
 
Step 7
 
After the key is ready for usage you can create direct video url for video player.
 
You'll need VIDEO_ID and GOOGLE_DRIVE_KEY.
 
To get VIDEO_ID, go to your Google drive https://drive.google.com/drive/my-drive, right-click on video and select "Get shareable link".
 
 
In the popup dialog click "Copy link" and paste it somewhere in notepad: 
https://drive.google.com/file/d/VIDEO_ID/view?usp=sharing
 
Than use your Google Drive API key to create actual video url for video player usage.
 
Final result of Google Drive video url:
https://www.googleapis.com/drive/v3/files/VIDEO_ID?alt=media&key=GOOGLE_DRIVE_KEY 
Insert above link into video player into mp4 field (HD or SD, depending on your file quality).
 
***you can have HD and SD mp4 files on Google drive, for each repeat step 7

You can customize look of your player by inserting any color as "color accent" option. 

Color accent can be hexadecimal value (#cc181e) or rbg value ( rgb(204,24,30)).

colorAccent:"#cc181e"

is equvalent to:

colorAccent:"rgb(204, 24, 30)"

To choose color accent for your player you can use one of these online color pickers:

http://www.colorpicker.com/ 

http://www.w3schools.com/tags/ref_colorpicker.asp

http://www.rapidtables.com/web/color/color-picker.htm

This tool can be useful if you want to match your website colors http://www.imagecolorpicker.com/

 

 

Popular pre-built colors you can use:

 

To customize vimeo and youtube players separately use this options:

vimeoColor:"00adef",                         //set "hexadecimal value", default vimeo color is "00adef"

youtubeSkin:"dark",                          //youtube theme: light,dark

youtubeColor:"red",                          //youtube color: red, white

 

To customize playlist scrollbar set one of the pre-built scrollbar themes:

playlistScrollType:"light",                  

available scrollbar themes:  

"light","minimal","light-2","light-3","light-thick","light-thin","inset","inset-2","inset-3","rounded","rounded-dots","3d"

You can have multiple players per page. Every player can have it's own settings. Add the following in your HTML document:

Example how to show 2 players in one page:

<script type="text/javascript" charset="utf-8">
$(document).ready(function($)
{
    videoPlayer = $("#Stellar_video_player1").Video({
    });
    //add this for player 2
    videoPlayer = $("#Stellar_video_player2").Video({
    });
});

 </script>

<body>
  <div id="Stellar_video_player1"></div>
  //add this for player 2:
  <div id="Stellar_video_player2"></div>
</body>

For each instance of the player you need to change option instanceName, for example:

first instance of the player:

instanceName:"player1"

second instance of the player:

instanceName:"player2"

Done! Now you should be able to see 2 player in your HTML page.

Self-hosting video usage:
 
Some servers don't have support for HTML5 video by default.
 
Although it may seems like the video player is refusing to play the video with your browsers. This is usually caused by the web server’s inability to recognize these video formats and it has nothing to do with the HTML5 video player.
 
The solution to these problems can be fixed by adding video MIME types to server. You need to edit the .htaccess file and add the following line to your .htaccess file:
 
AddType video/mp4 .mp4
URL's to your self-hosted videos needs to be an absolute URL:
 
Example:
http://server/video.mp4
 

Vimeo usage:

If you use vimeo player, you’ll need to be running on a web server instead of opening the file directly in your browser. Flash and JS security restrictions could prevent the API from working when run locally.

If you like this product please give a rating on CodeCaynon:

https://codecanyon.net/user/_creativemedia_/portfolio