Video Player Lite Elementor Widget

Thank you for purchase of this plugin. If you have any questions that are beyond the scope of this help file, please feel free to send a detailed message on the following link.

codecanyon.net/user/Tean

How to install?

Make sure you extract downloaded plugin file from Envato, inside you will find file named: 'elementor_widget_vpl.zip'. This is the plugin file you upload in WordPress panel when you want to install the plugin!

1. In WordPress panel go to Plugins menu
2. Under Plugins menu click "Add New"
3. Select "Upload", choose the archive elementor_widget_vpl.zip that you downloaded and click "Install Now"
4. After the plugin is installed click "Activate Plugin"

Activate plugin

After you install plugin you will have to activate your license to start using the plugin.

To activate license you need to create account on the following link, where you will provide your PURCHASE CODE, and get TOKEN in return which you will then enter in plugin section to activate the plugin.

Instructions how to register

Access control panel here

This is made to make sure customers use the license on a single project (as per Envato rules) and to help customers owning many licenses to easily track on which server licenses are being used.

How to update when new plugin version has been released?

Using FTP client, delete old plugin files and upload new ones. Clear browser cache.

How to set player size?

Inside Style you can adjust player size to fit your video size.

Inside Colors tab you can choose player skin to use and change some player colors

Note!
When adding players in elementor backend, player skin will be incorrect if we change skin because player stacks css, so skins collide. But when viewed on the frontend page, everything will be correct.

Choose what elements to use in the player

Inside Player elements tab you can choose what player features and buttons to use

Responsive breakpoints

Inside Responsive tab you can choose what player features to show on smaller screen.

Create a breakpoint, define max player width (for example 500px) and choose what buttons to show when screen is below 500px wide. You can create multiple breakpoints in such way.

Videos are added to player in Video tab. Player can show HTML5 videos, Youtube and Vimeo single videos, Apple HLS live streaming or MPEG-DASH live streaming, audio url and image.

Video source

Provide video url (mp4 format is supported on all browsers and its recommended format) and menu label which is shown in video quality menu. (if you have only single video quality this quality menu is automatically hidden).

You can specify multiple videos with different quality. For example, add high quality video which will be used on desktop, and lower quality video which will be used on mobile.

You can add any video url that is public and plays when opened directly in the browser (for example Dropbox, Amazon S3 etc).

How to load single video from Google Drive?

If you want to use single files from Google Drive, use the following method:

Go to Disc – My drive:

https://drive.google.com/drive/my-drive
right click on audio, Get shareable link and you get something like this:

https://drive.google.com/open?id=0ByzcNpNrQNpWZUlJVjZQVHoxWnM

use that audio ID to create google drive audio URL:

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

https://drive.google.com/uc?export=view&id=0ByzcNpNrQNpWZUlJVjZQVHoxWnM – use this link in player as type video.

How to load single video from One Drive?

If you want to use single files from One Drive, use the following method:

Right click on the file - Embed and copy link, you will get something like this:

<iframe src="https://onedrive.live.com/embed?cid=A237237B1FB33CFF&resid=A237237B1FB33CFF%21108&authkey=AB0A6YtJz9Bn7BA" width="320" height="133" frameborder="0" scrolling="no" allowfullscreen></iframe>

Use just the src part:

https://onedrive.live.com/embed?cid=A237237B1FB33CFF&resid=A237237B1FB33CFF%21108&authkey=AB0A6YtJz9Bn7BA

and replace 'embed' with 'download'

so you end up with:

https://onedrive.live.com/download?cid=A237237B1FB33CFF&resid=A237237B1FB33CFF%21108&authkey=AB0A6YtJz9Bn7BA

Use this url in player as type video.

Player can display virtual reality videos:

Choose option for virtual reality video.

Player support Youtube single videos. Enter only video ID part when adding Youtube video!

Example video: https://www.youtube.com/watch?v=tb935IxGBt4

Player support Vimeo single videos. Enter only video ID part when adding Vimeo video!

Example video: https://vimeo.com/279267531

Note:

Vimeo player can use Vimeo "default" controls or custom controls as "chromeless" player. Chromeless is only available for videos hosted by a Plus account or higher! Other option to use custom controls with Vimeo videos, if you are Vimeo Pro member, you can get direct link to video on their servers, than you can use this as type video instead to get default player interface.

Apple HSL live streaming

Example of HLS: https://bitmovin.com/player-content/playhouse-vr/m3u8s/105560.m3u8

MPEG DASH live streaming

Example of DASH: https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd

Adding audio to player

