“Ultimate Video Player Wordpress Plugin” Help by FWDesign

---

“Ultimate Video Player Wordpress Plugin”

---

Table of Contents

1. IMPORTANT NOTES - read this before anything else
2. Wordpress Installation
3. API specifications
4. Google Drive, Dropbox, Amazon S3
5. Open UVP in a popup window
6. Open in lightbox
7. Google adsense
8. Google analytics
9. Youtube API key
10. Starting the video at a specified time using timestamps.
11. Thumbnails preview.
12. Chromecast.
13. Fingerprint stamp.
14. Sources and Credits

---

A) IMPORTANT NOTES - make sure you read this! - top

Please note that the Ultimate Video Player Wordpress Plugin installation and configuration is not complicated but because it has a lot of customizable settings it might seem complicated, so please go through the entire help file and watch the video tutorial before trying to install it into your own Wordpress site and pages.

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 don't support mp4, also please note that the mp4 video format is recommended and used by all major browsers distributors like Google, Microsoft, Apple, Mozilla etc.!

On IE8, Safari under Windows, or Firefox under Mac the Flash player is used because these browsers don't support HTML5 videos, if your videos don'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

To add a folder type playlist you have to first copy your videos folder in the "content" folder of the plugin folder and then put the folder name in the "Playlist source" setting from the playlist dialog. 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. In the same way you can also add the poster by adding -poster after its name. You can also see all this in the video tutorial.

When something is wrong with the player or an error occurs, a red info box with the problem description will appear over the player. Please note that this box is there to help you understand the problem, for example if a video 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 Wordpress Plugin skin is constructed from .png images, only a few settings for changing colors are possible like changing the playlist or title track color. If you want a different skin the .png files must be modified. The skin is really flexible allowing you to customize the player as you like. We have a great designer so if you need a custom skin please contact us!

To create a playlist from a vimeo album please watch this video tutorial.

B) Wordpress installation - top

Here is the link to the YOUTUBE VIDEO TUTORIAL.

Using new shortcode USING NEW SHORTCODE VIDEO TUTORIAL.

To install the Ultimate Video Player Wordpress Plugin in your Wordpress site, you just need to follow the video tutorial using the "fwduvp.zip" file, or you can also upload and install it manually if you need to, just unzip the file and copy the "fwduvp" folder to your "wp-content/plugins/" directory.

C) API specifications - top

The following lists represent all the public API functions and event listeners that you can use from the player externally:

Public methods:

Function	Method	Description
downloadVideo	downloadVideo(pId:Number):String	Download video based on id.
getPlaylistId	getPlaylistId():Number	Returns the current playlist id, the counting starts form 0.
getVideoId	getVideoId():Number	Returns the current video id, the counting starts form 0.
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 / audio path. Please note if you want to use an encrypted path you can encrypt the path using the tool http://webdesign-flash.ro/vs/ , add the video / audio path in the input and click on the Encrypt media button, after that you can just get the encrypted path, please note that you have to include the encrypt string as well ex: setVideoSource("encrypt:Y29udGVudC92aWRlb3MyL2Z3ZC00ODBwLm1wNA==") , this applies to all media types (youtube, vimeo, mp3, mp4, hls, etc);
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.
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.

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.

You can access the player instance with the "fwduvpPlayer0" name. Here is an example how to use the API in the Wordpress editor:

		

		Play next video

D) 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 .

Openload

For openload videos please check out this video tutorial.

E) Open UVP in a popup window - top

To open a a instance of UVP in a popup window create a new preset and set the display type to fullscreen, create a new page or post and in it add a shortcode with the preset that you created.

In the page or post where you want to open the popup window add this code in the text editor in the text tab or directly in the page. The function openPopup accepts three parameters, page:the page URL, the page to open in the popup, the one that it was created with the preset with the display type set to fullscreen, width:the window width in px, height:the window height in px.

		Click Me!
		

F) Open in lighbox - top

To open UVP in a lightbox window used the below code, add it in the text editor in the text tab, also make sure that you set in your preset the display type to lightbox. Please see this video tutorial for more info.

To open the player by clicking a button or an image (a HTML element) use the code below

open lightbox

G) Google adsense - top

Please see this video tutorial for more info.

H) Google analytics - top

Please see this video tutorial for more info.

I) Youtube API key - top

If you want to use a youtube playlist or youtube channel channels as the playlitst type you will have to get your own youtube API key, for more info please watch this video tutorial for more info.

J) Starting the video at a specified time using timestamps - top

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

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

K) Thumbnails preview - top

.vtt video tutorial
Auto-generated live video tutorial

L) Chromecast - top

Please check out this video tutorial and also if you want to cast HLS/HTTP Live Streaming please watch this video tutorial.

M) Fingerprint stamp - top

Please check out this video tutorial.

N) 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 Wordpress Plugin and I'll do my best to assist.

FWDesign

Go To Table of Contents

---