Elite Video Player

jQuery plugin


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

This is HTML5 ready video player that plays videos from YouTube, Vimeo, self hosted videos (mp4) , Google drive videos, Dropbox videos, m3u8 HLS videos with optional pre-roll,  mid-roll, post-roll and pop-up advertising system for each video you create.

Player supports gallery (with unlimited videos) which can be on right side, below video, or turned off. 

You can add videos to playlist manually or automatically (from youtube playlist or youtube user channel).

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.

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://www.refresh-sf.com/yui/

 

Open index.html file from the "deploy" folder.

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

  1. $(document).ready(function($)
  2. {
  3. videoPlayer = $("#Elite_video_player").Video();
  4. });

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:

  1. $(document).ready(function($)
  2. {
  3. videoPlayer = $("#Elite_video_player").Video({ //ALL PLUGIN OPTIONS
  4. vastUrl:"assets/vast/xml/vast.xml", //insert here your VAST xml, VMAP xml, or IMA tag
  5. googleAnalyticsTrackingCode: "UA-87467628-3",//track video events using Google Analytics (how may times video is played, downloaded, etc.)
  6. instanceName:"player1", //name of the player instance
  7. instanceTheme:"dark", //choose video player theme: "dark", "light"
  8. autohideControls:5, //autohide HTML5 player controls
  9. hideControlsOnMouseOut:"No", //hide HTML5 player controls on mouse out of the player: "Yes","No"
  10. playerLayout: "fitToContainer", //Select player layout: "fitToContainer" (responsive mode), "fixedSize" (fixed mode), "fitToBrowser" (fill the browser mode)
  11. videoPlayerWidth:1006, //fixed total player width (only for playerLayout: "fixedSize")
  12. videoPlayerHeight:420, //fixed total player height (only for playerLayout: "fixedSize")
  13. videoRatio: 16/9, //set your video ratio (calculate video width/video height)
  14. videoRatioStretch: false, //adjust video ratio for case when playlist is "opened" : true/false
  15. iOSPlaysinline: true, //on iOS device: play videos inline (like on desktop) or in Fullscreen by default: true/false
  16. floatPlayerOutsideViewport: false, //show Sticky player if video player is not in viewport when scrolling through page
  17. pauseStickyOutsideViewport: false, //pause sticky player if video player is not in viewport when scrolling through page
  18. lightBox:false, //lightbox mode :true/false
  19. lightBoxAutoplay: false, //autoplay video when lightbox opens: true/false
  20. lightBoxThumbnail:"images/preview_images/poster.jpg", //lightbox thumbnail image
  21. lightBoxThumbnailWidth: 400, //lightbox thumbnail image width
  22. lightBoxThumbnailHeight: 220, //lightbox thumbnail image height
  23. lightBoxCloseOnOutsideClick: true, //close lightbox when clicked outside of player area
  24. playlist:"Right playlist", //choose playlist type: "Right playlist", "Bottom playlist", "Off"
  25. playlistShowOnlyThumbnails:false, //show thumbnails only in playlist
  26. playlistOrder:"", //choose order of videos in playlist, choose which videos will show ("0,1,2" will show first three videos from playlist)
  27. playlistScrollType:"light", //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"
  28. playlistBehaviourOnPageload:"opened (default)",//choose playlist behaviour when webpage loads: "closed", "opened (default)" (not apply to Vimeo player)
  29. autoplay:false, //autoplay when webpage loads: true/false (youtube autoplay - not supported on mobile)
  30. colorAccent:"#cc181e", //plugin colors accent (hexadecimal or RGB value - http://www.colorpicker.com/)
  31. vimeoColor:"00adef", //set "hexadecimal value", default vimeo color is "00adef"
  32. youtubeControls:"custom controls", //choose youtube player controls: "custom controls", "default controls"
  33. youtubeSkin:"dark", //default youtube controls theme: light, dark
  34. youtubeColor:"red", //default youtube controls bar color: red, white
  35. youtubeQuality:"default", //choose youtube quality: "small", "medium", "large", "hd720", "hd1080", "highres", "default"
  36. youtubeShowRelatedVideos:"Yes", //choose to show youtube related videos when video finish: "Yes", "No" (onFinish:"Stop video" needs to be enabled)
  37. videoPlayerShadow:"effect1", //choose player shadow: "effect1" , "effect2", "effect3", "effect4", "effect5", "effect6", "off"
  38. loadRandomVideoOnStart:"No", //choose to load random video when webpage loads: "Yes", "No"
  39. shuffle:"No", //choose to shuffle videos when playing one after another: "Yes", "No" (shuffle button enabled/disabled on start)
  40. posterImg:"images/preview_images/poster.jpg",//player poster image
  41. posterImgOnVideoFinish:"images/preview_images/poster2.jpg",//player poster image on video finish (if enabled onFinish:"Stop video")
  42. onFinish:"Play next video", //"Play next video","Restart video", "Stop video",
  43. nowPlayingText:"Yes", //enable disable now playing title: "Yes","No"
  44. HTML5VideoQuality:"HD", //choose HTML5 video quality (HD, SD)
  45. HTML5videoThumbnails: "vtt", //select video thumbnails for HTML5 self hosted videos: "none", "vtt", "live" "none"->disable thumbnails,"vtt"->show pre-made images at specified time intervals, "live"->thumbnails show in real-time captured from actual video.
  46. preloadSelfHosted:"none", //choose preload buffer for self hosted mp4 videos (video type HTML5): "none", "auto"
  47. rightClickMenu:true, //enable/disable right click over HTML5 player: true/false
  48. hideVideoSource:false, //option to hide self hosted video sources (to prevent users from download/steal your videos): true/false
  49. showAllControls:true, //enable/disable all HTML5 player controls: true/false
  50. allowSkipAd:true, //enable/disable "Skip advertisement" option: true/false
  51. rewindShow: "Yes", //enable/disable rewind option: "Yes","No"
  52. qualityShow: "Yes", //enable/disable quality video option: "Yes","No"
  53. infoShow:"Yes", //enable/disable info option: "Yes","No"
  54. shareShow:"Yes", //enable/disable all share options: "Yes","No"
  55. facebookShow:"Yes", //enable/disable facebook option individually: "Yes","No"
  56. twitterShow:"Yes", //enable/disable twitter option individually: "Yes","No"
  57. facebookShareName:"Elite video player", //first parametar of facebook share in facebook feed dialog is title
  58. facebookShareLink:"http://codecanyon.net/item/elite-video-player-wordpress-plugin/10496434", //second parametar of facebook share in facebook feed dialog is link below title
  59. facebookShareDescription:"Elite 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
  60. facebookSharePicture:"https://0.s3.envato.com/files/123866118/preview.jpg", //fourth parametar in facebook feed dialog is picture on left side
  61. twitterText:"Elite video player", //first parametar of twitter share in twitter feed dialog is text
  62. twitterLink:"http://codecanyon.net/item/elite-video-player-wordpress-plugin/10496434", //second parametar of twitter share in twitter feed dialog is link
  63. twitterHashtags:"wordpressvideoplayer", //third parametar of twitter share in twitter feed dialog is hashtag
  64. twitterVia:"Creative media", //fourth parametar of twitter share in twitter feed dialog is via (@)
  65. googlePlus:"http://codecanyon.net/item/elite-video-player-wordpress-plugin/10496434", //share link over Google +
  66. logoShow:"Yes", //"Yes","No"
  67. logoClickable:"Yes", //"Yes","No"
  68. logoPath:"images/logo/logo.png", //path to logo image
  69. logoGoToLink:"http://codecanyon.net/", //redirect to page when logo clicked
  70. logoPosition:"bottom-left", //choose logo position: "bottom-right","bottom-left"
  71. embedShow:"Yes", //enable/disable embed option: "Yes","No"
  72. embedCodeSrc:"www.yourwebsite.com/videoplayer/index.html", //path to your video player on server
  73. embedCodeW:"746", //embed player code width
  74. embedCodeH:"420", //embed player code height
  75. embedShareLink:"www.yourwebsite.com/videoplayer/index.html", //direct link to your site (or any other URL) you want to be "shared"
  76. showGlobalPrerollAds: false, //enable/disable 'global' ads and overwrite each individual ad in 'videos' :true/false
  77. globalPrerollAds: "url1;url2;url3;url4;url5",//set 'pool' of url's that are separated by ; (global prerolls will play randomly)
  78. globalPrerollAdsSkipTimer: 5, //skip global advertisement seconds
  79. globalPrerollAdsGotoLink: "http://codecanyon.net/",//global advertisement goto link
  80. advertisementTitle:"Advertisement", //translate "Advertisement" title to your language
  81. skipAdvertisementText:"Skip advertisement", //translate "Skip advertisement" button to your language
  82. skipAdText:"You can skip this ad in", //translate "You can skip this ad in" counter to your language
  83. mutedNotificationText:"Video has no sound", //translate "Video has no sound" button to your language
  84. playBtnTooltipTxt:"Play", //translate "Play" to your language
  85. pauseBtnTooltipTxt:"Pause", //translate "Pause" to your language
  86. rewindBtnTooltipTxt:"Rewind", //translate "Rewind" to your language
  87. downloadVideoBtnTooltipTxt:"Download video", //translate "Download video" to your language
  88. qualityBtnOpenedTooltipTxt:"Close settings", //translate "Close settings" to your language
  89. qualityBtnClosedTooltipTxt:"Settings", //translate "Settings" to your language
  90. ccShowOnHTML5Videos: true, //enable/disable mp4 captions globally for all HTML5 videos
  91. ccShowOnVideoLoad: true, //enable/disable mp4 captions to display on HTML5 video load (if ccUrl is defined)
  92. ccBtnOpenedTooltipTxt:"Hide captions", //translate "Hide captions" to your language
  93. ccBtnClosedTooltipTxt:"Show captions", //translate "Show captions" to your language
  94. muteBtnTooltipTxt:"Mute", //translate "Mute" to your language
  95. unmuteBtnTooltipTxt:"Unmute", //translate "Unmute" to your language
  96. fullscreenBtnTooltipTxt:"Fullscreen", //translate "Fullscreen" to your language
  97. exitFullscreenBtnTooltipTxt:"Exit fullscreen",//translate "Exit fullscreen" to your language
  98. infoBtnTooltipTxt:"Show info", //translate "Show info" to your language
  99. embedBtnTooltipTxt:"Embed", //translate "Embed" to your language
  100. shareBtnTooltipTxt:"Share", //translate "Share" to your language
  101. volumeTooltipTxt:"Volume", //translate "Volume" to your language
  102. playlistBtnClosedTooltipTxt:"Show playlist", //translate "Show playlist" to your language
  103. playlistBtnOpenedTooltipTxt:"Hide playlist", //translate "Exit fullscreen" to your language
  104. facebookBtnTooltipTxt:"Share on Facebook", //translate "Share on Facebook" to your language
  105. twitterBtnTooltipTxt:"Share on Twitter", //translate "Share on Twitter" to your language
  106. googlePlusBtnTooltipTxt:"Share on Google+", //translate "Share on Google+" to your language
  107. lastBtnTooltipTxt:"Go to last video", //translate "Go to last video" to your language
  108. firstBtnTooltipTxt:"Go to first video", //translate "Go to first video" to your language
  109. nextBtnTooltipTxt:"Play next video", //translate "Play next video" to your language
  110. previousBtnTooltipTxt:"Play previous video", //translate "Play previous video" to your language
  111. shuffleBtnOnTooltipTxt:"Shuffle on", //translate "Shuffle on" to your language
  112. shuffleBtnOffTooltipTxt:"Shuffle off", //translate "Shuffle off" to your language
  113. nowPlayingTooltipTxt:"NOW PLAYING", //translate "NOW PLAYING" to your language
  114. embedWindowTitle1:"SHARE THIS PLAYER:", //translate "SHARE THIS PLAYER:" to your language
  115. embedWindowTitle2:"EMBED THIS VIDEO IN YOUR SITE:",//translate "EMBED THIS VIDEO IN YOUR SITE:" to your language
  116. embedWindowTitle3:"SHARE LINK TO THIS PLAYER:",//translate "SHARE LINK TO THIS PLAYER:" to your language
  117. youtubePlaylistID:"", //automatic youtube playlist ID (leave blank "" if you want to use manual playlist) PLuFX50GllfgP_mecAi4LV7cYva-WLVnaM
  118. youtubeChannelID:"", //automatic youtube channel ID (leave blank "" if you want to use manual playlist) UCHqaLr9a9M7g9QN6xem9HcQ
  119. youtubeChannelNumberOfVideos:"",
  120.  
  121. //manual playlist
  122. videos:[
  123. {
  124. videoType:"youtube", //choose video type: "HTML5", "youtube", "vimeo", "image"
  125. title:"Youtube video", //video title
  126. youtubeID:"0dJO0HyE8xE", //last part if the URL https://www.youtube.com/watch?v=0dJO0HyE8xE
  127. vimeoID:"119641053", //last part of the URL http://vimeo.com/119641053
  128. mp4HD:"http://creativeinteractivemedia.com/player/captions/developerStories-en.mp4", //HTML5 video HD mp4 url
  129. mp4SD:"http://creativeinteractivemedia.com/player/captions/developerStories-en.mp4", //HTML5 video SD mp4 url
  130. mp4VideoThumbnails_vtt:"captions/videoThumbnails.vtt", //mp4 thumbnails vtt file
  131. mp4VideoThumbnails_img:"captions/videoThumbnails.vtt", //mp4 thumbnails jpg file (single spritesheet)
  132. ccUrl: "http://creativeinteractivemedia.com/player/captions/developerStories-subtitles-en.vtt", //mp4 captions url
  133. enable_mp4_download:"no", //enable download button for self hosted videos: "yes","no"
  134. imageUrl:"images/preview_images/poster2.jpg", //display image instead of playing video
  135. imageTimer:4, //set time how long image will display
  136. prerollAD:"no", //show pre-roll "yes","no"
  137. prerollGotoLink:"http://codecanyon.net/", //pre-roll goto link
  138. preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4", //pre-roll video mp4 format
  139. prerollSkipTimer:5,
  140. midrollAD:"no", //show mid-roll "yes","no"
  141. midrollAD_displayTime:"00:10", //show mid-roll at any custom time in format "minutes:seconds" ("00:00")
  142. midrollGotoLink:"http://codecanyon.net/", //mid-roll goto link
  143. midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4", //mid-roll video mp4 format
  144. midrollSkipTimer:5,
  145. postrollAD:"no", //show post-roll "yes","no"
  146. postrollGotoLink:"http://codecanyon.net/", //post-roll goto link
  147. postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4", //post-roll video mp4 format
  148. postrollSkipTimer:5,
  149. popupImg:"images/preview_images/popup.jpg", //popup image URL
  150. popupAdShow:"no", //enable/disable popup image: "yes","no"
  151. popupAdStartTime:"00:03", //time to show popup ad during playback
  152. popupAdEndTime:"00:07", //time to hide popup ad during playback
  153. popupAdGoToLink:"http://codecanyon.net/", //re-direct to URL when popup ad clicked
  154. description:"Video description goes here.", //video description
  155. thumbImg:"images/thumbnail_images/pic1.jpg", //set "auto" or leave blank "" to grab it automatically from youtube, or set path to playlist thumbnail image
  156. 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
  157. }
  158. ]
  159. });
  160. });
 
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  2. <meta name="description" content="Elite Video Player"/>
  3. <meta property="og:title" content="Elite Video Player by _zac_"/>
  4. <meta property="og:image" content="http://creativeinteractivemedia.com/player/imgFB/elite.png"/>
  5. <link rel="stylesheet" href="css/elite.css" type="text/css" media="screen"/>
  6. <link rel="stylesheet" href="css/elite-font-awesome.css" type="text/css">
  7. <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" type="text/css">
  8. <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  9. <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  10. <script src="js/froogaloop.js" type="text/javascript"></script>
  11. <script src="js/jquery.mCustomScrollbar.js" type="text/javascript"></script>
  12. <script src="js/THREEx.FullScreen.js"></script>
  13. <script src="js/videoPlayer.js" type="text/javascript"></script>
  14. <script src="js/Playlist.js" type="text/javascript"></script>
  15. <script type="text/javascript" src="js/ZeroClipboard.js"></script>
  16. <script type="text/javascript" charset="utf-8">
  17.  
  18. $(document).ready(function($)
  19. {
  20. videoPlayer = $("#Elite_video_player").Video({ //ALL PLUGIN OPTIONS
  21. vastUrl:"assets/vast/xml/vast.xml", //insert here your VAST xml, VMAP xml, or IMA tag
  22. googleAnalyticsTrackingCode: "UA-87467628-3",//track video events using Google Analytics (how may times video is played, downloaded, etc.)
  23. instanceName:"player1", //name of the player instance
  24. instanceTheme:"dark", //choose video player theme: "dark", "light"
  25. autohideControls:5, //autohide HTML5 player controls
  26. hideControlsOnMouseOut:"No", //hide HTML5 player controls on mouse out of the player: "Yes","No"
  27. playerLayout: "fixedSize", //Select player layout: "fitToContainer" (responsive mode), "fixedSize" (fixed mode), "fitToBrowser" (fill the browser mode)
  28. videoPlayerWidth:1006, //fixed total player width (only for playerLayout: "fixedSize")
  29. videoPlayerHeight:420, //fixed total player height (only for playerLayout: "fixedSize")
  30. videoRatio: 16/9, //set your video ratio (calculate video width/video height)
  31. videoRatioStretch: false, //adjust video ratio for case when playlist is "opened" : true/false
  32. iOSPlaysinline: true, //on iOS device: play videos inline (like on desktop) or in Fullscreen by default: true/false
  33. floatPlayerOutsideViewport: false, //show Sticky player if video player is not in viewport when scrolling through page
  34. pauseStickyOutsideViewport: false, //pause sticky player if video player is not in viewport when scrolling through page
  35. lightBox:false, //lightbox mode :true/false
  36. lightBoxAutoplay: false, //autoplay video when lightbox opens: true/false
  37. lightBoxThumbnail:"images/preview_images/poster.jpg", //lightbox thumbnail image
  38. lightBoxThumbnailWidth: 400, //lightbox thumbnail image width
  39. lightBoxThumbnailHeight: 220, //lightbox thumbnail image height
  40. lightBoxCloseOnOutsideClick: true, //close lightbox when clicked outside of player area
  41. playlist:"Right playlist", //choose playlist type: "Right playlist", "Bottom playlist", "Off"
  42. playlistShowOnlyThumbnails:false, //show thumbnails only in playlist
  43. playlistOrder:"", //choose order of videos in playlist, choose which videos will show ("0,1,2" will show first three videos from playlist)
  44. playlistScrollType:"light", //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"
  45. playlistBehaviourOnPageload:"opened (default)",//choose playlist behaviour when webpage loads: "closed", "opened (default)" (not apply to Vimeo player)
  46. autoplay:false, //autoplay when webpage loads: true/false (youtube autoplay - not supported on mobile)
  47. colorAccent:"#cc181e", //plugin colors accent (hexadecimal or RGB value - http://www.colorpicker.com/)
  48. vimeoColor:"00adef", //set "hexadecimal value", default vimeo color is "00adef"
  49. youtubeControls:"custom controls", //choose youtube player controls: "custom controls", "default controls"
  50. youtubeSkin:"dark", //default youtube controls theme: light, dark
  51. youtubeColor:"red", //default youtube controls bar color: red, white
  52. youtubeQuality:"default", //choose youtube quality: "small", "medium", "large", "hd720", "hd1080", "highres", "default"
  53. youtubeShowRelatedVideos:"Yes", //choose to show youtube related videos when video finish: "Yes", "No" (onFinish:"Stop video" needs to be enabled)
  54. videoPlayerShadow:"effect1", //choose player shadow: "effect1" , "effect2", "effect3", "effect4", "effect5", "effect6", "off"
  55. loadRandomVideoOnStart:"No", //choose to load random video when webpage loads: "Yes", "No"
  56. shuffle:"No", //choose to shuffle videos when playing one after another: "Yes", "No" (shuffle button enabled/disabled on start)
  57. posterImg:"images/preview_images/poster.jpg",//player poster image
  58. posterImgOnVideoFinish:"images/preview_images/poster2.jpg",//player poster image on video finish (if enabled onFinish:"Stop video")
  59. onFinish:"Play next video", //"Play next video","Restart video", "Stop video",
  60. nowPlayingText:"Yes", //enable disable now playing title: "Yes","No"
  61. HTML5VideoQuality:"HD", //choose HTML5 video quality (HD, SD)
  62. HTML5videoThumbnails: "vtt", //select video thumbnails for HTML5 self hosted videos: "none", "vtt", "live" "none"->disable thumbnails,"vtt"->show pre-made images at specified time intervals, "live"->thumbnails show in real-time captured from actual video.
  63. preloadSelfHosted:"none", //choose preload buffer for self hosted mp4 videos (video type HTML5): "none", "auto"
  64. rightClickMenu:true, //enable/disable right click over HTML5 player: true/false
  65. hideVideoSource:false, //option to hide self hosted video sources (to prevent users from download/steal your videos): true/false
  66. showAllControls:true, //enable/disable all HTML5 player controls: true/false
  67. allowSkipAd:true, //enable/disable "Skip advertisement" option: true/false
  68. rewindShow: "Yes", //enable/disable rewind option: "Yes","No"
  69. qualityShow: "Yes", //enable/disable quality video option: "Yes","No"
  70. infoShow:"Yes", //enable/disable info option: "Yes","No"
  71. shareShow:"Yes", //enable/disable all share options: "Yes","No"
  72. facebookShow:"Yes", //enable/disable facebook option individually: "Yes","No"
  73. twitterShow:"Yes", //enable/disable twitter option individually: "Yes","No"
  74. facebookShareName:"Elite video player", //first parametar of facebook share in facebook feed dialog is title
  75. facebookShareLink:"http://codecanyon.net/item/elite-video-player-wordpress-plugin/10496434", //second parametar of facebook share in facebook feed dialog is link below title
  76. facebookShareDescription:"Elite 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
  77. facebookSharePicture:"https://0.s3.envato.com/files/123866118/preview.jpg", //fourth parametar in facebook feed dialog is picture on left side
  78. twitterText:"Elite video player", //first parametar of twitter share in twitter feed dialog is text
  79. twitterLink:"http://codecanyon.net/item/elite-video-player-wordpress-plugin/10496434", //second parametar of twitter share in twitter feed dialog is link
  80. twitterHashtags:"wordpressvideoplayer", //third parametar of twitter share in twitter feed dialog is hashtag
  81. twitterVia:"Creative media", //fourth parametar of twitter share in twitter feed dialog is via (@)
  82. logoShow:"Yes", //"Yes","No"
  83. logoClickable:"Yes", //"Yes","No"
  84. logoPath:"images/logo/logo.png", //path to logo image
  85. logoGoToLink:"http://codecanyon.net/", //redirect to page when logo clicked
  86. logoPosition:"bottom-left", //choose logo position: "bottom-right","bottom-left"
  87. embedShow:"Yes", //enable/disable embed option: "Yes","No"
  88. embedCodeSrc:"www.yourwebsite.com/videoplayer/index.html", //path to your video player on server
  89. embedCodeW:"746", //embed player code width
  90. embedCodeH:"420", //embed player code height
  91. embedShareLink:"www.yourwebsite.com/videoplayer/index.html", //direct link to your site (or any other URL) you want to be "shared"
  92. showGlobalPrerollAds: false, //enable/disable 'global' ads and overwrite each individual ad in 'videos' :true/false
  93. globalPrerollAds: "url1;url2;url3;url4;url5",//set 'pool' of url's that are separated by ; (global prerolls will play randomly)
  94. globalPrerollAdsSkipTimer: 5, //skip global advertisement seconds
  95. globalPrerollAdsGotoLink: "http://codecanyon.net/",//global advertisement goto link
  96. advertisementTitle:"Advertisement", //translate "Advertisement" title to your language
  97. skipAdvertisementText:"Skip advertisement", //translate "Skip advertisement" button to your language
  98. skipAdText:"You can skip this ad in", //translate "You can skip this ad in" counter to your language
  99. mutedNotificationText:"Video has no sound", //translate "Video has no sound" button to your language
  100. playBtnTooltipTxt:"Play", //translate "Play" to your language
  101. pauseBtnTooltipTxt:"Pause", //translate "Pause" to your language
  102. rewindBtnTooltipTxt:"Rewind", //translate "Rewind" to your language
  103. downloadVideoBtnTooltipTxt:"Download video", //translate "Download video" to your language
  104. qualityBtnOpenedTooltipTxt:"Close settings", //translate "Close settings" to your language
  105. qualityBtnClosedTooltipTxt:"Settings", //translate "Settings" to your language
  106. ccShowOnHTML5Videos: true, //enable/disable mp4 captions globally for all HTML5 videos
  107. ccShowOnVideoLoad: true, //enable/disable mp4 captions to display on HTML5 video load (if ccUrl is defined)
  108. ccBtnOpenedTooltipTxt:"Hide captions", //translate "Hide captions" to your language
  109. ccBtnClosedTooltipTxt:"Show captions", //translate "Show captions" to your language
  110. muteBtnTooltipTxt:"Mute", //translate "Mute" to your language
  111. unmuteBtnTooltipTxt:"Unmute", //translate "Unmute" to your language
  112. fullscreenBtnTooltipTxt:"Fullscreen", //translate "Fullscreen" to your language
  113. exitFullscreenBtnTooltipTxt:"Exit fullscreen",//translate "Exit fullscreen" to your language
  114. infoBtnTooltipTxt:"Show info", //translate "Show info" to your language
  115. embedBtnTooltipTxt:"Embed", //translate "Embed" to your language
  116. shareBtnTooltipTxt:"Share", //translate "Share" to your language
  117. volumeTooltipTxt:"Volume", //translate "Volume" to your language
  118. playlistBtnClosedTooltipTxt:"Show playlist", //translate "Show playlist" to your language
  119. playlistBtnOpenedTooltipTxt:"Hide playlist", //translate "Exit fullscreen" to your language
  120. facebookBtnTooltipTxt:"Share on Facebook", //translate "Share on Facebook" to your language
  121. twitterBtnTooltipTxt:"Share on Twitter", //translate "Share on Twitter" to your language
  122. lastBtnTooltipTxt:"Go to last video", //translate "Go to last video" to your language
  123. firstBtnTooltipTxt:"Go to first video", //translate "Go to first video" to your language
  124. nextBtnTooltipTxt:"Play next video", //translate "Play next video" to your language
  125. previousBtnTooltipTxt:"Play previous video", //translate "Play previous video" to your language
  126. shuffleBtnOnTooltipTxt:"Shuffle on", //translate "Shuffle on" to your language
  127. shuffleBtnOffTooltipTxt:"Shuffle off", //translate "Shuffle off" to your language
  128. nowPlayingTooltipTxt:"NOW PLAYING", //translate "NOW PLAYING" to your language
  129. embedWindowTitle1:"SHARE THIS PLAYER:", //translate "SHARE THIS PLAYER:" to your language
  130. embedWindowTitle2:"EMBED THIS VIDEO IN YOUR SITE:",//translate "EMBED THIS VIDEO IN YOUR SITE:" to your language
  131. embedWindowTitle3:"SHARE CURRENT VIDEO:", //translate "SHARE CURRENT VIDEO:" to your language
  132. copyTxt:"Copy",
  133. copiedTxt:"Copied!",
  134. youtubePlaylistID:"", //automatic youtube playlist ID (leave blank "" if you want to use manual playlist) PLuFX50GllfgP_mecAi4LV7cYva-WLVnaM
  135. youtubeChannelID:"", //automatic youtube channel ID (leave blank "" if you want to use manual playlist) UCHqaLr9a9M7g9QN6xem9HcQ
  136. youtubeChannelNumberOfVideos:"",
  137.  
  138. //manual playlist
  139. videos:[
  140. {
  141. videoType:"youtube", //choose video type: "HTML5", "youtube", "vimeo", "image"
  142. title:"Youtube video", //video title
  143. youtubeID:"0dJO0HyE8xE", //last part if the URL https://www.youtube.com/watch?v=0dJO0HyE8xE
  144. vimeoID:"119641053", //last part of the URL http://vimeo.com/119641053
  145. mp4HD:"http://creativeinteractivemedia.com/player/captions/developerStories-en.mp4", //HTML5 video HD mp4 url
  146. mp4SD:"http://creativeinteractivemedia.com/player/captions/developerStories-en.mp4", //HTML5 video SD mp4 url
  147. mp4VideoThumbnails_vtt:"captions/videoThumbnails.vtt", //mp4 thumbnails vtt file
  148. mp4VideoThumbnails_img:"captions/videoThumbnails.vtt", //mp4 thumbnails jpg file (single spritesheet)
  149. ccUrl: "", //mp4 captions url
  150. enable_mp4_download:"yes", //enable download button for self hosted videos: "yes","no"
  151. imageUrl:"images/preview_images/poster2.jpg", //display image instead of playing video
  152. imageTimer:4, //set time how long image will display
  153. prerollAD:"no", //show pre-roll "yes","no"
  154. prerollGotoLink:"http://codecanyon.net/", //pre-roll goto link
  155. preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4", //pre-roll video mp4 format
  156. prerollSkipTimer:5,
  157. midrollAD:"no", //show mid-roll "yes","no"
  158. midrollAD_displayTime:"00:10", //show mid-roll at any custom time in format "minutes:seconds" ("00:00")
  159. midrollGotoLink:"http://codecanyon.net/", //mid-roll goto link
  160. midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4", //mid-roll video mp4 format
  161. midrollSkipTimer:5,
  162. postrollAD:"no", //show post-roll "yes","no"
  163. postrollGotoLink:"http://codecanyon.net/", //post-roll goto link
  164. postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4", //post-roll video mp4 format
  165. postrollSkipTimer:5,
  166. popupImg:"images/preview_images/popup.jpg", //popup image URL
  167. popupAdShow:"no", //enable/disable popup image: "yes","no"
  168. popupAdStartTime:"00:03", //time to show popup ad during playback
  169. popupAdEndTime:"00:07", //time to hide popup ad during playback
  170. popupAdGoToLink:"http://codecanyon.net/", //re-direct to URL when popup ad clicked
  171. description:"Video description goes here.", //video description
  172. thumbImg:"images/thumbnail_images/pic1.jpg", //set "auto" or leave blank "" to grab it automatically from youtube, or set path to playlist thumbnail image
  173. 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
  174. },
  175. {
  176. videoType:"vimeo",
  177. title:"Vimeo vimeo",
  178. youtubeID:"0dJO0HyE8xE",
  179. vimeoID:"119641053",
  180. mp4HD:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",
  181. mp4SD:"http://creativeinteractivemedia.com/player/videos/PiecesSD.mp4",
  182. mp4VideoThumbnails_vtt:"captions/videoThumbnails.vtt",
  183. mp4VideoThumbnails_img:"captions/videoThumbnails.vtt",
  184. ccUrl: "",
  185. enable_mp4_download:"yes",
  186. imageUrl:"images/preview_images/poster2.jpg",
  187. imageTimer:4,
  188. prerollAD:"no",
  189. prerollGotoLink:"http://codecanyon.net/",
  190. preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",
  191. prerollSkipTimer:5,
  192. midrollAD:"no",
  193. midrollAD_displayTime:"00:10",
  194. midrollGotoLink:"http://codecanyon.net/",
  195. midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4",
  196. midrollSkipTimer:5,
  197. postrollAD:"no",
  198. postrollGotoLink:"http://codecanyon.net/",
  199. postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4",
  200. postrollSkipTimer:5,
  201. popupImg:"images/preview_images/popup.jpg",
  202. popupAdShow:"no",
  203. popupAdStartTime:"00:03",
  204. popupAdEndTime:"00:07",
  205. popupAdGoToLink:"http://codecanyon.net/",
  206. description:"Video description goes here.",
  207. thumbImg:"images/thumbnail_images/pic1.jpg",
  208. 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."
  209. },
  210. {
  211. videoType:"HTML5",
  212. title:"HLS m3u8 video",
  213. youtubeID:"0dJO0HyE8xE",
  214. vimeoID:"119641053",
  215. mp4HD:"https://content.jwplatform.com/manifests/yp34SRmf.m3u8",
  216. mp4SD:"https://content.jwplatform.com/manifests/yp34SRmf.m3u8",
  217. mp4VideoThumbnails_vtt:"captions/videoThumbnails.vtt",
  218. mp4VideoThumbnails_img:"captions/videoThumbnails.vtt",
  219. ccUrl: "",
  220. enable_mp4_download:"yes",
  221. imageUrl:"images/preview_images/poster2.jpg",
  222. imageTimer:4,
  223. prerollAD:"no",
  224. prerollGotoLink:"http://codecanyon.net/",
  225. preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",
  226. prerollSkipTimer:5,
  227. midrollAD:"no",
  228. midrollAD_displayTime:"00:10",
  229. midrollGotoLink:"http://codecanyon.net/",
  230. midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4",
  231. midrollSkipTimer:5,
  232. postrollAD:"no",
  233. postrollGotoLink:"http://codecanyon.net/",
  234. postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4",
  235. postrollSkipTimer:5,
  236. popupImg:"images/preview_images/popup.jpg",
  237. popupAdShow:"no",
  238. popupAdStartTime:"00:03",
  239. popupAdEndTime:"00:07",
  240. popupAdGoToLink:"http://codecanyon.net/",
  241. description:"Video description goes here.",
  242. thumbImg:"images/thumbnail_images/pic1.jpg",
  243. 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."
  244. },
  245. {
  246. videoType:"HTML5",
  247. title:"HTML5 video with captions",
  248. youtubeID:"0dJO0HyE8xE",
  249. vimeoID:"119641053",
  250. mp4HD:"http://creativeinteractivemedia.com/player/captions/developerStories-en.mp4",
  251. mp4SD:"http://creativeinteractivemedia.com/player/captions/developerStories-en.mp4",
  252. mp4VideoThumbnails_vtt:"captions/videoThumbnails.vtt",
  253. mp4VideoThumbnails_img:"captions/videoThumbnails.vtt",
  254. ccUrl: "http://creativeinteractivemedia.com/player/captions/developerStories-subtitles-en.vtt",
  255. enable_mp4_download:"yes",
  256. imageUrl:"images/preview_images/poster2.jpg",
  257. imageTimer:4,
  258. prerollAD:"no",
  259. prerollGotoLink:"http://codecanyon.net/",
  260. preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",
  261. prerollSkipTimer:5,
  262. midrollAD:"no",
  263. midrollAD_displayTime:"00:10",
  264. midrollGotoLink:"http://codecanyon.net/",
  265. midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4",
  266. midrollSkipTimer:5,
  267. postrollAD:"no",
  268. postrollGotoLink:"http://codecanyon.net/",
  269. postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4",
  270. postrollSkipTimer:5,
  271. popupImg:"images/preview_images/popup.jpg",
  272. popupAdShow:"no",
  273. popupAdStartTime:"00:03",
  274. popupAdEndTime:"00:07",
  275. popupAdGoToLink:"http://codecanyon.net/",
  276. description:"Video description goes here.",
  277. thumbImg:"images/thumbnail_images/pic1.jpg",
  278. 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."
  279. },
  280. {
  281. videoType:"HTML5",
  282. title:"Video title",
  283. youtubeID:"0dJO0HyE8xE",
  284. vimeoID:"119641053",
  285. mp4HD:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",
  286. mp4SD:"http://creativeinteractivemedia.com/player/videos/PiecesSD.mp4",
  287. mp4VideoThumbnails_vtt:"captions/videoThumbnails.vtt",
  288. mp4VideoThumbnails_img:"captions/videoThumbnails.vtt",
  289. ccUrl: "",
  290. enable_mp4_download:"yes",
  291. imageUrl:"images/preview_images/poster2.jpg",
  292. imageTimer:4,
  293. prerollAD:"no",
  294. prerollGotoLink:"http://codecanyon.net/",
  295. preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",
  296. prerollSkipTimer:5,
  297. midrollAD:"no",
  298. midrollAD_displayTime:"00:10",
  299. midrollGotoLink:"http://codecanyon.net/",
  300. midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4",
  301. midrollSkipTimer:5,
  302. postrollAD:"no",
  303. postrollGotoLink:"http://codecanyon.net/",
  304. postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4",
  305. postrollSkipTimer:5,
  306. popupImg:"images/preview_images/popup.jpg",
  307. popupAdShow:"no",
  308. popupAdStartTime:"00:03",
  309. popupAdEndTime:"00:07",
  310. popupAdGoToLink:"http://codecanyon.net/",
  311. description:"Video description goes here.",
  312. thumbImg:"images/thumbnail_images/pic1.jpg",
  313. 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."
  314. }
  315. ]
  316. });
  317. });
  318. </script>
  1. <div id="Elite_video_player"></div>

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

 

