Video Player Lite

jQuery

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.

Installation

Include the css and javascript code into HEAD section of the page:

<link rel="stylesheet" type="text/css" href="css/vpl.css" />
<link rel="stylesheet" type="text/css" href="css/PLAYER_CSS_SKIN_GOES_HERE.css"/><!-- plugin css for the demo used -->
    
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/new.js"></script><!-- plugin js -->

Copy player HTML markup in BODY section of the page:

<div id="wrapper" class="vpl-player vpl-skin-pollux">
    ...rest of the html goes here...
</div>

Note: player uses different html markup for each skin (like different icons used) so when you choose skin copy player html markup from that demo. For example, if you want skin pollux, open pollux.html page and copy html markup from that page. Also, player uses just css to style the look of all elements (no javascript), so if you want to delete some player elements like next/previous buttons for example, just delete them from the html.

player skins included: 

vpl-skin-pollux
vpl-skin-aviva
vpl-skin-vega
vpl-skin-sirius
vpl-skin-flat-dark
vpl-skin-flat-light
vpl-skin-flat-gray

Initialize the plugin with settings (see configuration):

<script>
	jQuery(document).ready(function($) {
	    var settings = {
			...
		};
        $("#wrapper").vpl(settings);
});
</script>

Configuration

All player options that can be set when initalizing plugin:

Parameters:

Parameter Value description
playerType normal / lightbox normal player (default) or opens in lightbox
clickOnBackgroundClosesLightbox true / false Click on background around lightbox will close lightbox and player.
lightboxCloseTooltip Tooltip over button to close ligthbox
instanceName string (no spacing or special chars) Name of the player instance, can be used for api
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. This will mute video which is required for autoplay. One more thing to note about autoplay: if you have poster defined on video, poster will be shown instead of autoplay (this is by design). To overcome this, either remove video poster, or set skipPoster:true option in settings, which will skip all posters set on media.
autoPlayAfterFirst true / false Auto play media after first media has been manually started.
autoPlayInViewport true / false Start playing media when player is visible on the page.
selectorInit true / false When player is opened on page element click and you want to autoplay with sound, set this option to true.
playerRatio number Aspect ratio of video area. Set video area ratio to fit your videos. If you videos are 4/3 ratio, use 1.333333. If your videos are 16/9 ratio, use 1.777777 (this is default).
aspectRatio 0 / 1 / 2 Set default media resize option inside player (valid for self hosted media).
Fit inside will always show whole video, but may leave blank spaces above and below, or left and right of the video, depending on the resolution.
Fit outside will always cover the whole screen with video, leaving no blank lines, but may cut part of the video above and below, or left and right of the it, depending on the resolution.
If you want to use this function with Youtube or Vimeo chromeless videos, you will need to set Youtube or Vimeo video width and height.
preload auto/metadata/none Set video preload attribute.
randomPlay true / false Randomize playlist playback. If you have multiple videos, randomize their order.
loopingOn true / false Loop on playlist end backwards to begining. If you have multiple videos, when last video ends, loop to first video.
mediaEndAction next / loop / rewind / poster Media end action. What to do then media finishes.
youtubePlayerType chromeless / default Youtube player type.
forceYoutubeChromeless true / false Hide Youtube title, info, related videos. Note: this will enlarge Youtube video which means loosing part of the video screen. If its causing problems (like video not positioned correctly inside the player), just turn it off.
youtubePlayerColor red / white Valid for youtubePlayerType default. This parameter specifies the color that will be used in the player's video progress bar.
youtubeNoCookie true / false Serve Youtube videos from No Cookie domain.
vimeoPlayerType chromeless / default Vimeo player type. Chromeless is only available for videos hosted by a Plus account or higher! Only one Vimeo player type is allowed in the player! So player can either player all Vimeo videos as chromeless (where player custom controls are used) or as default (where vimeo player default controls are used), not mixed!
vimeoPlayerColor hex Vimeo player color. Valid for vimeoPlayerType default.
facebookAppId Facebook Application ID for social sharing. Create new application here: https://developers.facebook.com/apps and get App ID
useKeyboardNavigationForPlayback true / false Use keyboard navigation for playback
left arrow = seek backward
right arrow = seek forward
f = fullscreen
t = theater mode
spacebar = pause
c = toggle subtitle
m = toggle mute
*/- increase/decrease subtitle font size
blockYoutubeEvents true / false Place transparent div over video to prevent clicking on youtube video.
rightClickContextMenu browser / custom / disabled Right click context menu. Use browser default, custom or disable right click (disable works for self hosted media and Youtube and Vimeo chromeless players).
hideQualityMenuOnSingleQuality true / false Hide quality menu in controls when there is only single quality available
closeSettingsMenuOnSelect true / false Close settings menu completely on select certain value (playback rate, subtitle...).
togglePlaybackOnMultipleInstances true / false Pause one player if other is playing when multiple instances in same page.
theaterElement string Add DOM selector which will get class attached when player enters theater mode (you can add multiple classes, for example: '.classA, .classB')
theaterElementClass string Add classname which will be attached to DOM selector when player enters theater mode (for example: 'foo')
focusVideoInTheater true / false Scroll page to video top when theater mode is activated.
subtitleOffText String Subtitle Off menu item text. Default "Disabled".
caption_breakPointArr Subtitle font size breakpoints, example:
caption_breakPointArr:[
    {width:0, size:18},
    {width:480, size:20},
    {width:768, size:22},
    {width:1024, size:24},
    {width:1280, size:36}
]
Below 1280px, use 24px font size
below 1024px, use 22px font size
below 768px, use 20px font size
etc...
keepCaptionFontSizeAfterManualResize true / false Keep caption font size after manual resize using keyboard controls (+/-)
elementsVisibilityArr Choose which elements to display in the player on narrow screens, example:

