“Ultimate Video Player ” Documentation by FWDesign


Ultimate Video Player

Version: 8.0
By:© FWD (FUTURE WEB DESIGN)
Email: tibi_diablo@yahoo.com

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 (pre-roll / mid-roll / post-roll), subtitles, hls, 360 video and poster source.
  7. Setup pop-up image ads and google adsense pop-up ads.
  8. Setup cuepoints.
  9. API.
  10. Setup annotations.
  11. Setup private videos.
  12. Encrypt video / subtitle path.
  13. Google Drive, Dropbox, Amazon S3.
  14. Start / stop video at a specified time.
  15. Advertisement on pause window.
  16. VAST / VMAP / Google Doubleclick IMA (video adsense).
  17. Setup google analytics.
  18. Redirect / open page when the video has finished to play.
  19. Starting / stopping the video at a specified time using timestamps.
  20. A to B loop.
  21. Thumbnails preview.
  22. Chromecast.
  23. Hex colors.
  24. 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 and js code from the examples I 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.!

Vimeo videos are disabeld by default because they are not working local, the Vimeo API dosen't work local so it has to be disable in order to setup the player and test local, to enable it set useVimeo:"yes"

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. This might change in future versions of this browsers as they improve.

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.

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 prt 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

Lightbox installation. - top

To install the UVP player in lightbox the exact same steps as in the Responsive installation must be followed, the only difference is that the displyType property must be set to lightbox as follows : displyType:"lightbox". Inside the start folder there is a HTML file as reference called LIGHTBOX-example.html.

Sticky installation. - top

