Video Player Lite Wordpress Plugin

Wordpress


Thank you for purchase. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form on the link above. Thanks so much!


How to install?
1. Go to Plugins menu
2. Add New
3. Upload apvpl.zip file
4. Activate plugin
5. In the Wordpress menu there will be "Video Player Lite" section




How to update when new plugin version has been released?
1. Delete old plugin files (through Wordpress admin or using FTP Client) and upload new plugin files.
2. Your previously created data is going to be saved.



There are 2 ways to put video in the page.

1. Create new player in Player Manager section and create new playlist in Playlist Manager section, then

get shortcode using Guttenberg block:

Note: When you create a player and a playlist in such way, they are saved and can be accessed and edited later in Player Manager and Playlist Manager section.








2. Generate shortcode in Shortcodes section to place player in page without creating player and playlist beforehand:

Generate just video shortcode (default player skin will be used):



Or generate player shortcode (choose skin and configure player in detail):

Note: if you want video shortcode included with this player shortcode, first generate video shortcode, then generate player shortcode.

You can generate shortcode using Shortcode manager admin section, but here is a quick explanation on how the shortcode can look like.

You can have shortcode in a single form (single video shortcode):

[apvpl preset="aviva" type="video" path="VIDEO_URL_HERE"]

multi video shortcode (line breaks for readability):

[apvpl preset="aviva"]
[apvpl_video type="video" path="VIDEO_URL_HERE"]
[apvpl_video type="video" path="VIDEO_URL_HERE"]
[apvpl_video type="video" path="VIDEO_URL_HERE"]
[/apvpl] 
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.

You can initialize player when clicking some DOM element in page. This can apply to normal player type and lightbox type player.

Example, open player with Youtube video on DOM selector click:

<a href="#" class="foo">click to open player</a>
[apvpl preset="aviva" type="youtube" path="pSOoXLRBDuk" selector_init=".foo" wrapper_max_width="70%"]

Using query string parameters. Rules: all parameters begins with "vpl-", replace parameter camelCase with dash, use + instead of space, use comma for array values. If you want to use comma in title or description text for example, replace it with some other character like semicolon(;)

Player settings example:

www.domain.com/some-page?vpl-auto-play=true&vpl-aspect-ratio=1&vpl-media-end-action=loop&vpl-remember-playback-position=true&vpl-use-resume-screen=true

For all possible parameters check Shortcodes section / Player shortcodes in admin




How to create a playlist from query string?

Single video in player:

www.domain.com/some-page?vpl-type=video&vpl-path-0-mp4=VIDEO_URL&vpl-path-0-label=QUALITY_MENU_TITLE&vpl-description=VIDEO_DESCRIPTION&vpl-poster=VIDEO_POSTER&vpl-subtitle-0-label=SUBTITLE_LABEL&vpl-subtitle-0-src=SUBTITLE_URL
www.domain.com/some-page?vpl-type=video&vpl-path-0-mp4=media/video/01.mp4&vpl-path-0-label=720p&vpl-description=Video+title+one&vpl-poster=media/video/01.jpg&vpl-subtitle-0-label=English&vpl-subtitle-0-src=data/subtitles/sintel-en.vtt

Multiple video qualities and multiple subtitles:

www.domain.com/some-page?vpl-type=video&vpl-path-0-mp4=VIDEO_URL_QUALITY_1,VIDEO_URL_QUALITY_2&vpl-path-0-label=QUALITY_MENU_TITLE_1,QUALITY_MENU_TITLE_2&vpl-description=VIDEO_DESCRIPTION&vpl-poster=VIDEO_POSTER&vpl-subtitle-0-label=SUBTITLE_LABEL_1,SUBTITLE_LABEL_2,SUBTITLE_LABEL_3&vpl-subtitle-0-src=SUBTITLE_URL_1,SUBTITLE_URL_2,SUBTITLE_URL_3
www.domain.com/some-page?vpl-type=video&vpl-path-0-mp4=media/video/01.mp4,media/video/01_1080p.mp4&vpl-path-0-label=720p,1080p&vpl-description=Video+title+one&vpl-poster=media/video/01.jpg&vpl-subtitle-0-label=English,German,Spanish&vpl-subtitle-0-src=data/subtitles/sintel-en.vtt,data/subtitles/sintel-de.vtt,data/subtitles/sintel-es.vtt