Example, when player is below 400px wide show: 'play', 'seekbar', 'fullscreen', 'share' 

elementsVisibilityArr:[
    {width:400, elements:['play', 'seekbar', 'fullscreen', 'share']}
]

Example with 2 breakpoints, when player is below 600px wide show: 'play', 'seekbar', 'fullscreen', 'share', 'info', 'volume', 'next', 'previous', 'pip',
when player is below 400px wide show: 'play', 'seekbar', 'fullscreen', 'share' 

elementsVisibilityArr:[
    {width:600, elements:['play', 'seekbar', 'fullscreen', 'share', 'info', 'volume', 'next', 'previous', 'pip']},
    {width:400, elements:['play', 'seekbar', 'fullscreen', 'share']}
]

When no elementsVisibilityArr is specified, all elements will always be shown!

Possible values: seekbar, play (small play button), time, download, share, info, next, previous, rewind, skip_backward, skip_forward, fullscreen, theater, volume, volume_seekbar, settings (menu controls layout which contains subtitles, playback rate, quality, audio language for live streaming), pip (picture in picture), cc (caption toggle)
rememberPlaybackPosition true / false Remember playback position on new page load (volume, active item, current time).
playbackPositionKey string (no spacing or special characters) Unique string identifier for Remember playback position feature (local storage). Has to be unique per player.
useMobileNativePlayer true / false Use mobile native player on IOS. Note: if true, this will loose ability to play in browser and show any of the custom elements above the media like subtitles.
useSwipeNavigation true / false Use swipe navigation on touch sensitive devices to move to next or previous media.
Note: Works with self hosted audio, video, Youtube or Vimeo chromeless players. It does not work with 360 images or videos!
minimizeOnScroll true / false Minimize on page scroll when player gets out of visible area.
minimizeOnScrollOnlyIfPlaying true / false Minimize on page scroll when player gets out of visible area only if video is playing. minimizeOnScroll needs to be true as well for this to work.
minimizeClass vpl-minimize-bl / vpl-minimize-br Add class which will be attached to player on minimize (minimize to bottom left / bottom right).
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.
disableVideoSkip true / false Disable user to skip video (disable seekbar, previous, next buttons).
seekTime seconds Seek time value for seek backward / seek forward commands.
showStreamVideoBitrateMenu true / false Create bitrate menu for hls, dash streaming.
showStreamAudioBitrateMenu true / false Create bitrate menu for hls, dash streaming.
skipPoster 0=false / 1=true Skip poster on start if exist and go to video directly. Useful if you have poster set on videos and you want to disable them.

