LambertGroup - HTML5 Video Player with Multiple Skins

This plugin requires at least WordPress 3.0

 

 

Video Tutorials

Step 1: Installation – https://www.youtube.com/watch?v=scpeZjw1F64
Step 2: How To Create a Video Player and How To Change the Player Settings – https://www.youtube.com/watch?v=HvsiOPyFwZA

Step 3: How To Create Multiple Players And Use The Shortcode Optional Parameters - https://www.youtube.com/watch?v=REgltNEdWtE

 

Plugin Instalation

Step 1. Enter in your wordpress CMS and go to Plugins menu
Step 2. Under Plugins menu click "Add New"
Step 3. Select "Upload", choose the archive lbg-vp1-html5.zip that you downloaded and hit "Install Now"
Step 4. After the plugin is installed click "Activate Plugin"
Step 5. In you page just add the shortcode: [lbg_vp1_html5 settings_id='1']
click here for more details regarding the shortcode

 

Files & Folders Structure

css the folder contains the .css files used by the pluging
images the folder contains the images used by the pluging
js the folder contains the .js files used by the pluging
lbg_vp1_html5 the folder contains the .js & .css files that the video player use. It also contains the "videos" folder where you'll upload the videos in case you'll stream the videos directly from your server
tpl the folder contains the template files used by the pluging
lbg-vp1-html5.php the plugin itself
   

 

Manage Players

From this section you can define the players.
If you need to include multiple players in your pages with different settings and playlist you can define the players and manage the settings for each one.
If you need only one player in your website, just edit the default one.

 

Player Settings

From this section you can define the video player settings.

General Settings
Player Width player width
Player Height player height
Skin Name available skins:
- universalBlack
- universalWhite
- giant
- futuristicElectricBlue
- futuristicChrome
- elegantMinimal
Responsive Possible values:
true - the banner will responsive
false - the banner will not be responsive
Responsive Relative To Browser Possible values:
true - the banner will be responisve relatively to browser dimensions
false - the banner will be responisve relatively to parent div
Width 100% Possible values:
true - the player width will be 100%
false - the player width will be what you've set for Player Width
Height 100% Possible values:
true - the video height will be 100%
false - the video height will be what you've set for Player Height
Seek Bar Adjust

This value will reduce the length of seek bar

Recommended values:

- universalBlack: 220
- universalWhite: 220
- giant: 390
- futuristicElectricBlue: 255
- futuristicChrome: 255
- elegantMinimal: 0
Show Information Button You can show or hide the info button.
Possible values:
true - show info button
false - hide info button
Preload Specifies if and how the author thinks the video should be loaded when the page loads
Loop Video Possible values:
true - starts next movie after current movie has finished
false - doesn't start next movie after current movie has finished
Auto Play true if you want your video to autoplay, and false otherwise
Auto Play On Mobile Possible values:
true - the video will autoplay on mobile devices
false - the video will not autoplayon mobile devices

NOTE: for the moment only IOS allows autoplay and only if the video is muted. When you set autoPlayOnMobile:true, the video will mute automatically for mobile devices.
Initial Volume Value the initial volume value. It takes values between 0-1
Link To Go When Video Ends The link to open when the video ends
Target Window For Link Possible values:
'_blank' - the link will open in a new window
'_slef'- the link will open in the same window
   
Video Sources
Movie Title movie title
Movie Description movie description
Preview optional you can upload a preview image is you set autoplay=false
MP4 file .mp4 file link
WebM .webm file link
   

 

.htaccess

For Mozzila and IE9 please use the .htaccess present in the .zip file if the videos are not played. This video is not played because your server is not transmitting the correct MIME TYPE and the .htaccess tries to correct the server problem.

Also, if you need to increase the wordpress media library upload file size limit add the following definitions in the .htaccess file

<IfModule mod_php5.c>
php_value post_max_size 50M
php_value upload_max_filesize 50M
php_value memory_limit 500M
</IfModule>

 

ShortCode

The shortcode is:
[lbg_vp1_html5 settings_id='1']
where
'settings_id' is the player ID defined in "Manage Players" section - mandatory parameter

OPTIONAL PARAMETERS:

'mp4_file' is the link to the .mp4 file, in case you don't want to use 'Playlist' section - optional parameter
'webm_file' is the link to the .webm file, in case you don't want to use 'Playlist' section - optional parameter
'preview_file' is the link to the preview image file, in case you don't want to use 'Playlist' section - optional parameter
'movie_title' is the movie title, in case you don't want to use 'Playlist' section - optional parameter
'movie_desc' is the movie description, in case you don't want to use 'Playlist' section - optional parameter

'mp4_custom_field' is the custom field name which will hold the link to the .mp4 file, in case you don't want to use 'Playlist' section - optional parameter
'webm_custom_field' is the custom field name which will hold the link to the .webm file, in case you don't want to use 'Playlist' section - optional parameter
'preview_custom_field' is the custom field name which will hold the link to the preview image file, in case you don't want to use 'Playlist' section - optional parameter
'movie_title_custom_field' is the custom field name which will hold the movie title, in case you don't want to use 'Playlist' section - optional parameter
'movie_desc_custom_field' is the custom field name which will hold the movie description, in case you don't want to use 'Playlist' section - optional parameter