To install the UVP player in a sticky display type the exact same steps as in the Responsive installation must be followed, the only difference is that the displyType property must be set to sticky as follows : displyType:"sticky". Inside the start folder there is a HTML file as reference called STICKY-example.html.

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 --// //advertisement on pause window //-- logo settings --// //-- playlists / categories window settings --// //-- playlist settings --// //-- audio visualizer --// closeLightBoxWhenPlayComplete:"no", //-- lightbox settings --// //- sticky on scroll settings --/
  • stickyOnScroll:"no" - This can be yes or no. If you want show the player in a sticky form when the page is scrolled and the player is not in the viewport area set this to yes otherwise leave it no.
  • stickyOnScrollShowOpener:"no" - This can be yes or no.
  • stickyOnScrollWidth:700 - The maximum width in px.
  • stickyOnScrollHeight:394 - The maximum height in px.
  • //-- sticky display settings --// //-- loggin --// //-- controller settings --// //-- subtitle --// //-- embed window and info window --// //-- playback rate / speed --// //-- cuepoints --// //-- ads --// //-- a to b loop --// //-- context menu --//


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

    			

    To create a private playlist add the attribute data-password inside the playlist tag and set the password using the encryption tool here, example below.

    		
  • >

    Title: My HTML playlist 1

    Type: HTML

    Description: Created using HTML markup, all format are supported and it can have mixed video formats.

  • Theree 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. There is an optional parameter called data-scrub-at-time-at-first-play, this allows to scrub te video at a specified time the first time the video plays so for example to scrub the video at minute 01 at first play set this attribute to data-scrub-at-time-at-first-play="00:01:00", the format time is "hours:minutes:seconds". Please note that you can set multiple video sources by passing an object of videos like showed in the below example to the data-video-source you can also pass the video source directly without an object form like this data-video-source="content/videos2/fwd-480p.mp4"

    		
    		

    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.

    Please note that an API youtube key has to be created and used, for more information please watch this video tutorial

    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 Youtube playlist 1

    Type: YOUTUBE

    Description: Created by loading a Youtube playlist, video 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 XML playlist 1

    Type: XML

    Description: Created using a XML file, videos are played self or external hosted. 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, the same applies if you want a poster for the video but the poster image has to have the name isnted of -thumbnail.jpg set to -poster.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 mp4 folder playlist 1

    Type: FOLDER

    Description: Created using a folder with mp4 files, all format are supported and it can have mixed video formats.



  • Vimeo album / 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 vimeo album URL, the data-user-id represents the vimeo user id.

    Because this section is a bit complicated I decided to create a video tutorial, please watch it here

    		
  • Title: My vimeo album 1

    Type: VIMEO ALBUM

    Description: Created using a Vimeo album URI.



  • F) Setup video, ads (pre-roll / mid-roll / post-roll), subtitles, hls, 360 video and poster source. - top

    The Ultimate Video Player can play mp4 videos from your server, a different server, from youtube or vimeo. 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. 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"). Also it is possible to add multiple sources for videos as illustrated below and switch between them using the video quality selector.

    		
  • Multiple Subtitles & Video Quality

    Each video can have one or more subtitles (txt or srt).

  • To add one or more advertisement (pre-roll/mid-roll/post-roll) video an ul element with the data attribute data-ads has to be added inside the video data li element, this is better explained below. 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.

    Inside the element with the data-ads attribute the ads are added in li elements, you can add as many as you like by stacking them one after eachother. Each element contains the ads data as follows :

    data-source - the ad source, it can be a mp4 video path, an image path or a youtube video url.
    data-time-start - the ad start time when it will appear in hours:minutes:seconds format.
    data-time-to-hold-ads - the ad time until the skip button will appear in seconds format. If you don't want the skip button to appear just set this to 0 ex: data-time-to-hold-ads="0".
    data-thumbnailSource - optional tumbnail source that will appear as a small preview in the skip button.
    data-link - the link to open when the ad is clicked.
    data-target - the link target (_blank or _self).
    data-add-duration - this is optional if the ad is an image and it represents the time to hold the image ad in in hours:minutes:seconds format.

    		

    Multiple Subtitles & Video Quality

    Each video can have one or more subtitles (txt or srt).

  • To play a video from youtube set the videoSource property to point to the youtube video id, this is illustrated 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.

  • To play a video from vimeo set the videoSource property to point to the vimeo video url, this is illustrated below.

    		
  • HLS / LIVE STREAMING / m3u8 EXAMPLE

    HTTP Live Streaming / HLS / m3u8 video support on all browsers.

    HLS / LIVE STREAMING / m3u8 EXAMPLE

    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 360 degree / VR video set the videoSource property to point to the video url and add an extra parameter that will enable this feature for this video data-is360="yes", this is illustrated below.

    		
  • 360 DEGREE VR VIDEO EXAMPLE

    Virtual reality 360 degree / VR support.

    360 DEGREE VR VIDEO EXAMPLE

    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 HLS / live streming / m3u8 video set the videoSource property to point to the video url, this is illustrated below.

    		
  • HLS / LIVE STREAMING / m3u8 EXAMPLE

    HTTP Live Streaming / HLS / m3u8 video support on all browsers.

    HLS / LIVE STREAMING / m3u8 EXAMPLE

    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 audio / mp3 file set the videoSource property to point to the mp3 file relative or absolute path, this is illustrated below.

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

  • To add a subtitle set the data-subtitle-soruce tag for the video to point to the subtitle path or a subtitle object as illustrated below, multiple subtitles cane be added and changed via the subtitle selector, if only one subtitle is added then the subtitle selector will be disabled. The subtitle format can be .txt. or .srt. The format is of .srt type, and there is included one subtitle for reference this way more can be created from a template. How to add a subtitle for a video is illustrated below.

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

  • G) Setup pop-up image ads and google adsense pop-up ads. - top

    To add pop-up ads image window or windows can be added with ease, some HTML code has to be added inside the li element that contains the video, the example below will show better what I mean by that. Below you can see that there is a div with an attribute data-add-popup, that is what must be added and inside of it there are other parameters that are explained below.

    Parameters:

    1. data-image-path - the popup ad image path (.jpg, .jpeg, .png).
    2. data-time-start - the time when the ad will be showed in hh:mm:ss hours.
    3. data-time-end - the time when the ad will be hidden in hh:mm:ss hours.
    4. data-link - the URL of the page to open when the ad is clicked, if you don't want to open a page when the ad is clicked just leave this option blank.
    5. data-target - the page to open target (_blank, _self, _parent).
    		
  • VIDEO TITLE

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

  • To add pop-up google adsense window or windows, some HTML code has to be added inside the li element that contains the video, the example below will show better what I mean by that. Below you can see that there is a div with an attribute data-add-popup, that is what must be added and inside of it there are other parameters that are explained below.

    Parameters:

    1. data-google-ad-client - the google adsense ad client.
    2. data-google-ad-slot - the google adsense ad slot.
    3. data-google-ad-width - the ad window width in px.
    4. data-google-ad-height - the ad window height in px.
    5. data-time-start - the time when the ad will be showed in hh:mm:ss hours.
    6. data-time-end - the time when the ad will be hidden in hh:mm:ss hours.
    		
  • VIDEO TITLE

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

  • Please note that the image and adsense popup ads can be combined. Please see below

    		



    H) Setup cuepoints. - top

    To add cuepoints, some HTML code has to be added inside the li element that contains the video, the example below will show better what I mean by that. Below you can see that there is a ul with an attribute data-cuepoints, that is what must be added and inside of it there are other parameters that are self explanatory, you can add one or as many as you like.

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




  • I) 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(format:String):String Return the current time source. The format parameter can be text(hh:mm:ss) or seconds.

    getTotalTime

    getTotalTime(format:String):String Return the video total time / duration. The format parameter can be text(hh:mm:ss) or seconds.

    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 (pre-roll / mid-roll / post-roll), subtitles, hls, 360 video and poster source.

    setThumbnailPreviewSource

    setThumbnailPreviewSource(source:String):void Set the video thumbnails preview source, this source has to be a .vtt file, please read Thumbnails preview.

    loadPlaylist

    loadPlaylist(playlistId:int):void Load a playlist base on id, the counting starts from 0.

    setPosterSource

    setPosterSource(posterSource:String):void Set the poster source path. Please read the Setup video, ads (pre-roll / mid-roll / post-roll), subtitles, hls, 360 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).

    scrubbAtTime

    scrubbAtTime(time:String):void Notify instance to scrub at a specified time, the time argument has to be in hours:minutes:seconds format ex:00:01:20.

    stop

    stop():void Stops the playback and the loading process if the loading process has started.

    showCategories

    showCategories():void Show the categories windows.

    hidePlayer

    hidePlayer():void Hide the player if the display type is set to sticky.

    showPlayer

    showPlayer():void Show the player if the display type is set to sticky.

    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.

    safeToScrub

    FWDUVPlayer.SAFE_TO_SCRUB

    Dispatched when the Ultimate Video Player instance can be scrubbed.

    J) Setup annotations. - top

    First of all to add annotations to a video an ul element with the structure presented below has to be added in the playlist li element that contains the video data in which you want the annotation(s). Inside it there are the annotations, you can add as many as you like by stacking them one after eachother. The li element that holds the annotation data has some attributes that consturct their logic:

    data-start-time - the start time when the annotaton show in hours:minutes:seconds format.
    data-end-time - the end time when the annotaton hide in hours:minutes:seconds format.
    data-left - the left postion in px.
    data-top - the top position in px.
    data-normal-state-class - a css class that represents the annotation normal state.
    data-selected-state-class - a css class that represents the annotation selected state, when the annotation is hovered this class will be applied, please note that this is optional if you don't want a selected state don't add this attribute
    data-show-close-button - this can be yes or no, shows or hides the annotation close button.
    data-click-source - this can contain a page URL or a javascript name ex:data-click-source="myJavascritpFunction();", this attribute is optional if you don't want to open a page or to call a javascript function on click don't add this attribute.
    data-click-source-target - if you want to open a page this is this attribute holds the page target (_blank, _self).

    		
    		



    K) Setup private videos. - top

    To set a video private there is a paramter data-is-private that has to be set to "yes". The global password for all videos is set in the contructor privateVideoPassword:"428c841430ea18a70f7b06525d4b748a". If you want to use a unique password for a video there is a parameter data-private-video-password that has to be set to a unique encrypted password. this is showed below.

    		
  • PRIVATE VIDEO EXAMPLE

    Support for private videos.

    MP3 STICKY PLAYER

    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 encrypt the video password there is a tool I have created that will encrypt the password at this link, enter your desired password in the input field then click on the Encrypt passowrd button, after this the encrypted password can be copied and pasted when needed. The default password is Melinda.


    L) Encrypt video / subtitle path. - top

    To encrypt the video / subtitle path I have created a tool that will encrypt the video / subtitle path at this link, enter the video / subtitle path (this applies all video / subtitle / audio paths) in the input field then click on the Encrypt media button, once this is done copy the encrypted video / subtitle path and paste it as the video / subtitle source parameter.this is showed below

    			
  • 360 DEGREE VR VIDEO EXAMPLE

    Virtual reality 360 degree / VR support.

    360 DEGREE VR VIDEO EXAMPLE

    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.



  • M) >Google Drive, Dropbox, Amazon S3. - top



    Google Drive

    Method 1 - this is the recommend one please use it:

    For this method I've created a video tutorial here so plese watch it.

    https://www.googleapis.com/drive/v3/files/[file_id]?alt=media&key=[api_key]&v=[.mp4][.mp3]

    Example of working .mp4 file https://www.googleapis.com/drive/v3/files/0B4Au_agYmWFZNHNtZTlXUm1UUUE?alt=media&key=AIzaSyBsJ8HRNI4iHUqpszDtx3Ijq3ZKoXLUx-E&v=.mp4 and mp3 file https://www.googleapis.com/drive/v3/files/0B4Au_agYmWFZVG0zc2pzalVCVjg?alt=media&key=AIzaSyBsJ8HRNI4iHUqpszDtx3Ijq3ZKoXLUx-E&v=.mp3 .


    Method 2:

    Go to Disc – My drive.

    Right click on get shareable link the like on screenshot: get video id 1 get video id 2 and use that video ID to create google drive video URL.

    This is final URL how google drive video URL should look:https://drive.google.com/uc?export=download&id=videoID

    Replace videoID with the id taken from the previous step and use it as the video source:https://drive.google.com/uc?export=download&id=0B4Au_agYmWFZQWdHdHN3OVJLX0E


    Method 2 for larger google drive video files:

    Go to Disc – My drive.

    Right click on get shareable link the like on screenshot: get video id 1 get video id 2

    Copy that URL of the video directly into browser then search for the video src, please see get video src.

    Right click on video -> inspect element -> find div with class ‘drive-viewer-video-player’ -> open up iframe -> document -> html -> body -> player -> html5-video-player -> and you will see a <video> tags with the ‘src’ of the video, you need copy/paste that ‘src’ into the player options.

    Use the mp4 or mp3 src as the the video source.


    Method 3:

    Go to Disc – My drive.

    Right click on get shareable link the like on screenshot: get video id 1 get video id 2 and use that video ID to create google drive video URL.

    This is how the final URL should look: http://api.getlinkdrive.com/getlink?url=https://drive.google.com/file/d/GOOGLE_DRIVE_VIDEO_ID/view where GOOGLE_DRIVE_VIDEO_ID represents the video id taken for the shareable link

    Once open the link will answer with a JSON, use the JSON value of the url paramaeter as the video source.

    Dropbox

    Copy the drop box video link, then replace www.dropbox.com with dl.dropboxusercontent.com.

    Thus the URL: https://www.dropbox.com/s/abcd/file.mp4?dl=0 will become: https://dl.dropboxusercontent.com/s/acbd/file.mp4?dl=0 .


    For openload please watch this video tutorial.


    N) Start / stop video at a specified time. - top

    To start a video at a specified time set the data-start-at-time attribute to a string in the form of hours:minutes:seconds for example to start playing the video at minute 1 and second 10 set data-start-at-time:"00:01:10", the same applies to stopping a video at a speciied time only that the attribute name is called data-stop-at-time, this is showed below.

    			
  • 360 DEGREE VR VIDEO EXAMPLE

    Virtual reality 360 degree / VR support.

    360 DEGREE VR VIDEO EXAMPLE

    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.



  • O) Advertisement on pause window. - top

    To show the advertisement window when the video is paused an attribute data-advertisement-on-pause-source has to be added and the value of it has to be a page source. For example data-advertisement-on-pause-source="http://www.webdesign-flash.ro/iframe.html", this is showed below

    			
  • ADVERTISEMENT WINDOW ON PAUSE EXAMPLE

    The source can be any webpage.



  • P) >VAST / VMAP / Google Doubleclick IMA (video adsense). - top

    Currently UVP support only VAST, VMAP and Google Doubleclick IMA (video adsense. In the download files in the content folder there is a folder called vast that contains VAST and VMAP files for reference.

    To add a VAST or VMAP files for a video an attribute called data-vast-url has to be added and the value of it has to be a vast xml location / path, for example http://webdesign-flash.ro/p/uvp/content/vast.xml, this XML file has to follow the VAST template format, add the attribute data-vast-clicktrough-target that represents the target of the window that will be opened when the video ad is clicked (_self, _blank, _parent), add the attribute data-vast-linear-astart-at-time that represents the start time in hh:mm:ss format at which the video ad will start playing, to start it as pre-roll set this attribute to 00:00:00, mid-roll at any time that you like for example 00:10:20 and for post-roll set it to a second less then the total video duration so for example if the total video duration is 01:10:15 set it to 01:10:14. Please see the example below for reference also you can find a vast example in any of the html files from the start folder.

    For Google Doubleclick IMA (video adsense) add the tag URL as the value of data-vast-url attribute.

    			
  • VAST XML EXAMPLE

    Support for VAST "Video Ad Serving Template" pre-roll, mid-roll, post roll with unique functionality.

    VAST XML EXAMPLE

    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.



  • Q) Setup google analytics - top

    I've decided a video tutorial will be better to explain this feature so please watch this video tutorial

    R) Redirect / open page when the video has finished to play - top

    UVP allows to open a new page or to replace the current page with a new one by setting the attributedata-redirect-url to point to the page that you want to open. Please see below example.

    If you don't want this feature leave data-redirect-url attribute blank or remove it entirely.

    			
  • ROYAL 3D COVERFLOW

    Fully responsive 3D Coverflow that allows to display media or HTML content with an unique layout.


  • S) Starting / stopping the video at a specified time using timestamps - top

    It is possible to start and / or stop a video at a specified time adding a timestamp as part of the player URL, the format should be t=hours[h]minutes[m]seconds[s] the hours, minutes and seconds should be higher the 59, some examples as follows t=0h2m30s for start and / or e=0h2m30s for stop, e.g. t=0h30m2s, e=20m40s.

    This string is part of the URL for example http://www.videoplayer-domain.com/#t=0h30m2s&e=0h30m10s or if deeplinking is used http://www.videoplayer-domain.com#/?playlistId=0&videoId=0&t=0h30m2s&e=0h30m10s.


    T) A to B loop - top

    The a to b loop feature is basically a plugin for UVP this way it will not add to the total file size if it is not used. To enable it set in the constructor useAToB:"yes" this will make sure that the plugin js file will be loaded, the js file can be found in the content->java->FWDUVPATB.js. To activate this feature for a video add this attribute data-use-a-to-b="yes" when adding a video. Example below.

    			
  • ROYAL 3D COVERFLOW

    Fully responsive 3D Coverflow that allows to display media or HTML content with an unique layout.


  • U) Thumbnails preview - top

    The thumbnails preview feature is basically a plugin for UVP this way it will not add to the total file size if it is not used. The js file can be found in the content->java->FWDUVPThumbnailsPreview.js. To activate this feature for a video add this attribute data-thumbnails-preview="your-file.vtt" when adding a video, the .vtt file contains the entries for the thumbnails images, it is self explanatory just open and edit it in a text editor. For a good performance I recommend to save the thumbnail images to the same width and height as the constructor settings for the thumbnails previews. Example below.

    			
  • ROYAL 3D COVERFLOW

    Fully responsive 3D Coverflow that allows to display media or HTML content with an unique layout.


  • V) Chromecast - top

    UVP has support for using chromecast, this will enable to play video or audio on a big TV screen and to control the media using the video player interface from the web page.

    You will need a TV that supports chromecast or a chromecast dongle like this one.

    To enable this feature set in the player constructor showChromecastButton:"yes" if you don't need it just set it to showChromecastButton:"no".

    There are some limitations, this feature will only work on google chrome and has support for mp4 and mp3 media files (HLS, Youtube, Vimeo and advertisement are not supported) also your webpage will have to run on a https protocol.

    If the media content is not mp3 or mp4 and the chromecast is connected, the connection to the TV is stopped and the chroemcast button is removed from the player control bar.

    If you want to use subtitles you will have to use .vtt files. .txt or .srt are not supported.

    For all videos, subtitles and posters CORS has to be enabled, you can read about CORS here, to enable CORS is done by adding a .htaccess file in the folder that contains the videos, posters and subtitles, you can find this file in the start/content/subtitles folder. If you are using external files then those files have to be CORS enabled otherwise they will not work. This is a requirement of chromecast so there is no hack around this so this rules has to be followed.


    W) Hex colors - top

    If you want to change the colors of the video player buttons select from the start folder the responsive-minimal-skin-dark.html or responsive-minimal-skin-white.html files as reference, open them in a text editor. There is an option called useHEXColorsForSkin set it to yes and to change the buttons color set normalHEXButtonsColor to any hexadecimal value that you want for example red #FF0000.

    Plase note that this feature will not work local so make sure you are testing online.


    X) Sources and Credits - top

    This component was made by Tibi from FWD (FWDesign) FUTURE WEB DESIGN, for more information and support contact us at tibi_diablo@yahoo.com

    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