Elite Video Player supports VAST/VMAP/IMA ads.
 
These ads can be Linear and NonLinear:
 
 
Here's some explanation of VAST/VMAP/IMA meaning.

VAST - Video Ad Serving Template

VMAP - Video Multiple Ad Playlist

IMA - Interactive Media Ads

VAST / VMAP are xml files.
VMAP is playlist of VAST files.
VMAP containes one or more VAST files, where you can specify Ad breaks and also specify pre-roll/mid-roll/post-roll/nonlinear ads.
VMAP is not replacement for VAST.
Ads can be Linear (preroll/midroll/postroll video) and NonLinear (popup image).
 
In download package you'll find VAST and VMAP example xml files in folder "...assets/vast/xml"
 

VMAP

how to know if ad is preroll/midroll/postroll/nonlinear?

Open one of VMAP xml files from folder "...assets/vast/xml". You'll see timeOffset attribute, which tells you which ad type (pre-roll, mid-roll, post-roll, nonlinear) is xml file in <vmap:AdTagURI> ...VAST_xml_file_here </vmap:AdTagURI> tag.

  1. <vmap:AdBreak timeOffset="start"> - pre-roll
  2. <vmap:AdBreak timeOffset="end"> - post-roll
  3. <vmap:AdBreak timeOffset="50%"> - mid-roll
  4. <vmap:AdBreak timeOffset="00:05"> - mid-roll
 

