Elite Video Player - WordPress plugin

• created: 02/20/2015
• latest update: 09/9/2019
• by: _CreativeMedia_
• codecanyon.net/user/_creativemedia_/portfolio

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 my user page contact form on CodeCanyon. Thanks so much!

This is HTML5 ready video player for wordpress that plays videos from:

- YouTube (single, channel, playlist),

- Vimeo,

- self-hosting videos (only mp4 required),

- Google drive videos,

- Dropbox videos,

- local videos,

- Amazon S3

- and LiveStreaming HLS m3u8 videos

with optional pre-roll advertising system for each video you create.

Player supports playlist (with unlimited videos) which can be on right-side/bottom 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:

documentation - documentation how to install and use Elite video player

jQuery plugin - jQuery version of Elite video player

Elite-video-player.zip - wordpress plugin of Elite video player

You can install 'Elite-video-player' plugin on 2 ways:

1. Automatically (most common)

To install plugin automatically:

- unzip downloaded content from CodeCanyon

- login into your wordpress Admin panel,

- select Plugins -> Add New

- click on 'Upload plugin' -> 'Choose file' and select 'Elite-video-player.zip' file from 'main' folder ( from unzipped content)

- click  'Install Now'

- click 'Activate plugin'

2. Manuall copy/paste into your wordpress: 

To install 'Elite-video-player' plugin manually:

 - unzip downloaded content from CodeCanyon

 - go into 'main' folder

 - unzip 'Elite-video-player.zip'

 - Go to your 'wordpress' folder and find 'wp-content'

- go to 'plugins' folder

- copy/paste folder called 'Elite-video-player' into 'wp-content/plugins'

- 'plugins' folder structure should look like this now:

Once you have placed 'Elite-video-player' into 'wp-content/plugins' ,

go to your Wordpress Admin page and activate the plugin:

Once you have Elite video player activated you can start creating your player.

To create your first player you need to go to the player admin page:

- select 'Elite video player' directly from Admin page menu

(or select 'Admin' on Elite video player plugin section)

Then, you can create your first player by selecting 'Create New Player'

Player admin page have one main menu: 'Player settings', and 'Videos'

Player settings - all global player settings

Videos - all videos in player

All player settings:

To add video to player, select video player 'type':

You can choose one of 5 types of videos:

1. HTML5 (self-hosted) - manually build your playlist with self hosted videos.

This is used for:

- mp4 from your server,

- Dropbox,

- Google Drive,

- Amazon S3,

- Openload,

- HLS m3u8,

- or direct mp4 Vimeo url.

Please read Support section on how to play different Self hosted videos:

https://codecanyon.net/item/elite-video-player-wordpress-plugin/10496434/support

2. YouTube - manually build your playlist with videos from youtube

3. YouTube playlist - automatically generated playlist (if you have custom playlist on youtube)

4. YouTube channel - automatically generated playlist (if you have youtube channel and want to always load all videos into player , including last uploaded on your channel)

5. Vimeo - manually build your playlist with videos from vimeo

First, select video player type.

Than, setup your videos.

Examples of different video types:

- mp4 from own server : http://creativeinteractivemedia.com/player/videos/Pieces.mp4

- HLS Livestream m3u8 example: http://www.streambox.fr/playlists/x31e0e7/x31e0e7.m3u8

- Google Drive video example  : https://https:/drive.google.com/uc?export=download&id=0B_w6KZmZrs5gZkM1Y0J2M1F2S2c

- Dropbox video example : https://dl.dropboxusercontent.com/s/2vk6th1v9e8fqci/Broadcast_People_Package.mp4?dl=0

***Important note***:

These videos should work directly in browser address bar (video will be played or downloaded automatically).

If video url throws error, it will not display in Elite video player so please test your url in browser first.

If you use Youtube/Vimeo, you need ID, which is last part of the url:

- Youtube single video example : https://www.youtube.com/watch?v=S5x_P0j89dU (youtubeID -> S5x_P0j89dU)

