Elite Video Player - WordPress 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 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)

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

 

 

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)

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

 

 

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

 

6. Mixed videos:  

You can also use different videos per player.

 

 

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
 
To add subtitles go to Videos -> (Add New Video) -> Subtitles url -> Select subtitles and upload your .vtt file in Media Library, select .vtt file and click Select.
If you already have .vtt file on your server, insert url into "Subtitles url" field.
 
 
* 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.

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

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

2. "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".

 

To enable LIVE video thumbnails go to:

- Player settings -> HTML5 Player -> HTML5 video progress thumbnails, and select "live".

 

 

To enable VTT video thumbnails go to:

- Player settings -> HTML5 Player -> HTML5 video progress thumbnails, and select "vtt".

Than go to:

- Videos (Select video player type : HTML5 self-hosted)

-> Video thumbnails .vtt, and select your configured .vtt file (see example in folder captions/videoThumbnails.vtt file)

-> Video thumbnails .jpg, and select your sprite sheet image (see example in folder captions/videoThumbnails.jpg file)

 

 

*** Important notes

    - vtt video thumbnails 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.

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.

Shortcode parameter can accept array of multiple values. (each value is for 1 video in playlist, in order, separated by , without spaces between)
 
For example:
 
shortcodeparameter='value1,value2,value3'

for playlist video 1->value1
for playlist video 2->value2
for playlist video 3->value3 
 
List of shortcode parameters that can have multiple values:
 
html5videos_sd='video1SD.mp4,video2SD.mp4,video3SD.mp4'
html5videos_hd='video1HD.mp4,video2HD.mp4,video3HD.mp4',
html5videos_videoThumbnails_vtt='videoThumbnails1.vtt,videoThumbnails2.vtt,videoThumbnails3.vtt'
html5videos_videoThumbnails_img='videoThumbnails1.jpg,videoThumbnails2.jpg,videoThumbnails3.jpg,'
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)
 
 
LIST ALL SHORTCODE OPTIONS:
 
[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'
    playlistShowOnlyThumbnails='false'
    playlistOrder='0,1,2'
    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'
    HTML5videoThumbnails='live'
    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_videoThumbnails_vtt='videoThumbnails1.vtt,'videoThumbnails3.vtt,'videoThumbnails3.vtt'
    html5videos_videoThumbnails_jpg='videoThumbnails1.jpg,'videoThumbnails3.jpg,'videoThumbnails3.jpg'
    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'
*** youtubeAPIkey='YouTube API key'
    youtubePlaylistID='YouTube Playlist ID'
    youtubeChannelID='YouTube channel ID'                
]

 

 

*** youtubeAPIkey is required if you use youtube videos through shortcode parameters

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 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
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:
 
General Settings -> Google Analytics tracking code: "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

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"

Visitors of your wordpress site can use embed code option to embed your video player in their HTML websites.
 
In download package there is folder called embed.
 
To setup embed code, you need to upload embed folder anywhere on your server.
 
Than,
 
go to your wordpress -> Elite Video Player -> Manage Elements, and set path from your server where you have uploaded embed folder (http://yourserver/embed/index.html)
 
Embed code iframe src: http://yourserver/embed/index.html 
 
 
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 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