VAST

VAST can also be single file only (no need for VMAP).
 
By default, single VAST xml file will represent pre-roll Ad.
 
But, you can use custom attribute timeOffset in <Ad> node to specify wheather the Ad is pre-roll/mid-roll/post-roll:
 
timeOffset="start" - pre-roll
timeOffset="end" - post-roll
timeOffset="00:05", "50%" - mid-roll
 
So, timeOffset is required to represent the timing for the ad break. If no timeOffset, ad break will be played as pre-roll.
 
Examples:
  1. <Ad timeOffset="start">.....</Ad> - this is preroll ad played at beggining of video
  2. <Ad timeOffset="00:05">...</Ad> - this is midroll ad at time 00:05
  3. <Ad timeOffset="end">....</Ad> - this is postroll ad played at end of video

AD POD

Ad Pod is term for playing back-to-back video ads, for example if you want to play 3 preroll ads in a row.
 

COMBINATION OF ADS:

In Elite video player you can combine self-hosted Prerolls with VAST and VMAP Prerolls.
 

SKIPPABLE / NON SKIPPABLE PARAMETAR (INLINE ADS)

VAST are by default non-skippable.

To make VAST skippable, add skipoffset attribute to VAST xml, into <Linear> tag:
  1. <Linear> - not skippable (default)
  2. <Linear skipoffset="00:00:05"> - skippable
