Video Player Lite

Javascript

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.

• codecanyon.net/user/Tean

Take deploy folder and put it on the live server and use in local server like xampp (windows) or mamp (mac).

Open deploy / admin / index.html page and generate html code for the player. You will get code which you need to copy in your web page head and body tag.

Note that the generated cody will contain player HTML. Inside you can see player elements like buttons etc. If you dont want to use some buttons you can simply delete this from the player HTML. For example if you dont want to use Go to next video button you can simply delete this part (element names are most self explanatory).

For example if you just want to have video screen in the player and big play button in the center (no other elements in the player) you only need this HTML:

type:'video',
path:[
    {   
        label: 'HD',
        mp4: 'media/video/04.mp4',
       
    }
],
subtitles:[
    {   
        label: 'English',
        src: 'data/subtitles/sintel-en.vtt',
        active:true
    },
]

Note: After you generate code, if you use self hosted videos you still need to manually edit video url. The same is true for subtitles. The code will generate something like this, note how mp4 and subtitles src have their url set. You need to manually adjust this to link to your videos!

type:'video',
path:[
    {   
        label: 'HD',
        mp4: 'media/video/04.mp4',
       
    }
],
subtitles:[
    {   
        label: 'English',
        src: 'data/subtitles/sintel-en.vtt',
        active:true
    },
]

All player options that can be set when initalizing plugin:

Parameters:

caption_breakPointArr:[
    {width:0, size:18},
    {width:480, size:20},
    {width:768, size:22},
    {width:1024, size:24},
    {width:1280, size:36}
]

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

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

Internal script loading

Some scripts are loaded internally if the player needs them based on the settings used. For example if we want to load 360 virtual reality video, player will need following scripts:

three.min.js
OrbitControls.js

You can change from where the scripts are loaded using player settings:

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",
md5_js: "https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.10.0/js/md5.min.js",
share_js: "js/share_manager.js",

Explanation:

vimeo_js - vimeo api

youtube_js - youtube api

hls_js - hls video playback

dash_js - mpeg dash video playback

three_js - 360 virtual reality video
orbitControls_js - 360 virtual reality video

md5_js - using video passwords

share_js - for social sharing

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',
                activeMobile: true//active on mobile
            },
            {   
                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
        title:'Optional video title.',
        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',
        is360:true,
        mp4:'URL_TO_360_VIDEO'
    },

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
    },

Vimeo password video example:

   
    {
        type:'vimeo',
        path:'159412316',// vimeo video url
        password:true //if video has password
    },

Self hosted audio example:

       
    {
        type:'audio',
        mp3:'media/audio/01.mp3',
        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',
        is360:true,
        path:'URL_TO_IMAGE_PANORAMA'
    },

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
    },

How to load single video from One Drive?

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.

Parameters:

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

document.querySelector('.some-element').addEventListener('click', function(){
    settings.selectorInit = true;
    var wrapper = document.getElementById("wrapper")
    new vpl(wrapper, settings);
});  

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

Set playerType lightbox in settings:

var settings{
    
playerType:'lightbox

}

Add any HTML element to the page (image, link...) and attach this code to it:

var player;
var settings = {...}

document.querySelector('.some-image').addEventListener('click', function(){

    if(!player){//init player first time
        
        var wrapper = document.getElementById("wrapper")
        wrapper.innerHTML = content; 
        player = new vpl(wrapper, settings);
        
    }else{
        player.resume();//reopen lightbox 
    }
   
});

If you have multiple videos in the player, everytime you close ligthbox and reopen it again, player will continue playing at last played video.

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

There are following ways to hide real video url:

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=='
    },
]

Blob

To have video as a blob, use following settings:

useBlob:true

This applies to html5 media (video, audio).

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

How to create a playlist from query string?

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

The 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:

player.addEventListener("beforeTheaterEnter", function(data){

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

})
player.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%.

Showing preview thumbnails when hovering over seekbar. There are 2 ways of using this (use "auto" feature or provide vtt file)

1. Using "auto" feature (works for HTML5 video). Preview thumbnail will be generated automatically.

media:[
{
    type:'video',
    mp4:'media/video/03.mp4',
    previewSeek: 'auto'
}.

Set previewSeek: 'auto'

2. Using vtt file (works for all media types). Requires sprite of images and vtt file with time/image data for video.

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 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:

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

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, counter)

    })
    player.addEventListener("mediaStart", function(data){

        //called on media start, returns (instance, instanceName, counter)

    })
    player.addEventListener("mediaPlay", function(data){

        //called on media play, returns (instance, instanceName, counter)

    })
    player.addEventListener("mediaPause", function(data){

        //called on media pause, returns (instance, instanceName, counter)

    })
    player.addEventListener("mediaEnd", function(data){

        //called on media end, returns (instance, instanceName, counter)

    })
    player.addEventListener("fullscreenBeforeEnter", function(data){

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

    })
    player.addEventListener("fullscreenEnter", function(data){

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

    })
    player.addEventListener("fullscreenExit", function(data){

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

    })
    player.addEventListener("beforeTheaterEnter", function(data){

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

    })
    player.addEventListener("beforeTheaterExit", function(data){

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

    });

    

How to use returned parameters:

    player.addEventListener('mediaStart', function(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();

    });

    

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

load new video by passing video data
var obj = {
    type: 'video', 
    path: 'media/video/06.mp4',
    poster:'media/video/06.jpg',
    description:'Custom description here.'
}
player.loadMedia('data', obj); //Load video







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
--------------------------
//addMedia = function(value, playit, insertPosition)
    value = video data
    playit = true / false
    insertPosition = 0 - at start, 1 second etc (not defined, goes to 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.destroyPlaylist(); //Destroy whole plalyist (player is empty after this, has no videos in queue)

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!

    

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.

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

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