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.
Register the plugin at the following link
Instructions how to register (ONLY steps 1-3 are required)
Registration made to make sure customers use the license on a single project (as per Envato rules) and to help customers owning many licenses easily track on which server licenses are being used.
Include the following css and javascript code into HEAD section of the page:
<link rel="stylesheet" type="text/css" href="css/vb.css" />
<script type="text/javascript" src="js/new.js"></script>
Include player HTML element into BODY section of the page:
<div id="wrapper" class="vb-player">
...rest of player HTML code
</div>
Initialize the plugin:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var settings = {
volume:0.5,
autoPlay:true,
media:[
{
type:'video',
path:'media/video/01.mp4'
}
]
};
new apvb(document.getElementById("wrapper"), settings);
});
</script>
All player options that can be set when initalizing plugin:
Parameters:
| Parameter | Value | description |
|---|---|---|
| sourcePath | Path to plugin root (optional) | |
| instanceName | Name of the player instance (String), can be used for api (no spacing or special chars) | |
| activeItem | Number | Active media to start with on player load (-1 = none, 0 = first, 1 = second...) |
| volume | 0-1 | Media volume |
| autoPlay | true / false | Auto play media. Will auto mute the video which is required for this feature to work. |
| autoPlayAfterFirst | true / false | Auto play media after first media has been manually started. Useful if you want first video for user to manually press play while all other videos play autmatically. |
| aspectRatio | 0 / 1 / 2 | Set how media displays in player; possible values: 0 = original, 1 = fit-inside, 2 = fit-outside (valid for html videos) |
| preload | auto/metadata/none | Self hosted video preload attribute. |
| randomPlay | true / false | Randomize playlist playback |
| loopingOn | true / false | Loop on playlist end backwards to begining. |
| mediaEndAction | next / loop / rewind / poster | Media end action. What to do when media ends. |
| useKeyboardNavigationForPlayback | true / false | Use keyboard navigation for playback (left arrow = seek backward, right arrow = seek forward, page up = previous media, page down = next media, spacebar = pause, m = toggle mute) |
| blockYoutubeEvents | true / false | Place transparent div over video to prevent clicking on youtube video. |
| youtubePlayerType | chromeless / default | Use youtube without controls (chromeless) or with controls (default). |
| forceYoutubeChromeless | true / false | Try to remove youtube logo and title. Note: this will enlarge part of the video. |
| blockVimeoEvents | true / false | Place transparent div over video to prevent clicking on Vimeo video. Note: Using Vimeo player without Vimeo default player controls requires videos hosted by Vimeo Plus account or higher! If you video has controls, using blockVimeoEvents:true will block player controls infront of the video from clicking with the mouse! |
| vimeoPlayerType | chromeless / default | Use vimeo without controls (chromeless) or with controls (default). Using vimeo without controls requires videos hosted by a Starter, Standard, Advanced, Plus, Pro, Business, Premium, or Enterprise account! |
| disableRightClick | true / false | Disable right click on video. Note: using this feature with Youtube and Vimeo requires blockYoutubeEvents:true and blockVimeoEvents:true. |
| enableBackgroundPlaybackToggle | true / false | Enable clicking on background pause / play video, other media. |
| togglePlaybackOnMultipleInstances | true / false | Pause one player if other is playing when multiple instances in same page. |
| displayPosterOnMobile | true / false | Display poster on mobile instead of playing media to preserve bandwidth. Note: each media in playlist needs to have poster defined for this to work. |
| useMobileNativePlayer | true / false | Use mobile native player on IOS. |
| useAirPlay | true / false | Display Airplay button if supported. |
| disableRemotePlayback | true / false | The disableRemotePlayback property of the HTMLMediaElement interface determines whether the media element is allowed to have a remote playback UI. |
| endLink | web url link | Navigate to url on video end. |
| endTarget | _blank / _self / _parent | End link url target |
| documentFullscreen | true / false | By default only video is made fullscreen, when user clicks fullscreen button. If documentFullscreen is true, whole browser will be made fullscreen. |
| useBlob | true / false | Use video as a blob (valid for html video and audio). |
vimeo_js: "https://player.vimeo.com/api/player.js",
youtube_js: "https://www.youtube.com/iframe_api",
hls_js: "https://cdn.jsdelivr.net/npm/hls.js@latest",
dash_js: "https://cdn.dashjs.org/latest/dash.all.min.js",
three_js: "https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js",
orbitControls_js: "https://unpkg.com/three@0.85.0/examples/js/controls/OrbitControls.js",
Mp4 video example:
{
//required
type:'video',//mp4 video
path:'media/video/01.mp4',//path to video
//optional
pathMobile:'media/video/01.mp4',//optional lower quality video which will play on mobile
videoFrameTime: 11,//video frame poster time in seconds (dont set poster and use this as poster preview)
start:5,//start time
end:10,//end time
poster:'url to poster which is shown before video starts',
title:"custom video title here"//add title above video
}
Mp4 360 virtual reality video example:
{
//required
type:'video_360',//360 virtual reality video
path:'media/video_360/02.mp4',//path to video
//optional
pathMobile:'media/video_360/02.mp4',//optional lower quality video which will play on mobile
videoFrameTime: 11,//video frame poster time in seconds (dont set poster and use this as poster preview)
start:5,//start time
end:10,//end time
poster:'url to poster which is shown before video starts',
}
Vimeo video example:
{
//required
type:'vimeo',//vimeo single video
path:'165017258',//vimeo single video ID
is360:false//set true if video is 360
//optional
start:5,//start time
end:10,//end time
playbackRate:2,//playback rate
poster:'url to poster which is shown before video starts',
}
Youtube video example:
{
//required
type:'youtube',//youtube single video
path:'pSOoXLRBDuk',//youtube single video ID
is360:false//set true if video is 360
//optional
start:5,//start time
end:10,//end time
playbackRate:2,//playback rate
poster:'url to poster which is shown before video starts',
}
HLS live streaming video example:
{
//required
type:'hls',//HLS live streaming
path:'path to m3u8 HLS live stream',
//optional
mp4: 'optional backup video url for browsers that do not support live streaming'
start:5,//start time
end:10,//end time
poster:'url to poster which is shown before video starts',
}
MPEG DASH live streaming video example:
{
//required
type:'dash',//MPEG DASH live streaming
path:'path to manifest url live stream',
//optional
mp4: 'optional backup video url for browsers that do not support live streaming'
start:5,//start time
end:10,//end time
poster:'url to poster which is shown before video starts',
}
Image example:
{
//required
type:'image',//normal image
path:'media/image/01.jpg',//path to image
//optional
duration:5000//time to show image in miliseconds (no duration means image is displayed indefinitely)
}
Image 360 panorama example:
{
//required
type:'image_360',//360 image panorama
path:'media/image_360/01.jpg',//path to image
//optional
duration:5000//time to show image in miliseconds (no duration means image is displayed indefinitely)
}
Audio example:
{
//required
type:'audio',//mp3 audio
path:'media/audio/01.mp3',//path to mp3 audio
//optional
start:5,//start time
end:10,//end time
playbackRate:2,//playback rate,
slideshow:['media/image/01.jpg','media/image/02.jpg','media/image/03.jpg'],//image slideshow while audio plays (one or more images)
duration:5000//time to show image in miliseconds
},
]
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 using aspectRatio
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.
Icons in player are SVG and you can change them in player HTML directly. Just change the SVG inside the button, example:
<div class="vb-big-play">
<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 373.008 373.008"><path d="M61.792,2.588C64.771,0.864,68.105,0,71.444,0c3.33,0,6.663,0.864,9.655,2.588l230.116,167.2 c5.963,3.445,9.656,9.823,9.656,16.719c0,6.895-3.683,13.272-9.656,16.713L81.099,370.427c-5.972,3.441-13.334,3.441-19.302,0 c-5.973-3.453-9.66-9.833-9.66-16.724V19.305C52.137,12.413,55.818,6.036,61.792,2.588z"/></svg>
</div>
If the button has multiple icons, like fullscren button or volume button for example, change both SVG inside:
<div class="vb-fullscreen-toggle">
<span class="vb-btn vb-btn-fullscreen">
<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 448 512"><path d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"></path></svg>
</span>
<span class="vb-btn vb-btn-normal">
<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z"></path></svg>
</span>
</div>
Using skip intro feature:
1. Place button in HTML:
<div class="vb-skip-intro">SKIP INTRO</div>
2. Add javascript above player init part:
//localStorage.removeItem('vb-intro-set');//clear skiped intro if needed
if(VBUtils.hasLocalStorage()){
if(localStorage.getItem('vb-intro-set')){
window.location = settings.endLink;
return;
}
document.querySelector('.vb-skip-intro').addEventListener('click', function(){
localStorage.setItem('vb-intro-set','1');
window.location = settings.endLink;
});
}
Following callbacks are supported:
player.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);
})
player.addEventListener('mediaRequest', function(data){
//called when new media has been requested, returns (instance, instanceName, media)
// console.log(data.instance, data.instanceName, data.media);
})
player.addEventListener('mediaStart', function(data){
//called on media start, returns (instance, instanceName, media)
})
player.addEventListener('mediaPlay', function(data){
//called on media play, returns (instance, instanceName, media)
})
player.addEventListener('mediaPause', function(data){
//called on media pause, returns (instance, instanceName, media)
})
player.addEventListener('mediaEnd', function(data){
//called on media end, returns (instance, instanceName, media)
})
player.addEventListener('fullscreenEnter', function(data){
//called on fullscreen enter, returns (instance, instanceName)
})
player.addEventListener('fullscreenExit', function(data){
//called on fullscreen exit, returns (instance, instanceName)
})
Following api methods are included:
player.playMedia(); //Play current media
player.pauseMedia(); //Pause current media
player.togglePlayback(); //Toggle current media (pause/play)
player.nextMedia(); //Play next media
player.previousMedia(); //Play previous media
/* set volume accept values 0-1 */
----------------------------------
player.setVolume(0); //Set volume (0)
player.setVolume(0.5); //Set volume (0.5)
player.setVolume(1); //Set volume (1)
player.toggleMute(); //Toggle mute
player.setPlaybackRate(0.5); //Set playback rate (0.5)
player.setPlaybackRate(1); //Set playback rate (1)
player.setPlaybackRate(2); //Set playback rate (2)
player.getCurrentTime(); //Get current time
player.getDuration(); //Get duration
/* seek accepts seconds */
--------------------------
player.seek(0); //seek (0)
player.seek(5); //seek (5)
player.seek(15); //seek (15)
player.setRandom(); //Set random playlist playback
player.setLooping(); //Set playlist looping (when playlist reaches end)
/* load video on demand */
--------------------------
player.loadMedia(0); //Load first video (counting starts from zero)
player.loadMedia(2); //Load third video
/* load new video */
player.cleanMedia();//first destroy current video (optional)
var video_data = {
type:'video',
path:'VIDEO_URL_HERE'
}
player.loadMedia(video_data);
--------------------------
player.cleanMedia(); //Destroy current playing video
Autoplay is disabled on Chrome and Safari since recent browser changes and requires user interaction with the page before (like a click) to start playback: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Only way to autoplay video is to mute the video.Autoplay is automatically set to false on mobile.
This means when you set autoPlay:true in settings, it will be true on desktop, but on mobile it will be false.
Autoplay doesnt work on IOS, and possibly some other mobile OS out there: User Control of Downloads Over Cellular Networks
You cannot control the volume on IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript
To receive support, first make sure you have registered as described in the register section.
If you have any questions after purchase, send a message at http://codecanyon.net/user/Tean#contact, and provide your PURCHASE CODE.