If VAST doesn't have parameter skipoffset it will not be skippable.
 
Important note:
Time format in custom attributes (timeOffset, skipoffset) should be as hh:mm:ss
 
IMA tags official examples:
https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/tags
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: 
  1. 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:
  1. 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
With Google Analytics you can track Elite video player events:
 
- Main video watched (ended)
- Main video downloaded
- AD video watched (ended)
- AD video clicked
- AD video skipped after x seconds
 
 
1. first create Google account
 
2. once you have Google account go here:
 
https://marketingplatform.google.com/about/analytics/
 
to setup new Google Analytics account.
 
Click "Start For Free" and fill out the informations.
 
 
3. once you created Google Analytics account go to Analytics Home page
 
https://analytics.google.com/analytics/web/#/report-home/
 
and click ADMIN tab in bottom left corner.
 
 
4. Find "Tracking Info" and click "Tracking code".
 
copy code UA-87467628-3
 
and paste it into player options:
 
googleAnalyticsTrackingCode: "UA-87467628-3"
 
 
 
 
5. Than in left menu click "REAL TIME" -> "Events" -> "Events(last 30min)"
 
so you can track video player events in real time.
 

 

Here you can track Elite video player events:
 
- Main video watched (ended)
- Main video downloaded
- AD video watched (ended)
- AD video clicked
- AD video skipped after x seconds
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/playlist?list=PLuFX50GllfgP_mecAi4LV7cYva-WLVnaM
 
  1. 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
 
  1. youtubeChannelID: "UCHqaLr9a9M7g9QN6xem9HcQ"
 
