Home
Themes Plugins

Ultimate Video Player Premium WordPress Plugin

The Ultimate Video Player is a powerful and unique responsive video player that is using playlists to play local, self-hosted or streaming video/audio

The Ultimate Video Player Premium WordPress Plugin


Ultimate Video Player Premium WordPress Plugin

Description About Video Player Plugin

The Ultimate Video Player is a powerful and unique responsive video player that is using playlists to play local, self-hosted or streaming video & audio files, Youtube, Vimeo, Vimeo Pro, Live streaming, HLS, DASH MPEG, 360 degree videos / VR, Google Adsense, VAST & VMAP and much more.

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.

Ultimate Video Player is compatible with any WordPress theme and it has no dependencies.

Installation

After purchasing the plugin from CodeCanyon, inside the main zip file you will find installable plugin fwduvp.zip, video tutorial

Installation steps

  • 1. In your WordPress Admin Dashboard, go to Plugins > Add New.
  • 2. Upload the fwduvp.zip plugin file that you downloaded from CodeCanyon.
  • 3. Click on install now.
  • 4. If successful, click Activate Plugin to activate it, or Return to Plugin Installer.

Update

Uninstall and delete the current installed version, doing this will not remove any of the settings or playlists, install the new version by following the steps from the installation section above, and if you are using a cache plugin clear the browser cache with it to make sure the old files are not used.

Usage

The plugin is constructed of three sections, the preset settings which is used to create presets and modify the player functionality, the playlist section wich is used to create playlists and add your videos in them and the CSS section which is used to update surten CSS aspects of the plugin for example the subtitle font size or color..

Plase note that I have created a detailed video tutorial explaning everything you need to know about how to install and use the plugin.

So I encourage you to watch it from start to end.

Presets

Frist step is to create your own preset, just enter your preset name in the preset name input and click on the Add preset button.

After this you will have access to an Update preset button that allows to save the modified preset settings. 

Please note all preset settings are self explanatory and the ones that need more information have a tooltip attached to them.

Playlists

Next step is to create your own playlist by clicking on the Add new main playlist button and give the main playlist a name.

To create a normal playlist that allows to add mixed video types click on the Add new playlist button, give the new playlist a name and add it. In the newely created playlist it is possible to add as many videos as you want.

The other playlist types are self explanatory when using the backend to add them you will be prompted with a dialog popup that has information about how to add them. 

I also explain all types in detail in this video tutorial.

Shortcode

After the preset and playlist are created use the shortcode generator to add the player in your page, post or custom post.

Resources

This section contains useful resorces and information about the plugin usage and it's features.

360 VR video

To enable the VR mode set in your preset the plugin General Settings -> Controll Settings -> Show 360 degree VR button to yes, this will add the goggles button in the player control bar and enabler VR for 360 videos.

The next step is to add the video to the playlist, and set the Is 360 degree / VR to yes, there are also two extra parameters that can tween the VR, the first is the 360 video start rotation which is the video rotation horizontally in degrees, for example, you might want to start the video at a specific position, so you can add here a particular angle at which to rotate the video it can be a number from -360 to 360. The other parameter is Start VR at play, this parameter will allow the user to start the VR session when the play button is clicked.

I created a video tutorial to show this in action for Easy Video Player, the sintax is a bit different but it will help you understand how to test and how it works live video tutorial.

Fingerprint stamp

Please watch this video tutorial.

Google Drive

For this I have created a video tutorial, pelase watch it from start to end.

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 .

Dropbox

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

Thus the URL:

https://www.dropbox.com/s/abcd/file.mp4?dl=0&type=.mp3

will become:

 https://dl.dropboxusercontent.com/s/acbd/file.mp4?dl=0&type=.mp3 . 

If you are using mp4 files change the type to .mp4 like this &type=.mp4 .

Google adsense

Please watch this video tutorial for more info.

Starting the video at a specified time using timestamps

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:

https://www.videoplayer-domain.com/#t=0h30m2s

Or if deeplinking is used 

https://www.videoplayer-domain.com#/?playlistId=0&videoId=0&t=0h30m2s.

Thumbnails preview

Please follow this .vtt video tutorial and live thumbnail preview tutorial here.

Chromecast

Please follow this video tutorial.

Youtube API key

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, please follow this video tutorial.

Google analytics

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

Custom definitions

  • video_name
  • video_url
  • percent_played
  • stopped_at_time
  • duration
  • full_screen

There are two ways to open EVP in a lightbox on is with code and the other one is with an extra shortcode.

First example is with code... 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.

<script type="text/javascript">

var lightboxIntervalId;

openLightboxWhenPageReady();

