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!
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.
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.
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.
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.
Each player skin comes with its own CSS file. You can choose which CSS files to include in the page in Global settings:
This way, if you only use skin aviva for example, you can only choose to include aviva skin CSS file.
You can change player colors in Edit Player / colors tab. This will include dynamic css for player colors.
If you dont want to include dynamic CSS for player colors (and you want to style player with your own CSS) you can turn this option off in Global settings:
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]
Player supports Self hosted video files (example mp4).
To add video to Player, in Edit Playlist choose Add media, and choose video type:
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.
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.
To add 360 video to Player, in Edit Playlist choose Add media, and choose video type:
Set Is virtual reality 360 and optionally Virtual reality mode.
To add Live Stream video to Player, in Edit Playlist choose Add media, and choose HLS or MPEG DASH Live streaming type:
Example of HLS stream:
https://bitmovin-a.akamaihd.net/content/sintel/hls/playlist.m3u8
Example of MPEG DASH stream:
https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd
Player supports Youtube single videos
To add Youtube single video to Player, in Edit Playlist choose Add media, and choose Youtube video type:
Provide ONLY video ID part of Youtube URL.
Player supports Vimeo single videos
To add Vimeo single video to Player, in Edit Playlist choose Add media, and choose Vimeo video type:
Provide ONLY video ID part of Vimeo URL.
Player supports Self hosted audio files (example mp3, wav, flac..)
To add Self hosted audio to Player, in Edit Playlist choose Add media, and choose Audio type:
Player can show images with optional duration timer
To add Image to Player, in Edit Playlist choose Add media, and choose Image type:
Optionally, choose duration (how long to show image).
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%"]
You can do this in 2 ways:
1. Create player and playlist in admin, and set player type lightbox and define DOM selector:
2. Use direct shortcode:
[apvpl type="video" path="PATH_TO_MP4_VIDEO" description="DESCRIPTION_HERE" player_type="lightbox" selector_init=".foo"] <a href="#" class="foo">open lightbox</a>
Adjust keyboard settings in Edit Player / General settings / Keyboard tab:
To show player custom controls before video starts (only show poster), meaning video will not be loaded at all on start, use following setup:
1. If you want to show player controls menu before video starts, select Show controls before video is played in Edit Player / General settings / General tab.
2. Set video auto play false in Edit Player / General settings / Playback tab.
3.
For video you need to supply video duration in seconds and video needs to have poster set (this is done in Add media section when adding videos).
For Youtube or Vomeo you need to select Playlist item content duration in Edit Player / Style / Layout tab.
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-query-instance=instanceName&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 configuration
Note: query string must have this vpl-query-instance=instanceName (instanceName is from settings). This is to differentiate between multiple players in page. Use simple instanceName for example "player1", "player2" etc.Single video in player:
www.domain.com/some-page?vpl-query-instance=instanceName&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-query-instance=instanceName&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-query-instance=instanceName&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-query-instance=instanceName&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-query-instance=instanceName&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-query-instance=instanceName&vpl-active-item=3&vpl-playback-position-time=12
Multiple videos in player:
www.domain.com/some-page?vpl-query-instance=instanceName&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-query-instance=instanceName&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 working with playlist (remove data- from parameter)
Youtube single video:
www.domain.com/some-page?vpl-query-instance=instanceName&vpl-type=youtube&vpl-path=VIDEO_ID
www.domain.com/some-page?vpl-query-instance=instanceName&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-query-instance=instanceName&vpl-type=youtube&vpl-path=VIDEO_ID&vpl-description=VIDEO_DESCRIPTION&vpl-poster=VIDEO_POSTER
www.domain.com/some-page?vpl-query-instance=instanceName&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-query-instance=instanceName&vpl-type=youtube,youtube,youtube&vpl-path=VIDEO_ID,VIDEO_ID,VIDEO_ID
www.domain.com/some-page?vpl-query-instance=instanceName&vpl-type=youtube,youtube,youtube&vpl-path=jXSxzMTrKq0,5zYArkwq2PQ,M4z90wlwYs8
For parameters check working with playlist (remove data- from parameter)
Vimeo single video:
www.domain.com/some-page?vpl-query-instance=instanceName&vpl-type=vimeo&vpl-path=VIDEO_ID
www.domain.com/some-page?vpl-query-instance=instanceName&vpl-type=vimeo&vpl-path=137812610
Vimeo single video (with poster and description):
www.domain.com/some-page?vpl-query-instance=instanceName&vpl-type=vimeo&vpl-path=VIDEO_ID&vpl-description=VIDEO_DESCRIPTION&vpl-poster=VIDEO_POSTER
www.domain.com/some-page?vpl-query-instance=instanceName&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 working with playlist (remove data- from parameter)
Live streaming HLS video:
www.domain.com/some-page?vpl-query-instance=instanceName&vpl-type=hls&vpl-path=URL_TO_M3U8
Live streaming DASH video:
www.domain.com/some-page?vpl-query-instance=instanceName&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 working with playlist (remove data- from parameter)
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.htmlThe 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.
var settings{
theaterElement:'.parent-container',
theaterElementClass:'foo',
}
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:
vpl_playerID.addEventListener("beforeTheaterEnter", function(data){
//called before theater enter, returns (instance, instanceName)
})
vpl_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%.
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:
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,68This 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).
Define specific times in video when to execute a function. Available for media type video, audio, Youtube, Vimeo.
Add cue point to video in Playlist manager / Edit Playlist / Add media dialog:
Each cue point has start time in seconds and code to be executed. If cue code type is callback, then cue code should be function present somewhere in your page on global level, example:
Add this function somewhere in page on global level:
function myFirstCue(args){
alert('callback at '+args.start+' seconds')
console.log(args)
}
Settings available for cue points in Player manager / Edit Player / General settings / Playback tab:
There are following ways to hide real video url:
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:
To have video as a blob, use following settings in Edit Player / General settings / General tab:
Or, add use_blob="1" option in shortcode:
This applies to html5 media (video, audio).
To make the player automatically become fixed to page bottom if user scrolls down the page, use the following settings in Edit Player / General tab / Minimize on scroll tab:
To make the player autoplay when user scroll the page and video player enters into view use the following settings in Edit Player / General tab / Playback tab:
Chapters can be shown in chapter menu (which opens above the player).
Example of chapter menu:
Chapters are loaded using webvtt file. Example of webvtt:
WEBVTT 0 00:00:00.000 --> 00:00:10.000 Super long chapter title goes here 1 00:00:10.000 --> 00:00:13.500 Guidance 2 00:00:13.500 --> 00:00:21.000 Main Plot 3 00:00:21.000 --> 00:00:32.450 Chapter Title here 4 00:00:32.450 --> 00:00:55.800 Almost Ready 5 00:00:55.800 --> 00:01:14.000 Final Toughts
Chapter url for video is added in Edit playlist section when adding videos. Note that webvtt file needs to be located on same domain as video player (unless server providing webvtt file contains CORS).
Example of chapter file can be found inside plugin files documentation / misc / chapters folder.
1. If you want to show chapter menu before video starts, select Show controls before video is played in Edit Player / General settings / Chapters tab:
2. Set video auto play false in Edit Player / General settings / Playback tab.
Note that to show chapter menu before video starts, for self hosted media (audio, video) you need to supply video duration in seconds (this is done automatically when you add self hosted video to playlist from WordPress Media Library) and video needs to have poster set.
To display chapters in mobile friendy list, select Use mobile chapter menu in Edit Player / General settings / Chapters tab:
This feature is activated by clicking on chapter toggle button in player controls. This will display chapters on mobile in following way:
1. Auto open chapters menu option is not compatible using this.
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.
Select Airplay option to be enabled in the player in Edit player / Style / Elements tab:
If Airplay is supported and compatible, button to turn on Airplay will show in player controls when video plays.
Player can use following embedding functionality in embed screen.
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:
Url link offers direct link to video on your website.
Its possible to display some options in player in mobile friendly list menu. Example playback rate menu on mobile:
These include playback rate menu, subtitles menu, playback quality menu, audio language menu (for live streaming), chapters menu.
Activate this option in Edit player / General settings / General tab:
To activate this option for chapters use chapters setting.
Buttons can be added in the player top and the bottom controls. To add custom buttons go to Edit Player / Style / Elements tab.
You can use SVG code or full img tag inside icon field value instead.
To get SVG code, for example, go to Font Awesome page, choose icon and copy SVG code. Of course you can get SVG code from different websites.
If you want buttons to hide on small screen (for example mobile) you can use following CSS. my-custom-button is the custom class you added to button.
@media (max-width: 700px) {
.my-custom-button{
display:none;
}
}
This can be important since the player has its own buttons and not a lot of button can fit on small mobile screen.
If you want to add click function to button you can use following javscript:
document.querySelector('.my-custom-button').addEventListener('click', function(){
alert('button clicked')
})
Make sure this code is added after document loaded so the button is present in the page.
You can also target this button after player has loaded user player event callbacks:
mvp_playerID.addEventListener("setupDone", function(data){
//called when plugin has been instantiated and is ready to use api, returns (instance, instanceName)
document.querySelector('.my-custom-button').addEventListener('click', function(){
alert('button clicked')
})
})
1. Activate this option in Global settings / Miscellaneous tab:
2. Use the following shortcodes inside your post editor:
Override HTML5 video (mp4)
[video src="URL_TO_MP4_VIDEO"]
Override Youtube video
[embed width="500" height="350"]https://www.youtube.com/watch?v=8qXnw84ERGU[/embed]
Override Vimeo video
[embed width="500" height="350"]https://vimeo.com/644036051[/embed]
Player offers a wide variety of language translations.
Language can be set in Edit Player / Translation tab.
Following callbacks are supported:
vpl_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);
})
vpl_playerID.addEventListener("mediaRequest", function(data){
//called when new media has been requested, returns (instance, instanceName, counter)
})
vpl_playerID.addEventListener("mediaStart", function(data){
//called on media start, returns (instance, instanceName, counter)
})
vpl_playerID.addEventListener("mediaPlay", function(data){
//called on media play, returns (instance, instanceName, counter)
})
vpl_playerID.addEventListener("mediaPause", function(data){
//called on media pause, returns (instance, instanceName, counter)
})
vpl_playerID.addEventListener("mediaEnd", function(data){
//called on media end, returns (instance, instanceName, counter)
});
vpl_playerID.addEventListener("fullscreenBeforeEnter", function(data){
//called before fullscreen enter, returns (instance, instanceName)
})
vpl_playerID.addEventListener("fullscreenEnter", function(data){
//called on fullscreen enter, returns (instance, instanceName)
})
vpl_playerID.addEventListener("fullscreenExit", function(data){
//called on fullscreen exit, returns (instance, instanceName)
})
vpl_playerID.addEventListener("beforeTheaterEnter", function(data){
//called before theater enter, returns (instance, instanceName)
})
vpl_playerID.addEventListener("beforeTheaterExit", function(data){
//called before theater exit, returns (instance, instanceName)
});
vpl_playerID is constructed from vpl_player + ID.
ID is generated automatically starting from 0 for every new player you place in page. For example, if you add one player in page, ID will be 0 (so it becomes vpl_player0).
You can also manually add instance_id in shortcode (then the plugin will use this as ID), example (This player will have ID 1):
How to use callbacks in wordpress text editor:
<script>
addEvents();
function addEvents(){
if(!window.vpl_playerID){
setTimeout(addEvents,100);
}else{
vpl_playerID.addEventListener('mediaStart', function(data){
});
}
}
</script>
How to use returned parameters:
vpl_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);
});
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.
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.addMedia(track_list[0]); //add first video from track_list
vpl_playerID.addMedia(track_list[1]); //add second video from track_list
//addMedia = function(value, playit, insertPosition)
value = video data
playit = true / false
insertPosition = 0 - at start, 1 second etc (not defined, goes to end)
/* 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!
vpl_playerID is constructed from vpl_player + ID.
ID is generated automatically starting from 0 for every new player you place in page. For example, if you add one player in page, ID will be 0 (so it becomes vpl_player0).
You can also manually add instance_id in shortcode (then the plugin will use this as ID), example (This player will have ID 1):
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>
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.'
}
vpl_playerID.loadMedia('data', obj);return false;
};
</script>
Statistics AddOn is available on the following link
First make sure addOn is activated together with main Video player plugin.
Also, make sure you have the latest compatible version of main Video player Lite plugin.
Register plugin inside Player manager / Edit player / General / Video Statistics tab
Registration is done the same way as registering main plugin.
Access Statistics settings in Player Manager / Edit Player / Video Statistics tab.
Access statistics data in plugin menu Statistics:
You can show data per individual playlist and per WordPress user.
Export individual table data:
Export all video data:
Volume cannot control the on Apple IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript
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.
If you have any questions after purchase, send a message at http://codecanyon.net/user/Tean#contact, and provide your PURCHASE CODE.