or
 
URL: https://www.youtube.com/user/djolepiv
 
  1. 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 also limit the number of videos that will show from the channel, with option:
 
  1. youtubeChannelNumberOfVideos: ""
 
You can add videos manually one by one to your playlist.
 
You will need to set videoType for each video you add.
 
for HTML5 self-hosted video (from your own server, or, amazon s3, google drive, HLS m3u8, local mp4 videos, dropbox videos):
  1. videoType:"HTML5"
  1. mp4:"http://player.pageflip.com.hr/videos/Pieces.mp4"
 
for youtube video:
 
URL: https://www.youtube.com/watch?v=LfTLc5JGFPc
  1. videoType:"youtube"
  1. youtubeID:"LfTLc5JGFPc"
 
for vimeo video:
 
URL: http://vimeo.com/32707724
  1. videoType:"vimeo"
  1. vimeoID:"32707724"
 
for displaying image (instead of video):
  1. videoType:"image"
  1. imageUrl:"images/preview_images/poster2.jpg"
  1. imageTimer: 4
 
To add more videos just write " , " and duplicate all between curly brackets like this:
 
  1. ,
  2. {
  3. videoType:"youtube",
  4. title:"Youtube video",
  5. youtubeID:"0dJO0HyE8xE",
  6. vimeoID:"119641053",
  7. mp4HD:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",
  8. mp4SD:"http://creativeinteractivemedia.com/player/videos/PiecesSD.mp4",
  9. ccUrl: "http://creativeinteractivemedia.com/player/captions/developerStories-subtitles-en.vtt",
  10. enable_mp4_download:"no",
  11. imageUrl:"images/preview_images/poster2.jpg",
  12. imageTimer:4,
  13. prerollAD:"no",
  14. prerollGotoLink:"http://codecanyon.net/",
  15. preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",
  16. prerollSkipTimer:5,
  17. midrollAD:"no",
  18. midrollAD_displayTime:"00:10",
  19. midrollGotoLink:"http://codecanyon.net/",
  20. midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4",
  21. midrollSkipTimer:5,
  22. postrollAD:"no",
  23. postrollGotoLink:"http://codecanyon.net/",
  24. postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4",
  25. postrollSkipTimer:5,
  26. popupImg:"images/preview_images/popup.jpg",
  27. popupAdShow:"no",
  28. popupAdStartTime:"00:03",
  29. popupAdEndTime:"00:07",
  30. popupAdGoToLink:"http://codecanyon.net/",
  31. description:"Video description goes here.",
  32. thumbImg:"images/thumbnail_images/pic1.jpg",
  33. info:"Video info goes here."
  34. }
 