Working with playlist

This section provides example of supported media in the playlist. Player can play one or more unlimited media in a row. You can also control playback of videos using randomPlay and loopingOn in configuration.

Self hosted video minimal example: 

    {
        type:'video',
        mp4:'media/video/04.mp4'//short way to set video url without label
    }

Self hosted video full example: 

    {
        type:'video',
        path:[
            {   
                label: 'HD',// label shown in quality menu
                mp4: 'media/video/04.mp4',
               
            },
            {   
                label: 'SD',
                mp4: 'media/video/04.mp4'
            },
            {   
                label: 'Default',
                mp4: 'media/video/04.mp4',
                active:true //active on desktop
            }
        ],
        
        previewSeek: 'data/seek/04.vtt',//show thumbnail preview while seeking video
        poster:'media/video/04.jpg',//optional poster
        //videoFrameTime:5,//start at video frame time 5 seconds (instead of setting poster url)
        download:'media/video/04.mp4',//download url
        description:'Lorem ipsum dolor sit amet, HTML is allowed in description.',
        subtitles:[
            {   
                label: 'English',// label shown in quality menu
                src: 'data/subtitles/sintel-en.vtt',
                active:true //active on start
            },
            {
                label: 'German',
                src: 'data/subtitles/sintel-de.vtt'
            },
            {
                label: 'Spanish',
                src: 'data/subtitles/sintel-es.vtt'
            }
        ],
        pwd:'e2fc714c4727ee9395f324cd2e7f331f',//password to view this video with md5 hash (password is 'abcd'). 
        share:'CUSTOM_SHARE_URL_HERE',
        playbackRate:1.5//playback rate
        endLink:'http://ww.google.com',//navigate to url on video end
        endTarget:'_parent'//_blank, _parent, _self

    },

Self hosted 360 video virtual reality example: 

    {
        type:'video_360',
        mp4:'media/video_360/03.mp4'
    },

Youtube video example: 

    {
        type:'youtube',
        path:'TmNEG8IFd_Y', // youtube video id
        quality:'hd720',//suggested quality
        poster:'POSTER_URL',
        start:5,//video start time
        start:35,//video end time
        description:'Lorem ipsum dolor sit amet, HTML is allowed in description.',
    },

Youtube 360 video virtual reality video example: 

    {
        type:'youtube',
        path:'CpMpfS0QkxY',//youtube video id
        is360:true // is video 360
    },

Vimeo video example: 

   
    {
        type:'vimeo',
        path:'32001208',//vimeo video id
        poster:'POSTER_URL',
        start:5,//video start time
        start:35,//video end time
        description:'Lorem ipsum dolor sit amet, HTML is allowed in description.',
    },

Vimeo 360 video virtual reality video example: 

   
    {
        type:'vimeo',
        path:'159412316',// vimeo video url
        is360:true // is video 360
    },

Self hosted audio example: 

       
    {
        type:'audio',
        path:[
            {   
                mp3: 'media/audio/01.mp3',
                label:'700kbps'//label shown in quality menu
            }
        ],
        poster:'POSTER_URL_HERE',//poster which is shown while audio plays
        description:'Lorem ipsum dolor sit amet, HTML is allowed in description.',
    },

Self hosted audio short example: 

       
    {
        type:'audio',
        mp3:'media/audio/01.mp3',//short way to set url without label
        wav:'OPTIONAL_WAV_URL_HERE',
        poster:'POSTER_URL_HERE',//poster which is shown while audio plays
    },

Image example: 

     
    {
        type:'image',
        path:'media/image/01.jpg',
        duration:5//how long to show image in seconds (optional)
    },

Image 360 panorama example: 

     
    {
        type:'image_360',
        path:'media/image_360/01.jpg'
    },

Apple HLS Live Streaming example: 

     
    {
        type:'hls',
        path:'http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8',
        mp4:'MP4_URL_HERE',//optional backup for browsers that do not support live streaming
    },
    {
        type:'hls',
        path:'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
    },

MPEG DASH Live Streaming example: 

 
    {
        type:'dash',
        path:'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
        mp4:'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',//optional backup for browsers that do not support live streaming
    },

