“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
- Important notes read this before anything else.
- Embed Ultimate Video Player into your html page.
- Install Ultimate Video Player in fullscreen and popup.
- Constructor parameters.
- Setup playlists.
- Setup video, ads (pre-roll / mid-roll / post-roll), subtitles, hls, 360 video and poster source.
- Setup pop-up image ads and google adsense pop-up ads.
- Setup cuepoints.
- API.
- Setup annotations.
- Setup private videos.
- Encrypt video / subtitle path.
- Google Drive, Dropbox, Amazon S3.
- Start / stop video at a specified time.
- Advertisement on pause window.
- VAST / VMAP / Google Doubleclick IMA (video adsense).
- Setup google analytics.
- Redirect / open page when the video has finished to play.
- Starting / stopping the video at a specified time using timestamps.
- A to B loop.
- Thumbnails preview.
- Chromecast.
- Hex colors.
- 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.
- 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 below code.
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 --//
- FWDUVPlayer.videoStartBehaviour:"pause" - this can be stop, pause or none. If set to pause and more then one instance is used all instances will pause except the current playing instance otherwise if set to stop all instances will stop playing and stop the download precess except the current playing instance. If none is used when playing one instance will not stop or pause other instances.
- 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 UVP 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.
- youtubeAPIKey:"" - If you are using youtube playlists please replace this key with your own, for more detials please watch this video tutorial .
- initializeOnlyWhenVisible:"no" - Lazy scrolling / loading, the posibility to initialize UVP on scroll when the player is visible in the page, this way for example if the player is in a section of a webpage that is not visible it will not be initialized / play, instead UVP will be initalized / play only when the user is scrolling to that section in which the player is added.
- useVectorIcons:"no" - this can be yes or no, if is set to yes the buttons will load font awesome vector based icon otherwise it will load the default png graphics buttons. Personally I prefer the graphic png based buttons because of the pixel perfection positioning.
- fillEntireVideoScreen:"no" - this can be yes or no, if is set to yes the video will fill the entire available space removing any horizontal or vertical gaps based on the video size, if is left to no it will resize the video normally example here.
- goFullScreenOnButtonPlay:"no" - This can be yes or no, if set to yes when the play button is clicked the player will go fullscreen as well.
- playsinline:"yes" - this can be yes or no, it applies only to IOS / iphone, if you want the iphone to use the default operating system video player set this to no otherwise set it to yes.
- useHEXColorsForSkin:"no" - this can be yes or no, if this is set to yes the player skin colors can be modified with hexadecimal colors, a skin normal and selected state can be set, please note that there are two special skins that we created for this feature that works perfectly, they can be found in the hex_white and hex_dark folder under the content folder so please use this skins if you are planning to use this feature,itwill work with the other skins also but it is possible that the colors will not be exactlly how you want because of the way the Math behind this works, as a note the white color on the skin will be filled 100% with the hex colors, the dark collor will be filed 0% with the hex color and everything in between will be aproximated as best as possible, this sounds more complicated then it actually is :) example here.
- normalHEXButtonsColor:"#FF0000" - The hexadecimal color for the skin normal state.
- googleAnalyticsTrackingCode:"yes" - Google analytics tracking code.
- useResumeOnPlay:"no" - this can be yes or no. If you want the player to resume playing from the position when the browser was closed set this option to yes.
- 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.
- showPreloader:"yes" - this can be yes or no. Hide or show the circular preloader.
- preloaderBackgroundColor:"#000000" - circular preloader background color.
- preloaderFillColor:"#FF0000" - circular preloader fill color.
- autoPlay:"no" - this can be yes or no.
- loop:"no" - this can be yes or no.
- shuffle:"yes" - this can be yes or no. If this is set to no the info error will not be showed even if there is an error or warning so it would be impossible to tell what is wrong.
- showErrorInfo:"no" - this can be yes or no.autoScale:"yes" - this can be yes or no.If set to yes the UVP height will always be proportional to the UVP width, if set to no the height will be fixed based on the maxHeight property.
- showButtonsToolTip:"yes" - this can be yes or no, enable or disable the control bar button tooltips.
- 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.
- playAfterVideoStop:"yes" - this can be yes or no, if the video is set to stop at a specific time by default it will stop but if you want to skip to the next video set this feature to yes.
- buttonsToolTipHideDelay:1.5 - delay in seconds until the button tooltip appears when the button is hovered.
- 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.
- videoBackgroundColor:"#000000" - the video background color, this doesn't apply to the youtube player.
- posterBackgroundColor:"#000000" - The video poster background color, if you want a transparent background set this to transparent.
- buttonsToolTipFontColor:"#000000" - The buttons tooltip color.
- aopwTitle:"Advertisement" - The pause ad window title.
- aopwSource:""- The pause ad window source, this has to be a link to a page that will show up in the window, for example http://www.webdesign-flash.ro/iframe.html , the page can contain anything.
- aopwWidth:400- The pause ad window maximum width.
- aopwWidth:240- The pause ad window maximum height.
- aopwBorderSize:4- The pause ad window border height in px.
- aopwTitleColor:"#FFFFFF"- The pause ad window title color.
- 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.
- logoLink:"http://www.yourlink.com" - The page link that will open when the logo is clicked, the none value will disable this feature.
- logoMargins:"20" - Margins in px to push the logo from the video corners.
- showPlaylistsSearchInput:"yes" - this can be yes or no, disable or enable the playlists / cateogries search input.
- usePlaylistsSelectBox:"yes" - this can be yes or no, disable or enable the playlists / cateogries combobox selector.
- 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 Ultimate Video Player is loaded and displayed.
- thumbnailSelectedType:"opacity" - 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 UVP 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 UVP is loaded and displayed otherwise the playlist is hidden and it will only appear if the playlist button is clicked or touched.
- showPlaylistName:"yes" - this can be yes or no. Disable or enable the playlist name.
- showSearchInput:"yes" - this can be yes or no. Disable or enable the search input.
- 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.
- showPlaylistOnFullScreen:"yes" - this can be yes or no. By default when the player goes in fullscreen the playlist is hidden, if you don't want this to happen set this option to yes (please note that if the browser viewport width is smaller then 1000 px the playlist will be hidden regardless if this option is set to yes because there is not enough room to display both playlist and video screen).
- showNextAndPrevButtons:"yes" - this can be yes or no. Hide or show the next and prev playlist buttons.
- 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.
- addScrollOnMouseMove:"no" - this can be yes or no.
- showThumbnail:"yes" - this can be yes or no. It shows or not the playlsit thumbnails.
- startAtRandomVideo:"yes" - this can be yes or no, if this is set to yes the playlist loads first time a random video will play.
- stopAfterLastVideoHasPlayed:"no" - this can be yes or no, if this is set to yes when the last video in the playlist has finished to play the playlist will not loop (the first video from the playlist will not play).
- randomizePlaylist:"no" - this can be yes or no. If set to yes the playlist will be randomized every time it loads.
- 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.
- playlistRightWidth:310 - The playlist width when it is positioned at the right.
- playlistBottomHeight:310 - The playlist height when it is positioned at the bottom.
- startAtVideo:"0" - a number that represents the video that will be loaded when the UVP 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.
- thumbnailWidth:70 - thumbnails width in pixels.
- thumbnailHeight:70 - thumbnails height in pixels.
- spaceBetweenControlerAndPlaylist:2 - space in pixels between the video control bar and playlist.
- spaceBetweenThumbnails:2 - vertical space in pixels between thumbnails.
- scrollbarOffestWidth:2 - the width to remove from the playlist total width to make room for the playlist scrollbar.
- scollbarSpeedSensitivity:.5 - a number from 0.1 to 1 that represents the scrollbar speed sensitivity.
- playlistBackgroundColor:"#000000" - the playlist background color.
- playlistNameColor:"#FFFFFF" - the playlist name color.
- thumbnailNormalBackgroundColor:"#1b1b1b" - the playlist thumbnail background normal color.
- thumbnailHoverBackgroundColor:"#1b1b1b" - the playlist thumbnail background hover color.
- thumbnailDisabledBackgroundColor:"#1b1b1b" - the playlist thumbnail background selected color.
- thumbnailDisabledBackgroundColor:"#272727" - the playlist thumbnail background selected color.
- searchInputBackgroundColor:"#000000" - the search input background color.
- searchInputColor:"#000000" - the search input color.
- youtubeAndFolderVideoTitleColor:"#FFFFFF" - the title color for videos loaded from youtube, vimeo (if a vimeo album is used as the playlist source) or a video folder.
- folderAudioSecondTitleColor:"#999999" - the second title color for audio loaded from a audio folder.
- youtubeOwnerColor:"#FFFFFF" - the color for the youtube video owner.
- youtubeDescriptionColor:"#FFFFFF" - the color of the youtube or vimeo (if a vimeo album is used as the playlist source) video description, this will apply to the text from the info window when the i button is pressed.
- audioVisualizerLinesColor:"#0099FF" - the color for the audio visualizer lines.
- audioVisualizerCircleColor:"#FFFFFF" - the color for the audio circle.
- closeLightBoxWhenPlayComplete:"no" - This can be yes or no. If set to yes when the video finshes playing the lightbox will close.
- lightBoxBackgroundOpacity:0.6 - The ligthbox background color opacity, a number from 0 to 1.
- lightBoxBackgroundColor:"#000000" - The ligthbox background color in hexadecimal value.
- showOpener:"yes" - this can be yes or no, it hides or shows the UVP opener button.
- showOpenerPlayPauseButton:"yes" - this can be yes or no, it hides or shows the UVP opener play / pause button.
- openerAlignment:"center" - this can be left, center or right and represents the horizontal position / alignment for the small button that show or hide UVP.
- verticalPosition:"boottom" - this can be bottom or top and represents the vertical position / alignment for UVP.
- horizontalPosition:"center" - this can be left, center or right and represents the horizontal position / alignment for UVP.
- showPlayerByDefault:"yes" - this can be yes or no,if this is set to yes UVP will be showed by default otherwise it will be hidden.
- animatePlayer:"yes" - this can be yes or no, if it is set to yes it will animate the player with a tween transition when hidden or showed.
- openerEqulizerOffsetTop:-1 - offset top in px for the opener equalizer, it is useful if the skin is modified to better align the equalizer.
- openerEqulizerOffsetLeft:3 - offset left in px for the opener equalizer, it is useful if the skin is modified to better align the equalizer.
- offsetX:0 - horizontal offset for the UVP instance in px, think of this like margin left or right based on the player horizontal position.
- offsetY:0 - vertical offset for the UVP instance in px, think of this like margin top or bottom based on the player vertical position.
- isLoggedIn:"no" - Set this to yes if the user is loggedin, of course you will have to set the value of this parameter based on your website/project.
- playVideoOnlyWhenLoggedIn:"yes" - Set this to yes to allow only a loggedin user to play the video.
- loggedInMessage:"Please login to view this video" - Message to show to users that are not logged it.
- 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.
- showNextAndPrevButtonsInController:"yes" - this can be yes or no. Hide or show the next and prev video button in the control bar.
- showPlaybackRateButton:"yes" - this can be yes or no. Hide or show the playback rate / speed button.
- 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.
- 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.
- showShareButton:"yes" - this can be yes or no. Hide or show the share window button.
- disableVIdeoScrubber:"no" - this can be yes or no. Disable or enable the video scrubber.
- showScrubberWhenControllerIsHidden:"yes" - this can be yes or no. Hides or shows the video scrubber when the controller is hidden.
- showDefaultControllerForVimeo:"no" - this can be yes or no. Normal vimeo videos do not allow to remove the player default controls so leave this option to no, if you are using vimeo pro video and disabled the vimeo video controller set this to yes this way the UVP controller can be used.
- showMainScrubberToolTipLabel:"yes" - this can be yes or no. Hide or show the main scrubber time tooltip indicator.
- 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.
- 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, illustrated below with the red arrows.
- spaceBetweenButtons:10 - a number that represents the space between buttons in pixels, illustrated below with the red arrows.
- scrubbersOffsetWidth:10 - a number that represents the total amount in pixels removed from the scrubber bars when they are at the end (change this number to understand it better, useful based on the skin type).
- mainScrubberOffestTop:14 - the amount in pixels to push the main scrubber up when the controller is hiding.
- 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 neighbor button.
- 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.
- volumeScrubberHeight:70 - the height of 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.
- scrubbersToolTipLabelBackgroundColor:"#FFFFFF" - main scrubber tooltip background color.
- scrubbersToolTipLabelFontColor:"#5a5a5a" - main scrubber tooltip text color.
- subtitlesOffLabel:"Subtitles off" - the off subtitle buttons button label.
- 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.
//-- playback rate / speed --//
- defaultPlaybackRate:1 - the playback speed / rate, valuse accepted are 0.25, 0.5, 1, 1.25, 1.5, 2, higher then on is faster and lower then 1 is slower.
- executeCuepointsOnlyOnce:"no" - This option can be yes or no. If you want to execute the cuepoint only once set this feature to yes othewise set it to no.
- 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.
- useAToB:"yes" - this can be yes or no. Enable the a to b loop, please make sure you set this option to yes if you want to use this feature.
- atbTimeBackgroundColor:"transparent" - the a to b loop time background color.
- atbTimeTextColorNormal:"#888888" - the a to b loop time text normal color.
- atbTimeTextColorSelected:"#000000" - the a to b loop time text selected color.
- atbButtonTextNormalColor:"#888888" - the a to b loop a and b buttons text normal color.
- atbButtonTextSelectedColor:"#FFFFFF" - the a to b loop a and b buttons text selected color.
- atbButtonBackgroundNormalColor:"#888888" - the a to b loop a and b buttons background normal color.
- atbButtonBackgroundSelectedColor:"#000000" - the a to b loop a and b buttons background selected color.
- showContextmenu:"yes" - this can be yes or no. Shows or not the right click context menu.
- showScriptDeveloper:"no" - this can be yes or no. If you like to support this plugin pelase set this to yes.
- contextMenuBackgroundColor:"#1f1f1f" - context menu background color.
- contextMenuBorderColor:"#1f1f1f" - context menu border color.
- contextMenuItemNormalColor:"#1f1f1f" - context menu text normal color.
- contextMenuItemSelectedColor:"#FFFFFF" - context menu text selected color.
- contextMenuItemDisabledColor:"#1f1f1f" - context menu text disabled color.
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.
For more information about this please follow this link
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.
For more information about this please follow this link
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.
For more information about this please follow this link
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.
For more information about this please follow this link
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.
For more information about this please follow this link
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.
For more information about this please follow this link
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:
- data-image-path - the popup ad image path (.jpg, .jpeg, .png).
- data-time-start - the time when the ad will be showed in hh:mm:ss hours.
- data-time-end - the time when the ad will be hidden in hh:mm:ss hours.
- 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.
- 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:
- data-google-ad-client - the google adsense ad client.
- data-google-ad-slot - the google adsense ad slot.
- data-google-ad-width - the ad window width in px.
- data-google-ad-height - the ad window height in px.
- data-time-start - the time when the ad will be showed in hh:mm:ss hours.
- 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.
For more information about this please follow this link
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).
-
Inactive annotation!
-
LINK support, href and target can be specified, also animation between annotation states is possible as you can see here on hover.
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.
For more information about this please follow this link
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.
For more information about this please follow this link
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.
For more information about this please follow this link
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.
For more information about this please follow this link
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 and video tutorial here.
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