and you have succesfully added another video to the playlist. You can have unlimited videos in the playlist.
Closed Captions (Subtitles) can be displayed on the following videos:
- mp4 from your server (or any other server)
- Google Drive video
- Dropbox videos
- m3u8 HLS videos
 
 
* Self hosted videos require WebVTT format of subtitles (.vtt).
 
  If you have subtitles in SubRip Text (SRT) format, it can be easily converted to WebVTT using an online converter "srt2vtt":
  -> https://atelier.u-sub.net/srt2vtt/
 
* Example of WebVTT file:
http://creativeinteractivemedia.com/player/captions/developerStories-subtitles-en.vtt
 
* Details about WebVTT files can be found here: 
https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API#WebVTT_files
 
 
 
 
 *** Important notes
    - captions won't work locally, everything needs to be on the server
    - if your server still doesn't recognize captions, you probably need to add MIME type to config file:
      The MIME type of WebVTT is text/vtt.
 
 

You can display video thumbnails on mouse hover over progress bar. (option HTML5videoThumbnails)

Video thumbnails can be "live" or "vtt".

"live" - video thumbnails will be automatically generated live from video.

"vtt" - video thumbnails needs to be pre-configured with .vtt file and .jpg file (you can find them in folder /captions)

To turn off video thumbnails set "none".

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:

  1. prerollAD:"yes"
  2. preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4"
{
videoType:"youtube",                                                             
title:"Youtube video",                                                           
youtubeID:"0dJO0HyE8xE",                                                         
vimeoID:"119641053",                                                              
mp4:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",              
enable_mp4_download:"no",                                                        
imageUrl:"images/preview_images/poster2.jpg",                                    
imageTimer:4,    
prerollAD:"yes",                                                                  
prerollGotoLink:"http://codecanyon.net/",                                         
preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",  
prerollSkipTimer:5,

midrollAD:"no",                                                                   
midrollAD_displayTime:"00:10",                                                
midrollGotoLink:"http://codecanyon.net/",                                      
midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4", 
midrollSkipTimer:5,
postrollAD:"no",                                                               
postrollGotoLink:"http://codecanyon.net/",                                      
postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4", 
postrollSkipTimer:5,
popupImg:"images/preview_images/popup.jpg",                                      
popupAdShow:"no",                                                              
popupAdStartTime:"00:03",                                                       
popupAdEndTime:"00:07",                                                         
popupAdGoToLink:"http://codecanyon.net/",                                      
description:"Video description goes here.",                                    
thumbImg:"images/thumbnail_images/pic1.jpg",                                   
info:"Video info goes here."                                                                             
}
 