Parameters:

Parameter Required Description
type required video, video_360, hls, dash, audio, image, image_360, youtube, vimeo
path required path to media (video, audio, image),

for Youtube or Vimeo only ID part is required, so for example:
Youtube single video ID is "tb935IxGBt4"
Vimeo single video ID is "279267531"
mp4 Optional url to mp4 video as a backup for browsers that do not support live streaming. (hls, dash)
is360 Set this if Youtube or Vimeo video is 360.
poster Video or audio poster for self hosted media (works for Youtube or Vimeo as well).
videoFrameTime Set any frame as poster for self hosted video. For example, set 2 to display frame at 2 seconds into the video as poster. Do not set poster if you want this feature.
description Media description (HTML allowed)
start Media start seconds
end Media end seconds
duration Image duration in seconds (how long to show image)
width / height If you want to get rid of black bars (which sometimes appear above / below of the video) for Youtube or Vimeo video (using fit-outside with aspect_ratio=2), its necessary to supply video dimensions. For example use width:16 and height:9 to achieve 16/9 video ratio, or width:4 and height:3 to achive 4/3 ratio. Only for Youtube or Vimeo chromeless players. If you want to use this feature for Youtube forceYoutubeChromeless:false in settings as well!
playbackRate Media playback speed
previewSeek Show thumbnail preview when hovering over seekbar. Requires sprite of images and vtt file with time/image data for video.
endLink Url link to open on media end (when media finishes).
endTarget Url link target (_blank, _parent, _self)
share Custom share url link
download Custom download path
pwd Set password to view media (encrypted with md5). Use any online free base64 tool like https://www.base64encode.org/ for encryption.
liveStream boolen If you want to show "LIVE" icon in controls.

Init player on click

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


$('.some-element').on('click', function(){
    settings.selectorInit = true;
    $("#wrapper").vpl(settings);
});

When player is opened on page element click and you want to autoplay with sound, use this option in setting selectorInit

Encryption

You can encrypt media paths and subtitles with base64 to hide real url from page source.

To do so prepend the following string 'ebsfm:' before encrypted file url (using base64). Use any online free base64 tool like https://www.base64encode.org/ for encryption.

Example normal: 

{
    type:'video',
    mp4:'media/video/04.mp4',
}

Example encrypted: 

{
    type:'video',
    mp4:'ebsfm:bWVkaWEvdmlkZW8vMDQubXA0',
}


Subtitle example normal: 

subtitles:[
    {   
        label: 'English',
        src: 'data/subtitles/sintel-en.vtt'
    },
]

Example encrypted: 

subtitles:[
    {   
        label: 'English',
        src: 'ebsfm:ZGF0YS9zdWJ0aXRsZXMvc2ludGVsLWVuLnZ0dA=='
    },
]

Query string parameters

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 configuration



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 working with playlist (remove data- from parameter)



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 working with playlist (remove data- from parameter)



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 working with playlist (remove data- from parameter)



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 working with playlist (remove data- from parameter)

Theater mode

You can restrict player width in css for the wrapper element (or having parent container which holds the player have css max-width). In theater mode, player will have full width.

Player width can be restricted in css: 

