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