Set start time in seconds (vpl-start=12, or vpl-playback-position-time=12):

www.domain.com/some-page?vpl-type=video&vpl-path-0-mp4=media/video/01.mp4&vpl-path-0-label=720p&vpl-description=Video+title+one&vpl-poster=media/video/01.jpg&vpl-start=12

If you are trying to share video url without other video parameters use playback-position-time for start time (play forth video at 12 seconds):

www.domain.com/some-page?vpl-active-item=3&vpl-playback-position-time=12

Multiple videos in player:

www.domain.com/some-page?vpl-type=video,video&vpl-path-0-mp4=VIDEO_URL_QUALITY_1,VIDEO_URL_QUALITY_2&vpl-path-1-mp4=VIDEO_URL_QUALITY_1,VIDEO_URL_QUALITY_2&vpl-path-0-label=QUALITY_MENU_TITLE_1,QUALITY_MENU_TITLE_2&vpl-path-1-label=QUALITY_MENU_TITLE_1,QUALITY_MENU_TITLE_2&vpl-description=VIDEO_DESCRIPTION,VIDEO_DESCRIPTION&vpl-poster=VIDEO_POSTER,VIDEO_POSTER&vpl-subtitle-0-label=SUBTITLE_LABEL_1,SUBTITLE_LABEL_2,SUBTITLE_LABEL_3&vpl-subtitle-1-label=SUBTITLE_LABEL_1,SUBTITLE_LABEL_2&vpl-subtitle-0-src=SUBTITLE_URL_1,SUBTITLE_URL_2,SUBTITLE_URL_3&vpl-subtitle-1-src=SUBTITLE_URL_1,SUBTITLE_URL_2
www.domain.com/some-page?vpl-type=video,video&vpl-path-0-mp4=media/video/01.mp4,media/video/01_hd.mp4&vpl-path-0-label=720p,1080p&vpl-path-1-mp4=media/video/02.mp4,media/video/02_hd.mp4&vpl-path-1-label=SD,HD&vpl-description=Video+title+1,Video+title+two&vpl-poster=media/video/01.jpg,media/video/02.jpg&vpl-subtitle-0-label=English,German,Spanish&vpl-subtitle-0-src=data/subtitles/sintel-en.vtt,data/subtitles/sintel-de.vtt,data/subtitles/sintel-es.vtt&vpl-subtitle-1-label=German,Spanish&vpl-subtitle-1-src=data/subtitles/tumblr-de.vtt,data/subtitles/tumblr-es.vtt

Note:
1. You need to have equal number of properties! (so for each video in url same number of type, same number of poster etc..)

2. Note that path and subtitles have specific format (vpl-path-0-mp4, vpl-path-1-mp4, vpl-path-0-label, vpl-path-1-label... for each video).
The same for subtitles (vpl-subtitle-0-label, vpl-subtitle-1-label, vpl-subtitle-0-src, vpl-subtitle-1-src... for each video)

For parameters check Shortcodes section / Media shortcodes in admin




Youtube single video:

www.domain.com/some-page?vpl-type=youtube&vpl-path=VIDEO_ID
www.domain.com/some-page?vpl-type=youtube&vpl-path=pSOoXLRBDuk&vpl-auto-play=true&vpl-use-resume-screen=false

Youtube single video (with poster and decription):