.vpl-player{
    max-width: 860px;

Ideally if you have player in empty fullwidth container in your webpage, when theater mode is activated, player will have full width and you dont need to do anything. Otherwise if you have multi column layout, then you would need to make parent which holds the player have fullwidth before theater mode happens.
You can pass your html element (with id or classname) in settings and a custom css class which will be attached to that element before player enters theater mode. 

var settings{
    
theaterElement:'.some-container',
theaterElementClass:'foo',

    }

This means when theater mode happens, element with class some-container will have class foo attached. Then with css you can make layout 100% wide.

There are also these events available: 

player.on("beforeTheaterEnter", function(e, data){

    //called before theater enter, returns (instance, instanceName)

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

    //called before theater exit, returns (instance, instanceName)

});

Seekbar preview thumbnail

Showing preview thumbnails when hovering over seekbar.

Requires sprite of images and vtt file with time/image data for video. Its added with previewSeek in settings: 

media:[
{
    type:'video',
    mp4:'media/video/03.mp4',
    previewSeek: 'data/seek/04.vtt',
}.

Example of vtt format can be found in data/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

Subtitles

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

Subtitle examples are provided inside package data/subtitles directory. 

media:[
{
    type:'video',
    mp4:'media/video/03.mp4',
    subtitles:[
        {   
            label: 'English',
            src: 'data/subtitles/sintel-en.vtt',
            
        },
        {
            label: 'German',
            src: 'data/subtitles/sintel-de.vtt',
            active:true
        },
        {
            label: 'Spanish',
            src: 'data/subtitles/sintel-es.vtt'
        }
    ],
}.

Parameters:

Parameter Required Value
label yes Subtitle menu name
src yes url to subtitle file (srt / vtt format). Examples provided in data/subtitles directory.
active will make subtitle active on start.

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 (from label). You can overwrite active subtitle with active

Callbacks / Events

Following callbacks are supported:


    $("#wrapper").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)

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

        //called before fullscreen enter, returns (instance, instanceName)

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

        //called on fullscreen enter, returns (instance, instanceName)

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

        //called on fullscreen exit, returns (instance, instanceName)

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

        //called before theater enter, returns (instance, instanceName)

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

        //called before theater exit, returns (instance, instanceName)

    });

How to use returned parameters:


    player.on('mediaStart', function(e, data){
        //called on media start, returns (instance, instanceName, counter)

        console.log(data.instanceName);
        console.log(data.counter);//active item

        //get media current time
        data.instance.getCurrentTime();

        //get media duration
        data.instance.getDuration();

    });

API methods

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 (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.setRandom(boolean); //Set random playlist playback
player.setLooping(boolean); //Set playlist loop (when playlist reaches end)


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



/* set playback rate */
--------------------------
player.setPlaybackRate(0.5); //Set playback rate (0.5)
player.setPlaybackRate(1); //Set playback rate (1)
player.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',
        active: true
    },
    {   
        label: 'SD',
        mp4: 'media/video/04.mp4'
    },
],

Example contains 2 qualities (HD, SD). call setPlaybackQuality with label
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.

player.setPlaybackQuality('HD'); //Set quality video (HD) 
player.setPlaybackQuality('SD'); //Set quality video (SD) 




/* youtube */
For youtube, qualities are automatically created on video start.

