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.
<?php echo do_shortcode("[apvb player_id='4']");?>
[apvb player_id='4']
With fixed background se to No, You can also adjust background aspect ratio to fit your videos. If your videos are 16/9 enter 16/9. If your videos are 4/3 enter 4/3 etc.
When you add video to page, you can adjust how it will be displayed inside the container it was placed. Basically there are 2 main adjustment, making video fit inside or fill whole screen. These settings are located in Player manager:
Note that this only applies to HTML video, not Youtube or Vimeo.
1. When video uses fit inside, you will be able to see the whole video but (depending on the resolution of the video and the container video was placed in) you can get black bars around the video (which are result of scaling video proportinally inside parent container).
2. When video uses fill whole screen, video will always fill the whole container (and there will never be any black bars around the video) but again depending on the resolution of the video and the container video was placed in, you may loose part of the video (left and right, or up and down), unless video aspect ratio is the same as aspect ratio of container it was placed in.
If you use any of the video control buttons (pause / play, next / previous video, fullscreen etc), by default they are placed above the video area.
Depending on where you place video in your website, some other elements in your page may potentially block these controls, like for example, maybe you have a footer in your website and it sits above the controls, and when you try to use these controls, it may seem like they dont work, simply because your footer may be blocking them.
1. You can try to change player controls z-index by adding following CSS, example:
.vb-controls{
z-index:10;
}
2. If above does not work, you can try to place controls in some other element in the page using Controls container (specify ID/Class name selector of the element in which you want to place controls):
Player controls will then be placed inside that container.
Icons in player are SVG and you can change them in Edit Player /
This example will show how to add custom button in page to control video.
1. Search for button widget and drag widget to page, and set button unique class name:
2. Search for HTML widget and drag widget to page:
Add following code in the widget (this code will pause play video):
<script>
document.querySelector('my-button-play')?.addEventListener('click', function(e){
e.preventDefault();
if(window.vb_player0)vb_player0.togglePlayback();
});
</script>
Note that HTMl widget needs to be present after button in page.
You can do the same with other API methods.
Example, restart video
<script>
document.querySelector('my-button-play')?.addEventListener('click', function(e){
e.preventDefault();
if(window.vb_player0)vb_player0.seek(0);
});
</script>
If you want to reuse the same player in the same page note the following:
1. Create new player for every instance you use:
Wrong: (2 same players cannot repeat in the same page!)[apvb player_id='4'] [apvb player_id='4']Correct:
[apvb player_id='3'] [apvb player_id='4']
[apvb player_id='4' instance_id="0"] [apvb player_id='4' instance_id="1"](instance_id is just a unique number you choose for each player)
Using skip intro feature:
Activate this feature in Edit Player / General tab:
This will add Skip intro HTML above the video. You can add your own HTML and CSS for the button. Note that if some elements in your website sit above this skip intro button, they might block access to this button, in which case you can try solve this with CSS z-index.
Following callbacks are supported:
vb_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);
})
vb_playerID.addEventListener('mediaRequest', function(data){
//called when new media has been requested, returns (instance, instanceName, media)
})
vb_playerID.addEventListener('mediaStart', function(data){
//called on media start, returns (instance, instanceName, media)
})
vb_playerID.addEventListener('mediaPlay', function(data){
//called on media play, returns (instance, instanceName, media)
})
vb_playerID.addEventListener('mediaPause', function(data){
//called on media pause, returns (instance, instanceName, media)
})
vb_playerID.addEventListener('mediaEnd', function(data){
//called on media end, returns (instance, instanceName, media)
})
vb_playerID.addEventListener('fullscreenEnter', function(data){
//called on fullscreen enter, returns (instance, instanceName)
})
vb_playerID.addEventListener('fullscreenExit', function(data){
//called on fullscreen exit, returns (instance, instanceName)
});
vb_playerID is constructed from vb_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 vb_player0).
You can also manually add instance_id in shortcode (then the plugin will use this as ID), example (This player will become vb_player1):
How to use callbacks in wordpress text editor:
<script>
addEvents();
function addEvents(){
if(!window.vb_playerID){
setTimeout(addEvents,100);
}else{
vb_playerID.addEventListener('mediaStart', function(data){
});
}
}
</script>
How to use returned parameters:
vb_playerID.addEventListener('mediaStart', function(data){
//called on media start, returns (instance, instanceName, media)
console.log(data.instance);
console.log(data.instanceName);
console.log(data.media);
});
Following api methods are included:
vb_playerID.playMedia(); //Play current media
vb_playerID.pauseMedia(); //Pause current media
vb_playerID.togglePlayback(); //Toggle current media (pause/play)
vb_playerID.nextMedia(); //Play next media
vb_playerID.previousMedia(); //Play previous media
/* set volume accept values 0-1 */
----------------------------------
vb_playerID.setVolume(0); //Set volume (0)
vb_playerID.setVolume(0.5); //Set volume (0.5)
vb_playerID.setVolume(1); //Set volume (1)
vb_playerID.toggleMute(); //Toggle mute
vb_playerID.setPlaybackRate(0.5); //Set playback rate (0.5)
vb_playerID.setPlaybackRate(1); //Set playback rate (1)
vb_playerID.setPlaybackRate(2); //Set playback rate (2)
vb_playerID.getCurrentTime(); //Get current time
vb_playerID.getDuration(); //Get duration
/* seek accepts seconds */
--------------------------
vb_playerID.seek(0); //seek (0)
vb_playerID.seek(5); //seek (5)
vb_playerID.seek(15); //seek (15)
vb_playerID.setRandom(); //Set random playlist playback
vb_playerID.setLooping(); //Set playlist looping (when playlist reaches end)
/* load video on demand */
--------------------------
vb_playerID.loadMedia(0); //Load first video (counting starts from zero)
vb_playerID.loadMedia(2); //Load third video
/* load new video */
player1.cleanMedia();//first destroy current video (optional), if not video will be added to the end
var video_data = {
type:'video',
path:'VIDEO_URL_HERE'
}
player1.loadMedia(video_data);//load new video
--------------------------
vb_playerID.destroyMedia(); //Destroy current playing video
vb_playerID is constructed from vb_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 vb_player0).
You can also manually add instance_id in shortcode (then the plugin will use this as ID), example (This player will become vb_player1):
Use following code examples in post area.
Toggle playback:
<a onclick="togglePlayback();return false;" href="#">Toggle playback </a>
<script>
function togglePlayback(){
if(vb_playerID)vb_playerID.togglePlayback(); return false;
};
</script>
Set volume:
<a onclick="setVolume(0.5);return false;" href="#">set volume </a>
<script>
function setVolume(val){
if(vb_playerID)vb_playerID.setVolume(val); return false;
};
</script>
Only way to autoplay video is muted video.
Volume cannot control the on Apple IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript
Using Vimeo without default video player controls requires videos hosted by Vimeo Plus account or higher!
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. Always clear your browser cache to make sure your changes are visible.
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 with a link to your live page to illustrate the problem, 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.