function openLightboxWhenPageReady(){
    clearInterval(lightboxIntervalId);
    if(window["fwduvpPlayer0"]){
        window["fwduvpPlayer0"].showLightbox();
    }else{
        lightboxIntervalId = setInterval(openLightboxWhenPageReady, 100);
    }
};
</script>

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

<button type="button" onclick="window['fwduvpPlayer0'].showLightbox()">Open lightbox</button>

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.

<script type="text/javascript">
function openPopup(page, width, height){
        var left = parseInt((screen.width - width)/2);
        var top =  parseInt((screen.height - height)/2);
        if(FWDUVPUtils.isMobile){
            self.popupWindow = window.open(page);
        }else{
            self.popupWindow = window.open(page,"",'width=' + width + ', height=' + height + ', top=' + top + ', left=' + left);
        }
    }
</script>

<!-- Add a button -->
<button onclick="openPopup('page_to_open.html',800 , 400)"">Click me</button>

API - Application Programming Interface

This section is for developers that want to use the plugin API. The following lists represent all the public API methods and event listeners that can be used from the player externally.

You can access the player instances by their order in the page with the "fwduvpPlayer" name with its order after it, starting from 0.

For example if you have 2 instances their names are "fwduvpPlayer0" and "fwduvpPlayer1". Here is an example how to use the API in the WordPress editor or in a code section of your page:

<script type="text/javascript">
addEvents();

function addEvents(){
    if (!window.fwduvpPlayer0){
        setTimeout(addEvents, 100);
    }else{
        fwduvpPlayer0.addListener(FWDUVPlayer.READY, onReady);
        fwduvpPlayer0.addListener(FWDUVPlayer.PLAY, onPlay);
    }
}

function onReady(){
    console.log("player ready");
}

function onPlay(){
    console.log("current playing video id: " + fwduvpPlayer0.getVideoId());
}

function playNextVideo(){
    fwduvpPlayer0.playNext();
}
</script>

<!-- Add a button -->
<button onclick="playNextVideo()">Play next video</button>

Methods:

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(val:String):String

Return the current time. The val parameter can be text(hh:mm:ss), seconds or milliseconds.

  • val (String - required) - this can be seconds or milliseconds.

getTotalTime

getTotalTime(val:String):String

Return the video total time / duration.The val parameter can be text(hh:mm:ss), seconds or milliseconds.

  • val (String - required) - this can be seconds or milliseconds.

goFullScreen

goFullScreen():void

Set video player to fullscreen.

play

play():void

Start / play playback.

playNext

playNext():void

Play the next video.

playPrev

playPrev():void

Play the previous video.

playShuffle

playShuffle():void

Play a random video.

playVideo

playVideo(id:Number):void

Play a video based on the video id.

  • id (Number - required) - the video id, the count is starting from 0.

pause

pause():void

Pause playback.

stop

stop():void

Stops the playback and the loading process if the loading process has started.

setVideoSource

setVideoSource(source:String):void

Set the video source.

  • source (String - required) - the video source, absolute or relative video src.

setPosterSource

setPosterSource(source:String):void

Set the poster source.

  • source (String - required) - the poster source, absolute or relative image poster source (.jpg, .jpeg, .png).

setVolume

setVolume(val:Number):void

Set the video volume.

  • val (Number - required) - a number between 0 (video mute state) and 1 (video maximum volume).

scrub

scrub(val:Number):void

Notify instance to scrub (set the video position).

  • val (Number - required) - a number between 0 (video start position) and 1 (video end position).

scrubbAtTime

scrubbAtTime(val:String):void

Notify instance to scrub at a specified time.

  • val (String - required) - the val argument has to be in hours:minutes:seconds format ex:00:01:20.

loadPlaylist

loadPlaylist(id:Number):void

Loads a playlist based on id

  • id (Number - required) - The playlist id, the count starts from 0.

showCategories

showCategories():void

Show the main playlist window

Events:

ready

FWDUVPlayer.READY

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

error

FWDUVPlayer.ERROR

Dispatched when the Ultimate Video Player instance can't load or play the source.

  • error (String) - the error message, ex:e.error.

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.

safeToScrub

FWDUVPlayer.SAFE_TO_SCRUB

Dispatched when the Ultimate Video Player instance is safe to scrub.

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.

  • percent (Number) - the update percent, ex:e.percent, a value from 0 to 1.

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.

  • curTime (String) - the current time, ex:e.curTime.
  • totalTime (String) - the total time time, ex:e.totalTime.

playComplete

FWDUVPlayer.PLAY_COMPLETE

Dispatched when the Ultimate Video Player instance playback has reached the end of the video file.

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.

Download Premium Ultimate Video Player

Download

Seo Tools Apps Welcome to WhatsApp chat
How can we help you?
Type here...