{
    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...

player.setPlaybackQuality('hd720'); //Set quality youtube (hd720)
player.setPlaybackQuality('hd1080'); //Set quality youtube (hd1080)

https://developers.google.com/youtube/iframe_api_reference#Playback_quality

Edit 11.11.2019, it looks like link above is no longer vaslid and Youtube removed this featuire completely? 


/* subtitle */
--------------------------
Set subtitle (from label)

subtitles:[
    {   
        label: 'English',
        src: 'data/subtitles/sintel-en.vtt',
        
    },
    {
        label: 'German',
        src: 'data/subtitles/sintel-de.vtt'
    },
],

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





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

player.seekBackward(value); //seek x seconds backwards (default 10)
player.seekForward(value); //seek x seconds forward (default 10)






/* load media from playlist on demand */
--------------------------
by counter (counting start from zero, 0 = first media, 1 = second media...)
player.loadMedia('counter', 0); //Load first media in playlist
player.loadMedia('counter', 2); //Load third media

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




var track_list = [

    {
        type: 'youtube', 
        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.',
    }, 

];



/* add track to player */
add media to player on its playlist end
--------------------------

player.addMedia(track_list[0]); //add first video from track_list
player.addMedia(track_list[1]); //add second video from track_list





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

player.destroyInstance(); //Destroy current player and clean after

player.getPlaylistLength(); //get playlist length

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

player.getMediaPlaying(); //get media playing



/* resize */
--------------------------
player.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!

Changing icons

To change icons in player, simply replace svg element in HTML.

<div class="vpl-info-toggle vpl-contr-btn" data-tooltip="Info" data-tooltip-position="left">
    <svg viewBox="0 0 512 512"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg>
</div>

If icon has multiple sub icons, like volume or fullscreen for example, then change each svg inside:

<div class="vpl-fullscreen-toggle vpl-contr-btn">
    <div class="vpl-btn vpl-btn-fullscreen" data-tooltip="Fullscreen">
        <svg viewBox="0 0 448 512"><path d="M448 344v112a23.94 23.94 0 0 1-24 24H312c-21.39 0-32.09-25.9-17-41l36.2-36.2L224 295.6 116.77 402.9 153 439c15.09 15.1 4.39 41-17 41H24a23.94 23.94 0 0 1-24-24V344c0-21.4 25.89-32.1 41-17l36.19 36.2L184.46 256 77.18 148.7 41 185c-15.1 15.1-41 4.4-41-17V56a23.94 23.94 0 0 1 24-24h112c21.39 0 32.09 25.9 17 41l-36.2 36.2L224 216.4l107.23-107.3L295 73c-15.09-15.1-4.39-41 17-41h112a23.94 23.94 0 0 1 24 24v112c0 21.4-25.89 32.1-41 17l-36.19-36.2L263.54 256l107.28 107.3L407 327.1c15.1-15.2 41-4.5 41 16.9z"></path></svg>
    </div>
    <div class="vpl-btn vpl-btn-normal" data-tooltip="Exit Fullscreen">
        <svg viewBox="0 0 512 512"><path d="M200 288H88c-21.4 0-32.1 25.8-17 41l32.9 31-99.2 99.3c-6.2 6.2-6.2 16.4 0 22.6l25.4 25.4c6.2 6.2 16.4 6.2 22.6 0L152 408l31.1 33c15.1 15.1 40.9 4.4 40.9-17V312c0-13.3-10.7-24-24-24zm112-64h112c21.4 0 32.1-25.9 17-41l-33-31 99.3-99.3c6.2-6.2 6.2-16.4 0-22.6L481.9 4.7c-6.2-6.2-16.4-6.2-22.6 0L360 104l-31.1-33C313.8 55.9 288 66.6 288 88v112c0 13.3 10.7 24 24 24zm96 136l33-31.1c15.1-15.1 4.4-40.9-17-40.9H312c-13.3 0-24 10.7-24 24v112c0 21.4 25.9 32.1 41 17l31-32.9 99.3 99.3c6.2 6.2 16.4 6.2 22.6 0l25.4-25.4c6.2-6.2 6.2-16.4 0-22.6L408 360zM183 71.1L152 104 52.7 4.7c-6.2-6.2-16.4-6.2-22.6 0L4.7 30.1c-6.2 6.2-6.2 16.4 0 22.6L104 152l-33 31.1C55.9 198.2 66.6 224 88 224h112c13.3 0 24-10.7 24-24V88c0-21.3-25.9-32-41-16.9z"></path></svg>
    </div>
</div>

You can also use images for the icons, but you will probably have to add some css.

Troubleshooting

Self hosted video mp4 doesnt play

If you have trouble playing video on your server in some browsers, and you get an errors in browser developer console similar to these: 

Specified "type" of "video/mp4" is not supported. Load of media resource ... failed.

This is a mime type problem. You need to add following lines in your .htaccess file on your server: 

AddType video/mp4 .mp4 .m4v

More details: http://voice.firefallpro.com/2012/03/html5-audio-video-mime-types.html




Self hosted audio mp3 doesnt play

If you have trouble playing audio on your server in some browsers, and you get an errors in browser developer console similar to these: 

HTTP "Content-Type" of "audio/mpeg" is not supported. Load of media resource ... failed.

This is a mime type problem. You need to add following lines in your .htaccess file on your server: 

AddType audio/mpeg .mp1 .mp2 .mp3 .mpg .mpeg

More details: http://voice.firefallpro.com/2012/03/html5-audio-video-mime-types.html




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

You cannot control the volume on IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript




Chrome browser on Mac OS

If using 360 videos doesnt work on Chrome browser on Mac, make sure you have Override software rendering list enabled (hardware acceleration).

Enter chrome://flags/ in browser url and press enter.

https://stackoverflow.com/a/26365131/1009466
https://apple.stackexchange.com/questions/150212/hardware-acceleration-for-flash-videos-in-google-chrome
https://www.lifewire.com/hardware-acceleration-in-chrome-4125122