You can set to redirect URL when advertisement is clicked:
  1. 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):

  1. 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:

  1. midrollAD:"yes"
  2. midroll_mp4:"http://player.pageflip.com.hr/videos/Short_Elegant_Logo_Reveal.mp4"
{
videoType:"youtube",                                                             
title:"Youtube video",                                                           
youtubeID:"0dJO0HyE8xE",                                                         
vimeoID:"119641053",                                                              
mp4:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",              
enable_mp4_download:"no",                                                        
imageUrl:"images/preview_images/poster2.jpg",                                    
imageTimer:4,    
prerollAD:"no",                                                                  
prerollGotoLink:"http://codecanyon.net/",                                         
preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",  
prerollSkipTimer:5,
midrollAD:"yes",                                                                   
midrollAD_displayTime:"00:10",                                                
midrollGotoLink:"http://codecanyon.net/",                                      
midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4", 

midrollSkipTimer:5,
postrollAD:"no",                                                               
postrollGotoLink:"http://codecanyon.net/",                                      
postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4", 
postrollSkipTimer:5,
popupImg:"images/preview_images/popup.jpg",                                      
popupAdShow:"no",                                                              
popupAdStartTime:"00:03",                                                       
popupAdEndTime:"00:07",                                                         
popupAdGoToLink:"http://codecanyon.net/",                                      
description:"Video description goes here.",                                    
thumbImg:"images/thumbnail_images/pic1.jpg",                                   
info:"Video info goes here."                                                                             
}
 