Upload audio url (mp3, wav, aac, flac...) Mp3 is recommended cross-browser format.

You can test audio format support here for browsers: https://caniuse.com/?search=audio%20format

Note that when you add audio to player, you can also add poster which is shown while the audio plays.

Adding image to player

Player can show image (normal image and 360 panorama which can be panned around)

Note that when you add image to player, you can also add specify duration in seconds for how long to display image. This can be used in combination with Url link (open url link on finish)

To achieve the following effect of player having normal width in page, and the user can enter "theater mode" by clicking on theater button in controls. "theater mode" will make player full page width (without entering fullscreen mode).

https://www.interactivepixel.net/env/vpl/content/theater.html

The concepts is as follows, "parent-contaner" holds the player and has css max-width 70% (for example).

<div class="parent-container">
    <div id="vpl-player"></div>
</div>

.parent-container{
    max-width:70%;
}

With following settings, when player enters theater mode, parent-contaner will get class "foo" attached, which makes parent container 100% width.

Then you add your own CSS for what you want to happen in theater mode, in this case, we make player 100% wide.

.foo{
    max-width:100%!important;
}

There are also these callbacks available:

playerID.addEventListener("beforeTheaterEnter", function(data){

    //called before theater enter, returns (instance, instanceName)

})
playerID.addEventListener("beforeTheaterExit", function(data){

    //called before theater exit, returns (instance, instanceName)

});

Using these events, you can achieve the same without before mentioned settings, and set CSS max-width to player on start, and then in beforeTheaterEnter, set player max width to 100%.

Showing video preview thumbnails when hoverin with mouse over seekbar

There are 2 ways of using this (use "auto" feature or provide vtt file). You can add preview thumbnails to video inside Video tab.

Using auto feature

Enter "auto" into the field and preview thumbnail will be generated automatically (works for HTML5 video ).

Using vtt file

Upload vtt file with time/image data for video (works for all media types ).

Example of vtt format can be found in documentation/examples/seek folder. The coordinates are set as the xywh hash on the URL in the order X Offset, Y Offset, Width, Height.

WEBVTT

00:00:00.000 --> 00:00:05.000
data/seek/01_seek.png#xywh=0,0,120,68

00:00:05.000 --> 00:00:10.000
data/seek/01_seek.png#xywh=120,0,120,68

00:00:10.000 --> 00:00:15.000
data/seek/01_seek.png#xywh=0,68,120,68

00:00:15.000 --> 00:00:20.000
data/seek/01_seek.png#xywh=120,68,120,68

Subtitles can be set for self hosted video, audio and Youtube or Vimeo chromeless players.

Add subtitles to video inside Video tab:

Example of subtitle format:

WEBVTT

0
00:00:00.000 --> 00:00:12.000
This is a test subtitle.

1
00:00:14.700 --> 00:00:21.500
It can be formatted with css.
It can be multiline.

2
00:00:22.800 --> 00:00:26.800
It has shed much innocent blood.

Subtitle example file is provided documentation/examples/subtitles directory.

https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API

Making subtitles responsive?

You can adjust subtitle breakpoins inside Subtitle tab:

Create a breakpoint, set max player width, and set sustitle size when player is below that width.

Upload your own image logo which will be displayed above video in Player style tab:

Optionally wrap the logo in clickable url by providing url link.

Remember video playback position and display resume sceen on player start

Activate this option in General tab:

Activate keyboard controls in Keyboard tab:

You can specify your own key for each keyboard control and what action to use (from player player available actions).

Notes:

Keyboard controls only work when mouse is over player area!

You need to test player in live page (not in Elementor editor) for this feature to work!

You can translate all player strings inside Translation tab:

Following callbacks are supported:

Set your own playerID in Style tab:


playerID.addEventListener("setupDone", function(data){

    //called when plugin has been instantiated and is ready to use api, returns (instance, instanceName)

    //console.log(data.instance, data.instanceName);

})
playerID.addEventListener("mediaRequest", function(data){

    //called when new media has been requested, returns (instance, instanceName, counter)

})
playerID.addEventListener("mediaStart", function(data){

    //called on media start, returns (instance, instanceName, counter)

})
playerID.addEventListener("mediaPlay", function(data){

    //called on media play, returns (instance, instanceName, counter)

})
playerID.addEventListener("mediaPause", function(data){

    //called on media pause, returns (instance, instanceName, counter)

})
playerID.addEventListener("mediaEnd", function(data){

    //called on media end, returns (instance, instanceName, counter)

});
playerID.addEventListener("fullscreenBeforeEnter", function(data){

    //called before fullscreen enter, returns (instance, instanceName)

})
playerID.addEventListener("fullscreenEnter", function(data){

    //called on fullscreen enter, returns (instance, instanceName)

})
playerID.addEventListener("fullscreenExit", function(data){

    //called on fullscreen exit, returns (instance, instanceName)

})
playerID.addEventListener("beforeTheaterEnter", function(data){

    //called before theater enter, returns (instance, instanceName)

})
playerID.addEventListener("beforeTheaterExit", function(data){

    //called before theater exit, returns (instance, instanceName)

});