www.domain.com/some-page?vpl-type=youtube&vpl-path=VIDEO_ID&vpl-description=VIDEO_DESCRIPTION&vpl-poster=VIDEO_POSTER
www.domain.com/some-page?vpl-type=youtube&vpl-path=pSOoXLRBDuk&vpl-description=Russo+supe+Sasha+Pivovarova+e+universalmente+celebrata+per+il+suo+look+unico;+quello+di+uno+straniero+in+possesso+proveniente+da+un+pianeta+ghiacciato+e+possibilmente+incrociato+con+un+husky.&vpl-poster=https://i.ytimg.com/vi/pSOoXLRBDuk/maxresdefault.jpg&vpl-noapi=true

Multiple Youtube videos:

www.domain.com/some-page?vpl-type=youtube,youtube,youtube&vpl-path=VIDEO_ID,VIDEO_ID,VIDEO_ID
www.domain.com/some-page?vpl-type=youtube,youtube,youtube&vpl-path=jXSxzMTrKq0,5zYArkwq2PQ,M4z90wlwYs8

For parameters check Shortcodes section / Media shortcodes in admin




Vimeo single video:

www.domain.com/some-page?vpl-type=vimeo&vpl-path=VIDEO_ID
www.domain.com/some-page?vpl-type=vimeo&vpl-path=137812610

Vimeo single video (with poster and description):

www.domain.com/some-page?vpl-type=vimeo&vpl-path=VIDEO_ID&vpl-description=VIDEO_DESCRIPTION&vpl-poster=VIDEO_POSTER
www.domain.com/some-page?vpl-type=vimeo&vpl-path=137812610&vpl-description=OTBMIAMI+Presents+High+Fashion+with+We+The+Fresh+clothing.&vpl-poster=https://i.vimeocdn.com/video/461423991_1280x720.jpg

For parameters check Shortcodes section / Media shortcodes in admin




Live streaming HLS video:

www.domain.com/some-page?vpl-type=hls&vpl-path=URL_TO_M3U8


Live streaming DASH video:

www.domain.com/some-page?vpl-type=dash&vpl-path=URL_TO_MPEG_DASH&vpl-mp4=OPTIONAL_MP4_BACKUP_URL_FOR_BROWSERS_THAT_DO_NOT_SUPPORT_DASH

For parameters check Shortcodes section / Media shortcodes in admin

To show resume screen before video starts and allow user to choose either to resume video from last played position or restart from beginning:

To activate this feature use these settings in Edit Player / General settings / Playback tab:

Showing preview thumbnails when hovering over seekbar. This can be applied to html5 video, youtube and vimeo with chromeless players.


There are 2 ways of using this (use "auto" feature or provide vtt file)

1. Using "automatic" feature (works for HTML5 self hosted video only). Preview thumbnail will be generated automatically.

In Edit Playlist / Add new Media section enter "auto" in field:


2. Using vtt file (works for all media types). Requires sprite of images and vtt file with time/image data for video.

In Edit Playlist / Add new Media section enter vtt url in field.

Example of vtt file can be found inside documentation / 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

This example is made with 120x68px thumbnails (16/9). If different format thumbnails are required, this can be changed by editing vpl.css file (vpl-preview-seek-wrap).

To hide video url from page source enable this Encrypt media paths in Edit Player / General settings / General tab:



Or, add encrypt_media_paths="1" option in shortcode:

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

Subtitle examples are provided inside documentation/subtitles directory.

Subtitles for video are added inside Edit Playlist / Add media section:

Note: Last active subtitle is saved in browser cache. If you move to next video or load video player again, player will try to select same subtitle language.

Player can use following embedding functionality in embed screen.

Embed code

You can generate embed code for whole playlist (if you have multiple videos in playlist) or for a single video. This is controlled in Edit player / General settings / Embed tab:



Video url link

Url link offers direct link to video on your website.

Following callbacks are supported:

vpl_playerID is constructed from vpl_player + ID which comes from shortcode ( [apvpl player_id='4'] ). If you are adding standalone shortcode ( [apvpl type="video" path="PATH_TO_MP4_VIDEO" poster="POSTER_URL" description="DESCRIPTION_HERE"] ) then ID is generated dynamically starting from 0 for every new player in page.

