Stellar 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!

Stellar Video Player main features

This is pure HTML5 video player that plays videos from:
 
- YouTube,
 
- Vimeo,
 
- self hosted videos (mp4),
 
- Google Drive video,
 
- Amazon S3 video,
 
- local videos,
 
- Dropbox video,
 
- LiveStreaming HLS m3u8 videos,
 
with optional pre-roll,  mid-roll, post-roll and pop-up advertising system for each video you create.
 
Player can be used with playlist (with unlimited videos) , or as single video player.

Directory and files explanation

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

documentation - documentation how to install and use Stellar video player

jQuery plugin - jQuery version of Stellar video player

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

 

Installation

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

1. Automatically

To install plugin automatically:

- unzip downloaded content from CodeCanyon

- login into your wordpress Admin panel,

- select Plugins -> Add New -> Upload plugin

 

- in unzipped content go to 'main' folder 

- click on 'Choose file' and select 'Stellar-video-player.zip'  

- click  'Install Now'

- click 'Activate plugin'

 

 

2. Manuall copy/paste into your wordpress: 

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

 - unzip downloaded content from CodeCanyon

 - go into 'main' folder

 - unzip 'Stellar-video-player.zip'

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

- go to 'plugins' folder

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

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

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

go to your Wordpress Admin page and activate the plugin:

Create player

Once you have Stellar Video Player activated you can start creating your player.

To create your first player simply click admin button,

or click 'Stellar video player' directly from Admin page menu (you'll see play icon in wordpress menu) lik showed below:

 

 

 

Then, you can create your first player by clicking either

'Add New'

or 'Create New Player'

 

Player Admin Panel

There you'll see menu:

'Player settings'

'Video Settings'

 

Player settings - here you'll setup player functionality

Video Settings - here you'll setup videos

 

 

Player Settings containes intuitive tabs where you can setup your layout & functionality:

(you can leave default settings if you don't wan't special customisation)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Adding videos

To add video to player, first select video player 'type' by clicking 'videos' from main menu.

You can choose one of 5 types of videos:

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

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

 

 

1. HTML5 (self-hosted) - manually build your playlist with self hosted mp4 videos, GoogleDrive, AmazonS3, local, or HLS m3u8 videos:

 

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

 

3. YouTube playlist - automatically generated playlist (if you have custom playlist on 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.com

 

Adding Advertising

Each video from playlist (or single video) can have it's own advertising (preroll, midroll, postroll, popup).

Preroll advertising will play video before main video.

Midroll advertising will play video at any time you set (00:10 - 00:20 second of the main video)

Postroll advertising will play video when main video finishes.

Popup advertising (custom image) can be showed at any time during main video (00:05 - 00:35 second of the main video).

 

 

 

Self-hosted video formats (mp4)

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.

 

Embedding (into page or post)

To embedd 'Stellar Video Player' into page or post , copy/paste shortcode 

[Stellar_video_player id="YOUR_PLAYER_ID"]

 

Once you have set up your player, save settings and go back to the players list by clicking 'back to players list':

 

 

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

:

 

 

Insert into post:

- go to Posts -> Edit Post (or new post), paste your shortcode and click 'update':

 

 

Insert into page:

- go to Pages-> Edit Page (or new page), insert your shortcode and click 'update':

 

 

Google Drive

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

Customize look

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

Popular pre-built colors you can use:

 

 

 

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"

Embed code settings

Visitors of your wordpress site can use embed code option to embed your video player in their HTML sites.
 
How embed code works:
 
you have folder called "jQuery plugin" that containes jQuery version of the player (not related to wordpress).
 
In there you will find "source" and "deploy" folders that are the same only "deploy" containes minified code and "source" containes all source code.
 
Edit index.html (in deploy folder) to setup the jQuery version of the player (in index.html are all plugin options - width, height, videos etc...).
 
You need to upload your "deploy" folder to your server for example to "new folder".
 
Than, you will have jQuery video player in the:
 
http://yourserver/new folder/deploy/index.html
 
 
 
Go to your wordpress plugin options and set :
Embed code iframe src: http://yourserver/new folder/deploy/index.html
 
 
and than in your wordpress, player embed code will be shown as set above.

Special notes

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.

Rate the item

If you like this product we would appreciate your rating on CodeCaynon :)

Here's how you can do that:

More works by CreativeMedia

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