How to use callbacks in Elementor?

There are several ways to add javascript code to your website. In Elementor, one of the ways is to add HTML widget in page (add widget before the player):

Then paste javascript code inside:

<script>
addEvents();
function addEvents(){
    if(!playerID){
        setTimeout(addEvents,100);
    }else{
        playerID.addEventListener('mediaStart', function(data){

        });
    }
}
</script>

How to use returned parameters:

playerID.addEventListener('mediaStart', function(data){
    //called on media start, returns (instance, instanceName, counter)

    console.log(data.instance);
    console.log(data.instanceName);
    console.log(data.counter);

});

How to use player API?

Set your own playerID in Style tab:


playerID.playMedia(); //Play current media

playerID.pauseMedia(); //Pause current media

playerID.togglePlayback(); //Toggle current media (pause/play)

playerID.nextMedia(); //Play next media

playerID.previousMedia(); //Play previous media

/* set volume (0-1) */
----------------------------------
playerID.setVolume(0); //Set volume (0)
playerID.setVolume(0.5); //Set volume (0.5)
playerID.setVolume(1); //Set volume (1)

playerID.toggleMute(); //Toggle mute


playerID.setRandom(boolean); //Set random playlist playback
playerID.setLooping(boolean); //Set playlist loop (when playlist reaches end)


playerID.toggleInfo(); //Toggle description panel
playerID.toggleShare(); //Toggle share panel
playerID.toggleFullscreen(); //Toggle fullscreen



/* set playback rate */
--------------------------
playerID.setPlaybackRate(0.5); //Set playback rate (0.5)
playerID.setPlaybackRate(1); //Set playback rate (1)
playerID.setPlaybackRate(2); //Set playback rate (2)
(valid for media type: video, audio, youtube, vimeo)



/* set playback quality */
--------------------------

/* self hosted video */

path:[
    {   
        label: 'HD',
        mp4: 'media/video/04.mp4',
       
    },
    {   
        label: 'SD',
        mp4: 'media/video/04.mp4',
        active:true
    },
],

Example contains 2 qualities (HD, SD).
Active quality on start is specified by optional active parameter.

Note: if you do not set active:true, player will look for the first quality to load on start.

playerID.setPlaybackQuality('HD'); //Set quality video (HD)
playerID.setPlaybackQuality('SD'); //Set quality video (SD)




/* youtube */
For youtube, qualities are automatically created on video start.

https://developers.google.com/youtube/iframe_api_reference#Playback_quality


{
    type:'youtube',
    path:'M4z90wlwYs8',
    quality:'hd720',
}


Default quality on start is specified by quality:hd720
Suggested quality may not be accepted by youtube in certain cases, because their api decides which quality to use in the end, depending on playback size, device playback is running on, bandwidth etc...

playerID.setPlaybackQuality('hd720'); //Set quality youtube (hd720)
playerID.setPlaybackQuality('hd1080'); //Set quality youtube (hd1080)




/* subtitle */
--------------------------
Set subtitle (from label)

subtitles:[
    {   
        label: 'English',
        src: 'data/subtitles/sintel-en.vtt',
        
    },
    {
        label: 'German',
        src: 'data/subtitles/sintel-de.vtt'
    },
],

playerID.setSubtitle('English'); //Set subtitle ('English')
playerID.setSubtitle('German'); //Set subtitle ('German')
playerID.setSubtitle(''); //Set subtitle off ('')





/* seek (seconds) */
--------------------------
playerID.seek(0); //seek (0)
playerID.seek(5); //seek (5)
playerID.seek(15); //seek (15)

playerID.seekBackward(value); //seek {value} seconds backwards (default 10)
playerID.seekForward(value); //seek {value} seconds forward (default 10)






/* load media from playlist on demand */
--------------------------
by counter (counting start from zero, 0 = first media, 1 = second media...)
playerID.loadMedia('counter', 0); //Load first media in playlist
playerID.loadMedia('counter', 2); //Load third media