You can also manually add instance_id in shortcode (then the player will use this as player ID):

[apvpl type="video" path="PATH_TO_MP4_VIDEO" description="DESCRIPTION_HERE" player_type="lightbox" selector_init=".foo" instance_id="5"]

<a href="#" class="foo">open lightbox</a>


vpl_playerID.on("setupDone", function(e, data){

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

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

}).on("mediaRequest", function(e, data){

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

}).on("mediaStart", function(e, data){

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

}).on("mediaPlay", function(e, data){

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

}).on("mediaPause", function(e, data){

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

}).on("mediaEnd", function(e, data){

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

});

    

How to use callbacks in wordpress text editor:

<script>
addEvents();
function addEvents(){
	if(!window.vpl_playerID){
		setTimeout(addEvents,100);
	}else{
		vpl_playerID.on('mediaStart', function(e, data){
	        
	    });
	}
}
</script>
    

How to use returned parameters:

vpl_playerID.on('mediaStart', function(e, 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?

1. Using API with shortcodes

You can create most of player API using shortcode generator for player API in Edit post area (where shortcode generator is located). This way you dont have to write javascript code manully.

Example:

You want to add a button in page which will toggle mute in player. In you page you already have a player shortcode, example:

In api editor, select player you have in your page, select feature (Toggle mute) and generate shortcode.

You will get a shortcode like this:

Note that for this shortcode to work (apvpl_toggle_mute) you have to add instance_id="PLAYER_ID" in your first player shortcode. This is required so apvpl_toggle_mute shortcode can find your player in page by the same ID.








2. Using API with javascript directly

You can add javascript code directly to post area. This way you have more control over player API.

vpl_playerID is constructed from vpl_player + ID which comes from shortcode ( [apvpl player_id='4'] ). If you are adding standalone shortcode ( [apvpl type="video" path="PATH_TO_MP4_VIDEO" poster="POSTER_URL" description="DESCRIPTION_HERE"] ) then ID is generated dynamically starting from 0 for every new player in page.

You can also manually add instance_id in shortcode (then the player will use this as player ID):

[apvpl type="video" path="PATH_TO_MP4_VIDEO" description="DESCRIPTION_HERE" player_type="lightbox" selector_init=".foo" instance_id="5"]

<a href="#" class="foo">open lightbox</a>


vpl_playerID.playMedia(); //Play current media

vpl_playerID.pauseMedia(); //Pause current media

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

vpl_playerID.nextMedia(); //Play next media

vpl_playerID.previousMedia(); //Play previous media

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

vpl_playerID.toggleMute(); //Toggle mute


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


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



/* set playback rate */
--------------------------
vpl_playerID.setPlaybackRate(0.5); //Set playback rate (0.5)
vpl_playerID.setPlaybackRate(1); //Set playback rate (1)
vpl_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.

vpl_playerID.setPlaybackQuality('HD'); //Set quality video (HD)
vpl_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...

vpl_playerID.setPlaybackQuality('hd720'); //Set quality youtube (hd720)
vpl_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'
    },
],

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





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

vpl_playerID.seekBackward(value); //seek {value} seconds backwards (default 10)
vpl_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...)
vpl_playerID.loadMedia('counter', 0); //Load first media in playlist
vpl_playerID.loadMedia('counter', 2); //Load third media

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






/* 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.',
    }, 

];

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




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

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

vpl_playerID.getPlaylistLength(); //get playlist length

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

vpl_playerID.getMediaPlaying(); //get media playing



/* resize */
--------------------------
vpl_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 wordpress post?

Use following code examples in post area.

Toggle playback:

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

Set volume:

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

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



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. Clear browser cache

6. 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 your PURCHASE CODE, provide a link to your live page, and a temporary user and password for your wordpress admin panel so we can have a look.