“Royal Video Player ” Documentation by FWDesign

---

“Royal Video Player”

---

Table of Contents

1. Important notes read this before anything else.
2. Embed Royal Video Player into your html page.
3. Install Royal Video Player in fullscreen.
4. Constructor parameters.
5. Setup playlists.
6. Setup video and poster source.
7. Setup facebook share button.
8. API.
9. Sources and Credits

---

A) Important notes make sure you read this! - top

Please note that the Royal 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.

Royal 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 Royal 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 Royal Video Player action a red info box with the problem description will appear over the Royal 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 Royal 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 Royal 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 Royal Video Player into your html page. - top

This is a small tutorial about how to embed the RVP into your page. Royal 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 RVP 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.

• You need a div into which the RVP will be added as a child, create a div and set an id for it, the id is important because it is passed in the RVP constructor, make sure it is unique. The RVP is responsive as follows, the width and height will adapt based on the maxWidth and maxHeight property specified in the constructor, if the page is resized and the parent div width is smaller then the maxWidth property the RVP will adapt its size accordingly.

• Next step is to set up the playlists, to do this copy and paste the ul element with the id playlists into the body element, this id is passed into the constructor property playlistsId, this is how the playlists are identified. Illustrated below, please note that the code from the image is minified to save space. For more info about playlists please read Setup playlists.

• Next step is to initialize the RVP with javascript, in the head section of your html page add the code from the below image. Please note that all parameters are described in the constructor parameters section.

This is how the player is installed in a HTML page, please read the Constructor parameters section to understand the Royal Video Player properties

C) Install Royal Video Player in fullscreen and popup. - top

To install the RVP layer in fullscreen the exact same steps as in the Embed Royal 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 RVP 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. - top

Please open any of the .html files provided with a text editor as reference.

These parameters represents the possible setting for the Royal Video Player they are all visible in the below image and described below.

//-- global settings --//

• FWDEVPlayer.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.

//-- main settings --//

• 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 RVP 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:"213684265480896" - 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.
• showContextMenu:"yes" - this can be yes or no. Enable or disable the "Made by FWD" right click context menu. We would appreciate if you can leave this option set to yes.
• addKeyboardSupport:"yes" - this can be yes or no. Enable or disable the keyboard space bar to pause or play the video.
• autoPlay:"no" - this can be yes or no.
• loop:"no" - this can be yes or no.
• 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.

//-- logo settings --//

• 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.
• 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.

//-- playlists / categories window settings --//

• 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 Royal 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 RVP 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.

//-- playlist settings --//

• 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 RVP 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.
• 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 RVP 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.

//-- controller settings --//

• 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.

• 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.

//-- embed window --//

• 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.

E) Setup playlists. - top

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 RVP 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 in the below image. The Royal Video Player supports unlimited playlists but at least one playlist is required!.

There are four playlist type as follow: HTML, YOUTUBE, XML and folder. 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.

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.

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.

FOLDER 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 path of the mp4's folder (please note that this type of playlist can only be loaded from the same domain on which the html page resides, also the folder path must be relative to the path of the "proxyFolder.php", what this means is that your mp4's folder must be in the same folder or subfolder with the "proxyFolder.php" file in the content folder). The other attributes are self explanatory. To add thumbnails create an image with the same name as the mp4 file and add -thumbnail after it like this myMp4Video-thumbnail, for example if the video is called myVideo.mp4 the thumbnail should be myVideo-thumbnail.jpg

When adding the folder path to the data-source attribute a special string must be added before it, this string value is folder=, so for example if the mp4's folder path is myFolder the final string must look like this folder=myFolder. For a folder with a mp4's subfolder ex: myFolder/myMp4Folder the final string must look like this folder=myFolder/myMp3Folder. Try not to use special characters in your video names, it is possible that the script will ignore them if they have heavy names with special characters or white spaces.

F) Setup video and poster source. - top

The Royal 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 RVP 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").

To play a video from youtube set the videoSource property to point to the youtube video id, this is ilustrated in the below image. Is important to note that a youtube video id is always constructed from 11 characters.

G) Setup facebook share button. - top

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.
• From the top bar menu select Apps - > Create 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 Royal Video Player constructor as follows facebookAppId:your app id here, example in the below image.

• 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 in the below image.
• 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 in the below image.

One important thing to note is that the Royal Video Player domain name must be identical with the url passed to the facebook app, for example if the Royal 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. - top

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 and poster source.
setPosterSource	setPosterSource(posterSource:String):void	Set the poster source path. Please read the Setup video 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	FWDEVPlayer.ERROR	Dispatched when the Royal 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	FWDEVPlayer.GO_FULLSCREEN	Dispatched when the Royal Video Player is set to fullscreen.
goNormalScreen	FWDEVPlayer.GO_NORMALSCREEN	Dispatched when the Royal Video Player is set to normalscreen.
ready	FWDEVPlayer.READY	Dispatched when the Royal Video Player instance API is actually available.
stop	FWDEVPlayer.STOP	Dispatched when the Royal Video Player instance is stopped.
play	FWDEVPlayer.PLAY	Dispatched when the Royal Video Player instance playback start to play.
pause	FWDEVPlayer.PAUSE	Dispatched when the Royal Video Player instance playback is paused.
update	FWDEVPlayer.UPDATE	Dispatched when the Royal 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	FWDEVPlayer.UPDATE_TIME	Dispatched when the Royal Video Player instance current duration is changing. This event has two properties of type string curTime and totalTime.
updateVideoSource	FWDEVPlayer.UPDATE_VIDEO_SOURCE	Dispatched when the Royal Video Player instance current video source is modified.
updatePosterSource	FWDEVPlayer.UPDATE_POSTER_SOURCE	Dispatched when the Royal Video Player instance current poster source is modified.
startToLoadPlaylist	FWDEVPlayer.START_TO_LOAD_PLAYLIST	Dispatched when the Royal Video Player playlist is starting to load.
playListLoadComplete	FWDEVPlayer.LOAD_PLAYLIST_COMPLETE	Dispatched when the Royal Video Player playlist is loaded.
playComplete	FWDEVPlayer.PLAY_COMPLETE	Dispatched when the Royal Video Player instance playback has reached the end of the video file.

I) Sources and Credits - top

This component was made by Tibi from FWD (FWDesign) FLASH WEB DESIGN, for more information and support contact us at contact@webdesign-flash.ro

Once again, thank you so much for purchasing this item. As I said at the beginning, I'd be glad to help you if you have any questions regarding this Royal Video Player and I'll do my best to assist.

FWDesign

Go To Table of Contents

---