by mediaId attribute
playerID.loadMedia('id', 7); //Load media with mediaId value 7
playerID.loadMedia('id', 2'); //Load media with mediaId value 2

load new video by passing video data
var obj = {
    type: 'video', 
    path: 'media/video/06.mp4'},
    poster:'media/video/06.jpg',
    description:'Custom description here.'
}
player.loadMedia('data', obj); //Load video





/* add track(s) to playlist */
play video in the player on demand
--------------------------

var track_list = [

    {
        type: 'youtube_single', 
        path: '5zYArkwq2PQ'
    }, 

    {
        type: 'video', 
        path: [
            {label: 'default', mp4: 'media/video/06.mp4'},
        ],
        poster:'media/video/06.jpg',
        description:'Custom description here.',
    }, 

    {
        type: 'video', 
        path: 'media/video/03.mp4',
        poster:'media/video/03.jpg',
        description:'Custom description here.',
    }, 

];

playerID.inputMedia(track_list[0]); //play first video from track_list
playerID.inputMedia(track_list[1]); //play second video from track_list




/* destroy current playing media / playlist */
--------------------------
playerID.destroyMedia(); //Destroy current playing media

playerID.destroyPlaylist(); //Destroy whole plalyist (player is empty after this, has no videos in queue)

playerID.getPlaylistLength(); //get playlist length

playerID.getSetupDone(); //get setup done (player inited, ready to use api)

playerID.getMediaPlaying(); //get media playing



/* resize */
--------------------------
playerID.resize(); //resize player so it can get correct size. Are you using this in a tab maybe where the parent container is hidden (css display none)? If so, you need to initialize the player after its being shown in tab or call player.resize() API method so the player can correctly resize itself!

How to use API methods in Elementor?

There are several ways to add javascript code to your website. In Elementor, one of the ways is to add HTML widget in page (add widget before the player):

Then paste javascript code inside:

Use following code examples:

Toggle playback:

<a onclick="togglePlayback();return false;" href="#">Toggle playback </a>
 <script>
    function togglePlayback(){   
        playerID.togglePlayback(); return false;  
    };
 </script>

Set volume:

<a onclick="setVolume(0.5);return false;" href="#">set volume </a>
 <script>
    function setVolume(val){   
        playerID.setVolume(val); return false;  
    };
 </script>

Load another video:

<a onclick="loadMedia();return false;" href="#">load new video </a>
 <script>
    function loadMedia(){   

        var obj = {
            type: 'video', 
            path: 'VIDEO URL',
            poster:'OPTIONAL VIDEO POSTER',
            description:'Custom description here.'
        }

        playerID.loadMedia('data', obj);return false;  
    };
 </script>

Test player in real page, not in Elementor editor

Make sure you test player in the real page on the frontend, not in Elementor editor, because some features might not work correctly in editor!

Autoplay

Autoplay is disabled since recent browser changes and requires user interaction with the page before (like a click or keypress) to start playback: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

The only way to autoplay is to start video muted, so if auto play is chosen, video will start muted.

Volume on mobile

Volume cannot control the on Apple IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript

Plugin does not work as expected

If the plugin does not work as expected, try the following tests to see if it makes a difference and what could be causing an issue:

1. Update to latest plugin files available on Codecanyon

2. Switch to default Wordpress theme

3. Check for errors in browser developer console (Chrome F12 key, Console tab)

4. Try to deactivate any 3rd party plugins (the ones that not come with Wordpress)

5. If you still have issues after you have done all changes above, you can send a message at http://codecanyon.net/user/Tean#contact , provide a link to your live page, and a temporary user and password for your WordPress admin panel so we can have a look.

Video Player Lite Elementor Widget

Installation

How to install?

Activate plugin

How to update when new plugin version has been released?

Player size

How to set player size?

Player skin

Player elements

Choose what elements to use in the player

Responsive breakpoints

Working with media

Video source

How to load single video from Google Drive?

How to load single video from One Drive?

360 virtual reality video

Youtube

Vimeo

HLS Live streaming

Apple HSL live streaming

MPEG DASH Live streaming

MPEG DASH live streaming

Audio

Adding audio to player

Image

Adding image to player

Lighbox player

How to open player in lightbox?

Notes

Theater mode

Seekbar preview thumbnail

Showing video preview thumbnails when hoverin with mouse over seekbar

Using auto feature

Using vtt file

Subtitles

Making subtitles responsive?

Logo above video

Video resume screen

Remember video playback position and display resume sceen on player start

Keyboard controls

Translation

Callbacks / Events