You can set to redirect URL when advertisement is clicked:
  1. midrollGotoLink:"http://codecanyon.net/"
You can set when to show mid-roll video advertisement (in format minutes:seconds) :
  1. 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):

  1. 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:

  1. postrollAD:"yes"
  2. postroll_mp4:"http://player.pageflip.com.hr/videos/Short_Elegant_Logo_Reveal.mp4"
{
videoType:"youtube",                                                             
title:"Youtube video",                                                           
youtubeID:"0dJO0HyE8xE",                                                         
vimeoID:"119641053",                                                              
mp4:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",              
enable_mp4_download:"no",                                                        
imageUrl:"images/preview_images/poster2.jpg",                                    
imageTimer:4,    
prerollAD:"no",                                                                  
prerollGotoLink:"http://codecanyon.net/",                                         
preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",  
prerollSkipTimer:5,
midrollAD:"no",                                                                   
midrollAD_displayTime:"00:10",                                                
midrollGotoLink:"http://codecanyon.net/",                                      
midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4", 
midrollSkipTimer:5,
postrollAD:"yes",                                                               
postrollGotoLink:"http://codecanyon.net/",                                      
postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4", 
postrollSkipTimer:5,

popupImg:"images/preview_images/popup.jpg",                                      
popupAdShow:"no",                                                              
popupAdStartTime:"00:03",                                                       
popupAdEndTime:"00:07",                                                         
popupAdGoToLink:"http://codecanyon.net/",                                      
description:"Video description goes here.",                                    
thumbImg:"images/thumbnail_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:
  1. 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):

  1. 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:

  1. popupAdShow:"yes"
  2. popupImg:"images/preview_images/popup.jpg"
{
videoType:"youtube",                                                             
title:"Youtube video",                                                           
youtubeID:"0dJO0HyE8xE",                                                         
vimeoID:"119641053",                                                              
mp4:"http://creativeinteractivemedia.com/player/videos/Pieces.mp4",              
enable_mp4_download:"no",                                                        
imageUrl:"images/preview_images/poster2.jpg",                                    
imageTimer:4,    
prerollAD:"no",                                                                  
prerollGotoLink:"http://codecanyon.net/",                                         
preroll_mp4:"http://creativeinteractivemedia.com/player/videos/Short_Elegant_Logo_Reveal.mp4",  
prerollSkipTimer:5,
midrollAD:"no",                                                                   
midrollAD_displayTime:"00:10",                                                
midrollGotoLink:"http://codecanyon.net/",                                      
midroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Explode.mp4", 
midrollSkipTimer:5,
postrollAD:"no",                                                               
postrollGotoLink:"http://codecanyon.net/",                                      
postroll_mp4:"http://creativeinteractivemedia.com/player/videos/Logo_Light.mp4", 
postrollSkipTimer:5,
popupImg:"images/preview_images/popup.jpg",                                      
popupAdShow:"no",                                                              
popupAdStartTime:"00:03",                                                       
popupAdEndTime:"00:07",                                                         
popupAdGoToLink:"http://codecanyon.net/",        
                             
description:"Video description goes here.",                                    
thumbImg:"images/thumbnail_images/pic1.jpg",                                   
info:"Video info goes here."                                                                             
}
 
You can set to redirect URL when pop-up is clicked:
  1. popupAdGoToLink:"http://codecanyon.net/",
You can set when to show and hide pop-up image ad (in format minutes:seconds) :
  1. popupAdStartTime:"00:03"
  2. popupAdEndTime:"00:07"

 

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)).

  1. colorAccent:"#cc181e"

is equvalent to:

  1. 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:

  1. vimeoColor:"00adef", //set "hexadecimal value", default vimeo color is "00adef"
  2.  
  3. youtubeSkin:"dark", //youtube theme: light,dark
  4.  
  5. youtubeColor:"red", //youtube color: red, white

 

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

  1. 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:

  1. <script type="text/javascript" charset="utf-8">
  2. $(document).ready(function($)
  3. {
  4. videoPlayer = $("#Elite_video_player1").Video({
  5. });
  6. //add this for player 2
  7. videoPlayer = $("#Elite_video_player2").Video({
  8. });
  9. });
  10.  
  11. </script>
  12.  
  13. <body>
  14. <div id="Elite_video_player1"></div>
  15. //add this for player 2:
  16. <div id="Elite_video_player2"></div>
  17. </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:
 
  1. 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 will 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