- Youtube playlist example : https://www.youtube.com/playlist?list=PLuFX50GllfgP_mecAi4LV7cYva-WLVnaM

(youtubePlaylistID -> PLuFX50GllfgP_mecAi4LV7cYva-WLVnaM)

- Youtube channel example : https://www.youtube.com/channel/UCHqaLr9a9M7g9QN6xem9HcQ

(youtubeChannelId -> UCHqaLr9a9M7g9QN6xem9HcQ)

- Vimeo video example: https://vimeo.com/12027904

(VimeoID -> 12027904)

1. HTML5 (self-hosted) - manually build your playlist with self hosted videos.

This is used for:

- mp4 from your server

- Dropbox,

- Google Drive,

- Amazon S3,

- Openload,

- HLS m3u8,

- or direct mp4 Vimeo url.

Please read Support section on how to play different Self hosted videos:

https://codecanyon.net/item/elite-video-player-wordpress-plugin/10496434/support

2. YouTube singles - manually build your playlist with videos from youtube

3. YouTube playlist - automatically generated playlist (you can use any custom playlist from youtube)

4. YouTube channel - automatically generated playlist (if you have youtube channel and want to always load all videos into player , including last uploaded on your channel)

5. Vimeo - manually build your playlist with videos from vimeo

6. Mixed videos:  

You can also use different videos per player.

If your goal is to have many single videos accross website pages here's short tutorial how to do that quick and easy. 

No need to create new player each time, just use Duplicate button for every next video you want to post, and just change it's mp4 url (or whichever video type you're using - Youtube ID,Vimeo ID etc.)

https://www.youtube.com/watch?v=S5x_P0j89dU

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 insert 'EliteVideo Player' you need to use shortcode [Elite_video_player id="YOUR_PLAYER_ID"]

Save your settings and go back to the players list by clicking 'back to players list':

You can insert 'EliteVideo Player' into any page or post just by copying shortcode (into page or post):

You can pass parameters to shortcode directly, so you don't need to go to Player Settings each time you want to change player setting.

shortcodeparameter='value1,value2,value3'

for playlist video 1->value1
for playlist video 2->value2
for playlist video 3->value3 

