“Ultimate Video Player ” Documentation by FWDesign


Ultimate Video Player

Created: 28/08/2014
By:© FWD (FUTURE WEB DESIGN)
Email: contact@webdesign-flash.ro

Thank you for purchasing our script. 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

  1. Important notes read this before anything else.
  2. Embed Ultimate Video Player into your html page.
  3. Install Ultimate Video Player in fullscreen and popup.
  4. Constructor parameters.
  5. Setup playlists.
  6. Setup video, ads 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 Ultimate 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.

Ultimate 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, Safari under WIndows, 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 Ultimate 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 Ultimate Video Player action a red info box with the problem description will appear over the Ultimate 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 Ultimate Video Player skin is constructed from .png images, only a few settings for changing colors are possible like changing the time color, thumbnails text color etc. If you want a different skin the .png files must be modified. We have a great designer in our team so if you need a custom skin please contact us!

B) Embed Ultimate Video Player into your html page. - top

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

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

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

To install the UVP player in fullscreen the exact same steps as in the Embed Ultimate Video Player into your html page must be followed, the only difference is that the displayType property must be set to fullscreen as follows : displayType:"fullscreen". Inside the start folder there are html files examples for each skins, this examples are starting with the label "fullscreen".

To popup the UVP 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 Ultimate Video Player they are all visible below.

			
//-- global settings --// //-- main settings --// //-- logo settings --// //-- playlists / categories window settings --// //-- playlist settings --// //-- controller settings --// //-- embed window and info window --// //ads
  • openNewPageAtTheEndOfTheAds:"no" - If this is set to yes when the ad video has finished to play a new web page will open with the url specified in the item playlist markup.
  • playAdsOnlyOnce:"no" - this can be yes or no, if set to yes after an ad video has played it will not play again if the same video is selected from the playlist.
  • adsButtonsPosition:"right" - this can be left or right and represents the ads info and button position over the video.
  • skipToVideoText:"You can skip to video in: " - the text that will appear in the skip info screen.
  • skipToVideoButtonText:"Skip Ad " - the text that will appear in the ads skip button.
  • adsTextNormalColor:"#777777" - the normal color for the text for both ads skip info screen and ads skip button.
  • adsTextSelectedColor:"#FFFFFF" - the selected color for the text for both ads skip info screen and ads skip button.
  • adsBorderNormalColor:"#444444" - the normal color for the border for both ads skip info screen and ads skip button.
  • adsBorderSelectedColor:"#FFFFFF" - the selected color for the border for both ads skip info screen and ads skip button.



  • 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 UVP 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 code. The Ultimate 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 illustrated below 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 3

    Type: MIXED

    Description: Created using HTML elements, videos are loaded and played from the server or Youtube.

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

  • FOLDER playlist.

    To add/remove this type of playlist add or remove the code illustrated below 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.

    		
  • Title: My playlist 4

    Type: FOLDER

    Description: Created using a folder with mp4 files, videos are loaded and played from the server.



  • F) Setup video, ads and poster source. - top

    The Ultimate 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 UVP 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").

    		
  • VIDEO TITLE

    Each video can contain a short description, the description can be formatted with CSS as you like.

    VIDEO TITLE

    Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.

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

    		
  • VIDEO TITLE

    Each video can contain a short description, the description can be formatted with CSS as you like.

    VIDEO TITLE

    Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.

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

    		
  • LORA PUISOR

    Each video can contain a short description, the description can be formatted with CSS as you like.

    LORA - PUISOR

    Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.

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

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

    playVideo

    playVideo(videoId):void Play a video based on the videoId, the count is starting from 0.

    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.

    showCategories

    showCategories():void Show the categories windows.

    API - event listeners:

    Event Prefix Description

    error

    FWDUVPlayer.ERROR

    Dispatched when the Ultimate 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

    FWDUVPlayer.GO_FULLSCREEN

    Dispatched when the Ultimate Video Player is set to fullscreen.

    goNormalScreen

    FWDUVPlayer.GO_NORMALSCREEN

    Dispatched when the Ultimate Video Player is set to normalscreen.

    ready

    FWDUVPlayer.READY

    Dispatched when the Ultimate Video Player instance API is actually available.

    stop

    FWDUVPlayer.STOP

    Dispatched when the Ultimate Video Player instance is stopped.

    play

    FWDUVPlayer.PLAY

    Dispatched when the Ultimate Video Player instance playback start to play.

    pause

    FWDUVPlayer.PAUSE

    Dispatched when the Ultimate Video Player instance playback is paused.

    update

    FWDUVPlayer.UPDATE

    Dispatched when the Ultimate 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

    FWDUVPlayer.UPDATE_TIME

    Dispatched when the Ultimate Video Player instance current duration is changing. This event has two properties of type string curTime and totalTime.

    updateVideoSource

    FWDUVPlayer.UPDATE_VIDEO_SOURCE

    Dispatched when the Ultimate Video Player instance current video source is modified.

    updatePosterSource

    FWDUVPlayer.UPDATE_POSTER_SOURCE

    Dispatched when the Ultimate Video Player instance current poster source is modified.

    startToLoadPlaylist

    FWDUVPlayer.START_TO_LOAD_PLAYLIST

    Dispatched when the Ultimate Video Player playlist is starting to load.

    playListLoadComplete

    FWDUVPlayer.LOAD_PLAYLIST_COMPLETE

    Dispatched when the Ultimate Video Player playlist is loaded.

    playComplete

    FWDUVPlayer.PLAY_COMPLETE

    Dispatched when the Ultimate 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) FUTURE 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 Ultimate Video Player and I'll do my best to assist.

    FWDesign

    Go To Table of Contents