“LeadSeven Video Player ” by LeadSeven
“LeadSeven Video Player”
Created: 06/12/2015
By:© LS (LeadSeven)
Email: support@leadseven.com
Thank you for purchasing our product. This video plugin comes as a bonus. If you have any questions that are beyond the scope of this help file, please feel free to email via our email. Thanks so much!
Table of Contents
- Important notes read this before anything else.
- Embed LeadSeven Video Player into your html page.
- Install LeadSeven Video Player in fullscreen and popup.
- Constructor parameters.
- Setup playlists.
- Setup video, ads and poster source.
- Setup facebook share button.
- API.
A) Important notes make sure you read this! - Table of Contents
Please note that the LeadSeven Video Player installation and configuration is not complicated but because it has a lot of customizable settings it might seem complicated, please go through the entire documentation before trying to install it into your own page. Basically what it must be done is to copy some html code from the examples we provided and paste it into your own html page and of course add your own video file.
LeadSeven Video Player only requires the mp4 video format and it will work in all browsers on a desktop machine or on a mobile device, this is extremely important because there is no need to create multiple video formats for browsers that dose not support mp4, also please note that the mp4 video format is recommended and used by all major browsers distributors like Google, Microsoft, Apple, Mozzila etc.!
On IE8 or Firefox under MAC the flash player is used because this browsers doesn't support mp4 videos, if your videos doesn't start until they are fully loaded then they are encoded with the metadata at the end, this can be easily fixed by using this tool
The server is character case sensitive so make sure that the LeadSeven Video Player settings are identical to those from the provided examples.
When using mp4 video files located on your server with relative paths you must add all folders that contains mp4's videos in the content folder, this is extremely important in order for all features to work correctly.
When testing local on IE7/IE8 or on an older browser that dose not support HTML5 video it will not work because the flash (.swf) file is trying to communicate with the browser and this is not allowed, of course it will work fine when tested online.
Some of the features will not work local like the share button or playing youtube videos on some browsers like IE and Opera, this is normal behavior because most browser does not allow this, once uploaded on the server it will function properly.
When something is wrong with a LeadSeven Video Player action a red info box with the problem description will appear over the LeadSeven Video Player, please note that this box is there to help you understand the problem, for example if a mp4 video file is not found the box will appear and inform you about the problem. The box can be closed when clicked or touched.
The LeadSeven Video Player skin is constructed from .png images, only a few settings for changing colors are possible like changing the time color. If you want a different skin the .png files must be modified. The skin is really flexible this is allowing to skin the LeadSeven Video Player as you like. We have a great designer in our team so if you need a custom skin please contact us!
B) Embed LeadSeven Video Player into your html page. - Table of Contents
This is a small tutorial about how to embed the PSVP into your page. LeadSeven Video Player can be e embedded into a html page inside a div of your choosing, it will adapt it's width and height based on the maxWidth and maxHeight properties specified in the constructor, if the page is resized and the parent div width is smaller then the maxWidth property the PSVP will adapt its size accordingly.
In the download files there is a start folder and in this folder there are html files starting with the label "responsive", each of this examples have exactly the same structure with different constructor settings. You can use one of them to copy and paste the required html code based on skin that you need, I will use the responsive-skin-minimal-dark.html as an example for this tutorial.
The skin is created using javascript and .png images, if you want a custom skin please contact us. If you want to create a skin of your own modify the ones we already provided.
- Copy and paste the content folder and the java folder into the same folder with your .html file, inside the content folder there are other folders which are self explanatory. Keep only the skin folder that you need to save space on the server.
- Open responsive-skin-minimal-dark.html with a text editor.
- The javascript and CSS files must be imported, in the head section of your html file add the code from the below image.
This is how the player is installed in a HTML page, please read the Constructor parameters section to understand the LeadSeven Video Player properties
C) Install LeadSeven Video Player in fullscreen and popup. - Table of Contents
To install the PSVP player in fullscreen the exact same steps as in the Embed LeadSeven Video Player into your html page must be followed, the only difference is that the displyType property must be set to fullscreen as follows : displyType:"fullscreen". Inside the start folder there are html files examples for each skins, this examples are starting with the label "fullscreen".
To popup the PSVP there is a POPUP-example.html example includded in the start file. Please check out the source to see how this is accomplished.
D) Constructor parameters. - Table of Contents
Please open any of the .html files provided with a text editor as reference.
These parameters represents the possible setting for the LeadSeven Video Player they are all visible below and described below.
//-- global settings --//- LSVPlayer.useYoutube:"yes" - this can be yes or no. If you don't use youtube videos always set this to no, it will improve the overall performance and loading time.
- instanceName:"player1" - The player instance name, trough this instance the API is called for example if the instance name is "player1" and if you want to call play() method it is called like this player1.play();.
- parentId:"myDiv" - The id of the div into which the PSVP is added, this id must be unique.
- playlistsId:"playlists" - The id of the ul html element that represents the playlists, for more info please read Setup playlists.
- mainFolderPath:"content" - The main folder path. This folder contains some important files like the php files and the mp4 video files, in this folder you need to add your mp4 video folders or mp4 video files.
- skinPath:"content/minimal_skin_dark" - The skin path, the folder that contains the skin graphics.
- displayType:"responsive" - This can be responsive or fullscreen, if you want to embed the player in your page inside the div then set this to responsive, if you want the player to always fill the browser window width and height set it to fullscreen.
- facebookAppId:"648425545260862" - this represents the APP id used by facebook to share tracks, for more info about how to get your own facebook APP id and setup facebook share button please read Setup facebook share button.
- useDeepLinking:"yes" - this can be yes or no. Allow or not deeplinking, if deeplinking is disabled the facebook share button will share the current page url.
- addKeyboardSupport:"yes" - this can be yes or no. Enable or disable the keyboard space bar to pause or play the video.
- stopVideoWhenPlayComplete:"yes" - this can be yes or no, if this is enabled when the video playback is complete the video will stop and the poster if any is showed.
- autoPlay:"no" - this can be yes or no.
- loop:"no" - this can be yes or no.
- autoScale:"yes" - this can be yes or no.If set to yes the PSVP height will always be proportional to the PSVP width, if set to no the height will be fixed based on the maxHeight property.
- shuffle:"no" - this can be yes or no.
- maxWidth:750 - a number that represents the player maximum width in pixels, think of this property as it would be the max-width css property (only applies if the displayType is responsive).
- maxHeight:750 - a number that represents the player maximum height in pixels, think of this property as it would be the max-height css property (only applies if the displayType is responsive).
- volume:.8 - A number from 0.1 to 1 that represents the volume level.
- backgroundColor:"#000000" - the main background color.
- posterBackgroundColor:"#000000" - The video poster background color, if you want a transparent background set this to transparent.
- showLogo:"yes" - This can be yes or no, hides or show the logo.
- hideLogoWithController:"yes" - This can be yes or no. If is set to yes the logo will hide when the controller hides otherwise it will always be visible over the video.
- logoLink:"http://www.yourlink.com" - The page link that will open when the logo is clicked, the none value will disable this feature.
- logoPosition:"topRight" - This can be topRight, topLeft, bottomRight, bottomLeft, used to position the logo in one of the video corners.
- logoMargins:"20" - Margins in px to push the logo from the video corners.
- logoURL:"http://dp7lgaqv6nb2s.cloudfront.net/home/wp-content/uploads/2014/12/logo_final1.png" - Path to the logo image.
- showPlaylistsButtonAndPlaylists:"yes" - this can be yes or no, disable or enable the playlists button and playlists window.
- showPlaylistsByDefault:"yes" - this can be yes or no, if this is set to yes the playlists window is showed as soon as the LeadSeven Video Player is loaded and displayed.
- thumbnailSelectedType:"threshold" - this can be threshold, opacity or blackAndWhite, it represents the playlist thumbnail selected state (please note that this setting is always opacity when tested local or on a mobile device).
- startAtPlaylist:0 - a number that represents the playlist that will be loaded when the PSVP loads the first time, if deeplinking is used and the browser url has a playlist link this option is ignored. The playlists count starts from 0 (zero).
- buttonsMargins:0 - Margins for the next, previous and close buttons.
- thumbnailMaxWidth:330 - a number that represents the thumbnail maximum width, the width of the thumbnail will vary based on the available space but it will never be higher then this option.
- thumbnailMaxHeight:330 - a number that represents the thumbnail maximum width in pixels, the height of the thumbnail will vary based on the available space but it will never be higher then this option.
- horizontalSpaceBetweenThumbnails:40 - a number that represents the horizontal space in pixels between thumbnails.
- verticalSpaceBetweenThumbnails:40 - a number that represents the vertical space in pixels between thumbnails.
- showPlayListButtonAndPlaylist:"yes" - this can be yes or no. Disable or enable (hide or show) the playlist button and playlist.
- playlistPosition:"bottom" - this can be bottom or right.
- showPlayListByDefault:"yes" - this can be yes or no, if this is set to yes the playlist is showed as soon as the PSVP is loaded and displayed otherwise the playlist is hidden and it will only appear if the playlist button is clicked or touched.
- showPlaylistToolTips:"yes" - this can be yes or no. Disable or enable the video description tooltip that appears when the thumbnails are hovered.
- forceDisableDownloadButtonForFolder:"yes" - this can be yes or no. Disable or enable the download button for a playlist that is loading videos from a folder.
- addMouseWheelSupport:"yes" - this can be yes or no.
- startAtRandomVideo:"yes" - this can be yes or no, if this is set to yes when the first time the playlist is loaded a random video will play.
- folderVideoLabel:"Video - " - this represents the start label for videos that are loaded from a folder, after this label the counting video number will be added by the script for example Video - 1, Video - 2 etc.
- startAtVideo:"0" - a number that represents the video that will be loaded when the PSVP loads the first time, if deeplinking is used and the browser url has a video link this option is ignored. The video count starts from 0 (zero).
- maxPlaylistItems:50 - this is useful if the number of playlist items must be limited, for example if a playlist is loaded from Youtube and it has 1000 videos it will be to large to display so the playlist will display only 50 videos, if you want to load the total available videos without limitation set this number to a large number like 10000.
- playlistToolTipMaxWidth:270 - maximum width of the thumbnails description tooltip.
- thumbnailWidth:120 - thumbnails width in pixels.
- thumbnailHeight:90 - thumbnails height in pixels.
- spaceBetweenControlerAndPlaylist:90 - space between the video control bar and playlist.
- playlistToolTipFontColor:"#FFFFFF" - default font color for the video description tooltip.
- showButtonsToolTip:"yes" - this can be yes or no, enable or disable the control bar button tooltips.
- showControllerWhenVideoIsStopped:"yes" - this can be yes or no, if this is set to yes the control bar is showed when the video is stopped and the video poster is visible otherwise it the control bar is hidden until the video starts to play.
- showVolumeScrubber:"yes" - this can be yes or no. Hide or show the volume scrubber.
- showVolumeButton:"yes" - this can be yes or no. Hide or show the volume button.
- showTime:"yes" - this can be yes or no. Hide or show the video current and total time indicator.
- showLoopButton:"yes" - this can be yes or no. Hide or show the loop button.
- showShuffleButton:"yes" - this can be yes or no. Hide or show the shuffle button.
- showYoutubeQualityButton:"yes" - this can be yes or no. Hide or show the youtube quality button (this only applies if the video is played from Youtube).
- showDownloadButton:"yes" - this can be yes or no. Globally hide or show the video download button.
- showFacebookButton:"yes" - this can be yes or no. Hide or show the facebook button.
- showEmbedButton:"yes" - this can be yes or no. Hide or show the embed button.
- showFullScreenButton:"yes" - this can be yes or no. Hide or show the fullscreen button.
- repeatBackground:"yes" - this can be yes or no. Repeat or not the control bar background.
- buttonsToolTipHideDelay:1.5 - delay in seconds until the button tooltip appears when the button is hovered.
- controllerHeight:70 - the controller height in pixels.
- controllerHideDelay:2 - a number that represents the seconds until the control bar is hiding after a period of inactivity.
- startSpaceBetweenButtons:10 - a number that represents the space between buttons in pixels, ilustrated below with the red arrows.
- spaceBetweenButtons:10 - a number that represents the space between buttons in pixels, ilustrated below with the red arrows.
- mainScrubberOffestTop:14 - the amount in pixels to push the main scrubber up when the controller is hiding.
- scrubbersOffsetWidth:10 - a number that represents the total amount in pixels removed from the scrubber bars progress line when they are at the end (change number to understand it better, useful based on the skin type).
- timeOffsetLeftWidth:10 - a number that represents the an addition in px to the space between the time indicator left side and the scrubber.
- timeOffsetLeftWidth:10 - a number that represents the an addition in px to the space between the time indicator left side and the scrubber.
- timeOffsetRightWidth:10 - a number that represents the an addition in px to the space between the time indicator right side and the volume button or any other button that will follow the time indicator.
- timeOffsetTop:10 - a number that represents the an addition in px to time position on the y axis.
- volumeScrubberWidth:70 - the width of the volume srubbar.
- volumeScrubberOffsetRightWidth:10 - a number that represents the an addition in px to the space between the volume scrubbar right side and the facebook share button or any other button that will follow the volume scrubbar.
- timeColor:"#888888" - the video time indicator color.
- youtubeQualityButtonNormalColor:"#888888" - the youtube quality buttons text normal color.
- youtubeQualityButtonSelectedColor:"#FFFFFF" - the youtube quality buttons text selected / hover color.
+
- embedWindowCloseButtonMargins:0 - Margins for the next, previous and close buttons.
- borderColor:"#333333" - the border color of the main windows.
- mainLabelsColor:"#FFFFFF" - the color for the main labels.
- secondaryLabelsColor:"#a1a1a1" - the color for the secondary labels.
- shareAndEmbedTextColor:"#5a5a5a" - the color for the share and embed text.
- inputBackgroundColor:"#000000" - the background color for the input texts.
- inputColor:"#000000" - the color for the input texts.
//ads
E) Setup playlists. - Table of Contents
Open with a text editor one of the html files from the start folder.
Setting up the playlists window is simple, an ul tag must be added in the body tag, this ul tag must have an unique id that is passed as a value to the PSVP constructor as follows playlistsId"unique-id", in the examples provided the id is "playlists" but it can be have any value as long as it is unique.
To add/remove a playlist an li tags must be added/removed inside the playlists ul tag, this is illustrated below. The LeadSeven Video Player supports unlimited playlists but at least one playlist is required!.
There are four playlist type as follow: HTML, YOUTUBE, and XML. Each of this type of playlists are explained in detail below, please note that this playlist can contain both mp4 and youtube video files this way a mixed playlist can be created.
HTML playlist.
To add/remove this type of playlist in the playlists add or remove the code from the below image into the playlists ul tag.The data-source represents the id of the playlist ul element. The other attributes are self explanatory.
Title: My playlist 1
Type: HTML
Description: Created using html elements, videos are loaded and played from the server.
To construct this type of playlist add the code from the below image inside the body HTML element. The code sample is self explanatory. To add/remove videos add/remove li HTML elements with the data-thumb-source attribute.
YOUTUBE playlist.
To add/remove this type of playlist add or remove the code from the below image into the playlists ul tag.The data-source represents the youtube playlist id. The other attributes are self explanatory.
When adding the youtube plauylist id data-source attribute a special string must be added before it, this string value is list=, so for example if youtube playlist id is 289858 the final string must look like this list=289858.
Title: My playlist 2
Type: YOUTUBE
Description: Created by loading a Youtube playlist, videos are loaded and played from Youtube.
XML playlist.
To add/remove this type of playlist in the playlists add or remove the code from the below image into the playlists ul tag. The data-source represents the path of the XML file. Please note that the XML path must be absolute, ex: http://www.domain.com/xmlFile.xml. The other attributes are self explanatory. Please note that the XML file does not allow special characters like "&", if you need to use this type of character numeric characters are required, a useful table with all this special characters can be found at this url.
Title: My playlist 5
Type: XML
Description: Created using a XML file, videos are loaded and played from the server or Youtube.
F) Setup video, ads and poster source. - Table of Contents
The LeadSeven Video Player can play mp4 videos from your server, a different server or from youtube. If you are using relative source paths for your videos make sure that all of them are situated inside the content folder, this is really important in order for the player to function correctly,
If you are using a HTML or XML playlist to play a video from your server set the data-video-source attribute to point to the mp4 video path, relative or absolute paths can be used, also PSVP can be set to play a source for desktop machines and a source for mobile devices, this is done by separating the sources with ",". Please note that the mobile source is optional if you want a single source for all situations set a single source, this is illustrated in the below image. Don't leave any white spaces after the "," separators!. ( the same rules apply to the video poster source with once exception, if you don't need a poster set data-poster-source="none").
Each video can contain a description in tooltip style, the tooltip size can be modified based on your project and of course it can contain HTML CONTENT this way it can be formatted as you like.
To add an advertisement video follow the same rules as above the only difference is that there are some extra attributes that must be added. Below there is an example with an advertisement video, all extra attributes are self explanatory. Please note that an advertisement video can be set to play a source for desktop machines and a source for mobile devices, this is done by separating the sources with ",". Please note that the mobile source is optional if you want a single source for all situations set a single source. The global ads settings are set in the constructor, for more information about this please read the constructor parameters in the ads subsection.
Facebook Audience Insights
To play a video from youtube set the videoSource property to point to the youtube video id, this is ilustrated below. Is important to note that a youtube video id is always constructed from 11 characters.
Facebook Audience Insights
G) Setup facebook share button. - Table of Contents
In order for the facebook share button to function a facebook app key is required, this key is obtained by setting up a facebook app as follows:
- Login into your facebook account.
- Open the following link https://developers.facebook.com/apps.
- Click + Add New App button and complete the fields, it's not important the values passed to the display name and namespace fields, the only requirement is that in the category drop down box to select Apps for pages.
- A new page will appear, in this page from the left menu bar select Settings. The Settings page will open, in this page the App ID is displayed, this id must be passed into the LeadSeven Video Player constructor as follows facebookAppId:your app id here, example below.
- Next step is to click the Add Platform button and from the popup window click on the Website icon.
- A new entry will be added in the Settings page labeled Website, in this tab set the Site URL and the Mobile Site URL to the domain name where the player is uploaded, example below.
- After this additions make sure you save the changes by pressing the Save Changes button.
- Last step is to select from the left menu bar Status & Review, in this page there is a button that is referring to "Do you want to make this app and all its live features available to the general public?" that must be set to yes, example below.
One important thing to note is that the LeadSeven Video Player domain name must be identical with the url passed to the facebook app, for example if the LeadSeven Video Player domain name is http://www.some-domain.com and the facebook app is configured with the url/domain name http://some-domain.com it will not work, both url / domain names must be exactly the same.
H) API. - Table of Contents
Inside the donwload files there is HTML file called API-example.html, in this file I have added all events and methods for reference, open the page source to see them. Full reference below. Please note that the properties are read only and they can only be written in the consturctor for more info about this please read the Constructor parameters section.
API - public methods:
| Function | Method | Description |
|---|---|---|
downloadVideo |
downloadVideo(pId:Number):String | Download video based on id. |
getVideoSource |
getVideoSource():String | Return the video source path if the video is from the server or youtube id if the video is playing from youtube. |
getPosterSource |
getPosterSource():String | Return the poster source. |
getCurrentTime |
getCurrentTime():String | Return the current time source. |
getTotalTime |
getTotalTime():String | Return the video total time / duration. |
goFullScreen |
goFullScreen():void | Set video player to fullscreen. |
play |
play():void | Start / play playback. |
playNext |
playNext():void | Start / play next video. |
playPrev |
playPrev():void | Start / play previous video. |
playShuffle |
playShuffle():void | Start / play shuffle video. |
pause |
pause():void | Pause the playback. |
setVideoSource |
setVideoSource(videoSource:String):void | Set the video source path or youtube video id. Please read the Setup video, ads and poster source. |
setPosterSource |
setPosterSource(posterSource:String):void | Set the poster source path. Please read the Setup video, ads and poster source. |
share |
share():void | Share current track on facebook. |
setVolume |
setVolume( Number ):void | Set the video volume, this method accepts a parameter that represents a number between 0 (video mute state) and 1 (video maximum volume). |
scrub |
scrub( Number ):void | Notify instance to scrub (set the video position), this method accepts a parameter that represents a number between 0 (video start position) and 1 (video end position). |
stop |
stop():void | Stops the playback and the loading process if the loading process has started. |
API - event listeners:
| Event | Prefix | Description |
|---|---|---|
error |
LSVPlayer.ERROR |
Dispatched when the LeadSeven Video Player instance can't load or play the video file, this event has a property of type string that represents the error message. |
goFullScreen |
LSVPlayer.GO_FULLSCREEN |
Dispatched when the LeadSeven Video Player is set to fullscreen. |
goNormalScreen |
LSVPlayer.GO_NORMALSCREEN |
Dispatched when the LeadSeven Video Player is set to normalscreen. |
ready |
LSVPlayer.READY |
Dispatched when the LeadSeven Video Player instance API is actually available. |
stop |
LSVPlayer.STOP |
Dispatched when the LeadSeven Video Player instance is stopped. |
play |
LSVPlayer.PLAY |
Dispatched when the LeadSeven Video Player instance playback start to play. |
pause |
LSVPlayer.PAUSE |
Dispatched when the LeadSeven Video Player instance playback is paused. |
update |
LSVPlayer.UPDATE |
Dispatched when the LeadSeven Video Player instance is playing and it's position is changing (useful to update a custom scrub bar), this event has a property of type number between 0 (video start position) and 1 (video end position). |
updateTime |
LSVPlayer.UPDATE_TIME |
Dispatched when the LeadSeven Video Player instance current duration is changing. This event has two properties of type string curTime and totalTime. |
updateVideoSource |
LSVPlayer.UPDATE_VIDEO_SOURCE |
Dispatched when the LeadSeven Video Player instance current video source is modified. |
updatePosterSource |
LSVPlayer.UPDATE_POSTER_SOURCE |
Dispatched when the LeadSeven Video Player instance current poster source is modified. |
startToLoadPlaylist |
LSVPlayer.START_TO_LOAD_PLAYLIST |
Dispatched when the LeadSeven Video Player playlist is starting to load. |
playListLoadComplete |
LSVPlayer.LOAD_PLAYLIST_COMPLETE |
Dispatched when the LeadSeven Video Player playlist is loaded. |
playComplete |
LSVPlayer.PLAY_COMPLETE |
Dispatched when the LeadSeven Video Player instance playback has reached the end of the video file. |