html5videos_sd='video1SD.mp4,video2SD.mp4,video3SD.mp4'
html5videos_hd='video1HD.mp4,video2HD.mp4,video3HD.mp4',
html5videos_title='title1,title2,title3'
html5videos_description='description1,description2,description3'
html5videos_thumb='thumb1,thumb2,thumb3'
html5videos_info='info1,info2,info3'
html5videos_captions='captions1.vtt, captions2.vtt,captions3.vtt'
prerolls='videoAD1.mp4,videoAD2.mp4,videoAD3.mp4'
prerolls_skipseconds='5,5,5'
prerolls_redirectonclick='url1,url2,url3'
midrolls='videoAD1.mp4,videoAD2.mp4,videoAD3.mp4',
midrolls_displaytime='00:05.00:05,00:05'
midrolls_skipseconds='5,5,5'
midrolls_redirectonclick='url1,url2,url3'
postrolls='videoAD1.mp4,videoAD2.mp4,videoAD3.mp4'
postrolls_skipseconds='5,5,5'
postrolls_redirectonclick='url1,url2,url3'
popups='image1.jpg,image2.jpg,image3.jpg'
popups_displaytime='00:02,00:02,00:02'
popups_hidetime='00:08,00:08,00:08'
popups_redirectonclick='url1,url2,url3'
youtubevideos='youtubeID1,youtubeID2,youtubeID3'                (youtubeID=0dJO0HyE8xE, from https://www.youtube.com/watch?v=0dJO0HyE8xE)
vimeovideos='vimeoID1,vimeoID2,vimeoID3'                        (vimeoID=119641053, from https://vimeo.com/119641053)

[Elite_video_player id="1" 
    videoRatio=1.777 
    googleAnalyticsTrackingCode='UA-87467628-3' 
    instanceTheme='dark' 
    playerLayout='fixedSize' 
    videoPlayerWidth=1006 
    videoPlayerHeight=420 
    iOSPlaysinline=true 
    floatPlayerOutsideViewport=true 
    lightBox=false lightBoxAutoplay=false 
    lightBoxThumbnail='http://creativeinteractivemedia.com/player/Elite_video_player/wp-content/uploads/2016/11/poster.jpg' 
    lightBoxThumbnailWidth=200 
    lightBoxThumbnailHeight=220 
    lightBoxCloseOnOutsideClick=true 
    videoPlayerShadow='effect3' 
    playlist='Right playlist' 
    playlistBehaviourOnPageload='opened (default)' 
    youtubeControls='custom controls' 
    youtubeQuality='default' 
    youtubeShowRelatedVideos='Yes' 
    vimeoColor='00adef' 
    colorAccent='#cc181e' 
    onFinish='Play next video' 
    autoplay=false 
    loadRandomVideoOnStart='No' 
    posterImg='http://creativeinteractivemedia.com/player/Elite_video_player/wp-content/uploads/2016/11/poster.jpg' posterImgOnVideoFinish='http://creativeinteractivemedia.com/player/Elite_video_player/wp-content/uploads/2016/11/poster2.jpg' 
    HTML5VideoQuality='HD' 
    preloadSelfHosted='none' 
    hideVideoSource=false 
    showAllControls=true 
    rightClickMenu=true 
    ccShowOnHTML5Videos=true 
    ccShowOnVideoLoad=true 
    autohideControls=5 
    hideControlsOnMouseOut='No' 
    shuffle='No' 
    nowPlayingText='Yes' 
    rewindShow='Yes' 
    qualityShow='Yes' 
    infoShow='Yes' 
    shareShow='Yes' 
    facebookShow='Yes' 
    twitterShow='Yes' 
    logoShow='Yes' 
    logoPath='http://creativeinteractivemedia.com/player/Elite_video_player/wp-content/uploads/2016/11/logo.png' 
    logoPosition='bottom-left' 
    logoClickable='Yes' 
    logoGoToLink='https://codecanyon.net/' 
    allowSkipAd=true 
    embedShow='Yes' 
    showGlobalPrerollAds=false 
    globalPrerollAds='url1;url2;url3;url4;url5' 
    globalPrerollAdsSkipTimer=5 
    globalPrerollAdsGotoLink='http://codecanyon.net/'
    html5videos_sd='video1SD.mp4,video2SD.mp4,video3SD.mp4'
    html5videos_hd='video1HD.mp4,video2HD.mp4,video3HD.mp4',
    html5videos_title='title1,title2,title3'
    html5videos_description='description1,description2,description3'
    html5videos_thumb='thumb1,thumb2,thumb3'
    html5videos_info='info1,info2,info3'
    html5videos_captions='captions1.vtt, captions2.vtt,captions3.vtt'
    prerolls='videoAD1.mp4,videoAD2.mp4,videoAD3.mp4'
    prerolls_skipseconds='5,5,5'
    prerolls_redirectonclick='url1,url2,url3'
    midrolls='videoAD1.mp4,videoAD2.mp4,videoAD3.mp4',
    midrolls_displaytime='00:05.00:05,00:05'
    midrolls_skipseconds='5,5,5'
    midrolls_redirectonclick='url1,url2,url3'
    postrolls='videoAD1.mp4,videoAD2.mp4,videoAD3.mp4'
    postrolls_skipseconds='5,5,5'
    postrolls_redirectonclick='url1,url2,url3'
    popups='image1.jpg,image2.jpg,image3.jpg'
    popups_displaytime='00:02,00:02,00:02'
    popups_hidetime='00:08,00:08,00:08'
    popups_redirectonclick='url1,url2,url3'
    youtubevideos='youtubeID1,youtubeID2,youtubeID3'                
    vimeovideos='vimeoID1,vimeoID2,vimeoID3'                        
]

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 Youtube player use this options:

To customize Vimeo player use this options:

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

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

AddType video/mp4 .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:

Please check our portfolio and latest products here:

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