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

Register the plugin at the following link

Instructions how to register (ONLY steps 1-3 are required)

Access control panel here

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.

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: 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 path and subtitles src have their url set. You need to manually adjust this to link to your videos!

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

Player options that can be set when initalizing plugin:

Player buttons and elements:

useBigPlay: true,
useSeekbar: true,
useSoloSeekbar: true,
useInfo: true,
useFullscreen: true,
useTime: true,
usePip: false,//picture in picture
useCc: true,//caption toggle
useAirPlay: false,
usePlaybackRate: true,
useQuality: true,
useSubtitle: true,
useTranscript: false,
useChapterToggle: true,
useCasting: false,
useVolume: true,
usePlay: true,
useNext: false,
usePrevious: false,
useRewind: false,
useSkipBackward: false,
useSkipForward: false,
useDownload: true,
usePlaylistToggle: true,
useTheaterMode: false,
useEmbed: true,

General settings:

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

            playbackRateArr:[
                {value: 2, menu_title: '2x'},
                {value: 1.5, menu_title: '1.5x'},
                {value: 1.25, menu_title: '1.25x'},
                {value: 1, menu_title: '1x (Normal)'},
                {value: 0.5, menu_title: '0.5x'},
                {value: 0.25, menu_title: '0.25x'}
            ]
            

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

Translation settings:

tooltipLightboxPrevious: "Previous",
tooltipLightboxNext: "Next",

tooltipTumblr: "Share on Tumblr",
tooltipTwitter: "Share on Twitter",
tooltipFacebook: "Share on Facebook",
tooltipWhatsApp: "Share On WhatsApp",
tooltipReddit: "Share on Reddit",
tooltipDigg: "Share on Digg",
tooltipLinkedIn: "Share on LinkedIn",
tooltipPinterest: "Share On Pinterest",
tooltipEmail: "Share On Email",
tooltipSms: "Share On Sms",
tooltipEmail: "Share On Email",
tooltipSms: "Share On Sms",
tooltipShare: "Share",
tooltipRepeat: "Repeat",
tooltipClose: "Close",
embedVideoText: "Embed this video:",
copyVideoLinkText: "Copy video link:",
copyEmbedCodeBtnText: "Copy",
copiedEmbedCodeBtnText: "Copied!",
tooltipEmbed: "Embed",

ofText: "of",
tooltipSeek: "Seek",
tooltipInfo: "Info",
tooltipQuality: "Quality",
tooltipPlaybackRate: "Speed",
tooltipSubtitles: "Subtitles",
tooltipPlay: "Play",
tooltipPause: "Pause",
tooltipPrevious: "Previous",
tooltipNext: "Next",
tooltipRewind: "Rewind",
tooltipSkipBackward: "Skip backward",
tooltipSkipForward: "Skip forward",
tooltipPip: "Picture in picture",
tooltipCc: "Subtitles",
tooltipAirPlay: "AirPlay",
tooltipVr: "Toggle VR mode",
tooltipVolume: "Volume",
tooltipMute: "Mute",
tooltipDownload: "Download",
tooltipSettings: "Settings",
tooltipFullscreenEnter: "Fullscreen",
tooltipFullscreenExit: "Exit Fullscreen",
tooltipAudioLanguage: "Audio",
tooltipPlaylistToggle: "Playlist",
tooltipTheaterMode: "Theater mode",
castConnectingMsg: "Connecting to Chromecast",
tooltipPlayOnTv: "Play on TV",
tooltipStopPlayingOnTv: "Stop playing on TV",
tooltipLightboxPrevious: "Previous",
tooltipLightboxNext: "Next",
chaptersMenuHeader: "Chapters",
searchChaptersText: "Search chapters",
tooltipPrevChapter: "Previous chapter",
tooltipNextChapter: "Next chapter",
tooltipChaptersMenu: "Chapters",
subtitleOffText: "Disabled",
privateContentTitle: "This content is private",
privateContentConfirm: "Submit",
privateContentInfo: "Enter password to view",
privateContentPasswordError: "Please enter valid password!",
customContextCopyVideoUrlText: "Copy video url at current time",
getEmbedcodeText:"Copy embed code",
loadMoreBtnText: "Load more",
upNextText: "Up Next",
upNextPreviousText: "Previous",
adTitleText: "Advertisement",
adSkipWaitText: "You can skip ad in",
adSkipReadyText: "SKIP AD",
searchText: "Search...",
showSearchField: false,
searchNothingFoundMsg: "Nothing found",
liveStreamText: "LIVE",
upcomingLiveStreamText: 'Scheduled for',
unmuteBtnText: "Enable volume",

Player icons:

closeIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 320 512'><path d='M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z'></path></svg>",

unmuteIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 640 512'><path d='M633.82 458.1l-69-53.33C592.42 360.8 608 309.68 608 256c0-95.33-47.73-183.58-127.65-236.03-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 42.78-11.96 83.59-33.22 119.06l-38.12-29.46C503.49 318.68 512 288.06 512 256c0-63.09-32.06-122.09-85.77-156.16-11.19-7.09-26.03-3.8-33.12 7.41-7.09 11.2-3.78 26.03 7.41 33.13C440.27 165.59 464 209.44 464 256c0 21.21-5.03 41.57-14.2 59.88l-39.56-30.58c3.38-9.35 5.76-19.07 5.76-29.3 0-31.88-17.53-61.33-45.77-76.88-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61 11.76 6.46 19.12 18.18 20.4 31.06L288 190.82V88.02c0-21.46-25.96-31.98-40.97-16.97l-49.71 49.7L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.36 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.41-6.97 4.16-17.02-2.82-22.45zM32 184v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V352.6L43.76 163.84C36.86 168.05 32 175.32 32 184z'></path></svg>",

shareTumblrIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 320 512'><path d='M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z'></path></svg>",

shareTwitterIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512'><path d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'></path></svg>",

shareFacebookIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 320 512'><path d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'></path></svg>",

shareWhatsAppIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 448 512'><path d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'></path></svg>",

shareLinkedInIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 448 512'><path d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'></path></svg>",

shareRedditIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512'><path d='M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z'></path></svg>",

shareDiggIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512'><path d='M81.7 172.3H0v174.4h132.7V96h-51v76.3zm0 133.4H50.9v-92.3h30.8v92.3zm297.2-133.4v174.4h81.8v28.5h-81.8V416H512V172.3H378.9zm81.8 133.4h-30.8v-92.3h30.8v92.3zm-235.6 41h82.1v28.5h-82.1V416h133.3V172.3H225.1v174.4zm51.2-133.3h30.8v92.3h-30.8v-92.3zM153.3 96h51.3v51h-51.3V96zm0 76.3h51.3v174.4h-51.3V172.3z'></path></svg>",

sharePinterestIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 496 512'><path d='M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z'></path></svg>",

shareEmailIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512'><path d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/></svg>",

shareSmsIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512'><path d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3 0 0 0 0 0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM96 212.8c0-20.3 16.5-36.8 36.8-36.8H152c8.8 0 16 7.2 16 16s-7.2 16-16 16H132.8c-2.7 0-4.8 2.2-4.8 4.8c0 1.6 .8 3.1 2.2 4l29.4 19.6c10.3 6.8 16.4 18.3 16.4 30.7c0 20.3-16.5 36.8-36.8 36.8H112c-8.8 0-16-7.2-16-16s7.2-16 16-16h27.2c2.7 0 4.8-2.2 4.8-4.8c0-1.6-.8-3.1-2.2-4l-29.4-19.6C102.2 236.7 96 225.2 96 212.8zM372.8 176H392c8.8 0 16 7.2 16 16s-7.2 16-16 16H372.8c-2.7 0-4.8 2.2-4.8 4.8c0 1.6 .8 3.1 2.2 4l29.4 19.6c10.2 6.8 16.4 18.3 16.4 30.7c0 20.3-16.5 36.8-36.8 36.8H352c-8.8 0-16-7.2-16-16s7.2-16 16-16h27.2c2.7 0 4.8-2.2 4.8-4.8c0-1.6-.8-3.1-2.2-4l-29.4-19.6c-10.2-6.8-16.4-18.3-16.4-30.7c0-20.3 16.5-36.8 36.8-36.8zm-152 6.4L256 229.3l35.2-46.9c4.1-5.5 11.3-7.8 17.9-5.6s10.9 8.3 10.9 15.2v96c0 8.8-7.2 16-16 16s-16-7.2-16-16V240l-19.2 25.6c-3 4-7.8 6.4-12.8 6.4s-9.8-2.4-12.8-6.4L224 240v48c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-6.9 4.4-13 10.9-15.2s13.7 .1 17.9 5.6z'/></svg>",

shareEmailIcon: "<svg role='img' viewBox='0 0 512 512'><path d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/></svg>",

shareSmsIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512'><path d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3 0 0 0 0 0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM96 212.8c0-20.3 16.5-36.8 36.8-36.8H152c8.8 0 16 7.2 16 16s-7.2 16-16 16H132.8c-2.7 0-4.8 2.2-4.8 4.8c0 1.6 .8 3.1 2.2 4l29.4 19.6c10.3 6.8 16.4 18.3 16.4 30.7c0 20.3-16.5 36.8-36.8 36.8H112c-8.8 0-16-7.2-16-16s7.2-16 16-16h27.2c2.7 0 4.8-2.2 4.8-4.8c0-1.6-.8-3.1-2.2-4l-29.4-19.6C102.2 236.7 96 225.2 96 212.8zM372.8 176H392c8.8 0 16 7.2 16 16s-7.2 16-16 16H372.8c-2.7 0-4.8 2.2-4.8 4.8c0 1.6 .8 3.1 2.2 4l29.4 19.6c10.2 6.8 16.4 18.3 16.4 30.7c0 20.3-16.5 36.8-36.8 36.8H352c-8.8 0-16-7.2-16-16s7.2-16 16-16h27.2c2.7 0 4.8-2.2 4.8-4.8c0-1.6-.8-3.1-2.2-4l-29.4-19.6c-10.2-6.8-16.4-18.3-16.4-30.7c0-20.3 16.5-36.8 36.8-36.8zm-152 6.4L256 229.3l35.2-46.9c4.1-5.5 11.3-7.8 17.9-5.6s10.9 8.3 10.9 15.2v96c0 8.8-7.2 16-16 16s-16-7.2-16-16V240l-19.2 25.6c-3 4-7.8 6.4-12.8 6.4s-9.8-2.4-12.8-6.4L224 240v48c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-6.9 4.4-13 10.9-15.2s13.7 .1 17.9 5.6z'/></svg>",

lightboxCloseIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 384 512'><path d='M217.5 256l137.2-137.2c4.7-4.7 4.7-12.3 0-17l-8.5-8.5c-4.7-4.7-12.3-4.7-17 0L192 230.5 54.8 93.4c-4.7-4.7-12.3-4.7-17 0l-8.5 8.5c-4.7 4.7-4.7 12.3 0 17L166.5 256 29.4 393.2c-4.7 4.7-4.7 12.3 0 17l8.5 8.5c4.7 4.7 12.3 4.7 17 0L192 281.5l137.2 137.2c4.7 4.7 12.3 4.7 17 0l8.5-8.5c4.7-4.7 4.7-12.3 0-17L217.5 256z'></path></svg>",

lightboxPreviousIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 256 512'><path d='M238.475 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L50.053 256 245.546 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L10.454 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z'></path></svg>",

lightboxNextIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 256 512'><path d='M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z'></path></svg>",

minimizeCloseIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 320 512'><path d='M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z'></path></svg>",


//controls

volumeUpIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 576 512'><path d='M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zm233.32-51.08c-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 78.98-39.55 152.09-105.82 195.58-11.17 7.32-14.29 22.34-6.95 33.5 7.04 10.71 21.93 14.56 33.51 6.95C528.27 439.58 576 351.33 576 256S528.27 72.43 448.35 19.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z'></path></svg>",

volumeDownIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 384 512'><path d='M215.03 72.04L126.06 161H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V89.02c0-21.47-25.96-31.98-40.97-16.98zm123.2 108.08c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 229.28 336 242.62 336 257c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.87z'></path></svg>",

volumeOffIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 640 512'><path d='M633.82 458.1l-69-53.33C592.42 360.8 608 309.68 608 256c0-95.33-47.73-183.58-127.65-236.03-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 42.78-11.96 83.59-33.22 119.06l-38.12-29.46C503.49 318.68 512 288.06 512 256c0-63.09-32.06-122.09-85.77-156.16-11.19-7.09-26.03-3.8-33.12 7.41-7.09 11.2-3.78 26.03 7.41 33.13C440.27 165.59 464 209.44 464 256c0 21.21-5.03 41.57-14.2 59.88l-39.56-30.58c3.38-9.35 5.76-19.07 5.76-29.3 0-31.88-17.53-61.33-45.77-76.88-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61 11.76 6.46 19.12 18.18 20.4 31.06L288 190.82V88.02c0-21.46-25.96-31.98-40.97-16.97l-49.71 49.7L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.36 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.41-6.97 4.16-17.02-2.82-22.45zM32 184v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V352.6L43.76 163.84C36.86 168.05 32 175.32 32 184z'></path></svg>",

fullscreenEnterIcon: "<svg aria-hidden='true' focusable='false' role='img' 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>",

fullscreenExitIcon: "<svg aria-hidden='true' focusable='false' role='img' 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>",

videoInfoIcon: "<svg aria-hidden='true' focusable='false' role='img' 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>",

shareToggleIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512'><path d='M16.1 260.2c-22.6 12.9-20.5 47.3 3.6 57.3L160 376V479.3c0 18.1 14.6 32.7 32.7 32.7c9.7 0 18.9-4.3 25.1-11.8l62-74.3 123.9 51.6c18.9 7.9 40.8-4.5 43.9-24.7l64-416c1.9-12.1-3.4-24.3-13.5-31.2s-23.3-7.5-34-1.4l-448 256zm52.1 25.5L409.7 90.6 190.1 336l1.2 1L68.2 285.7zM403.3 425.4L236.7 355.9 450.8 116.6 403.3 425.4z'/></svg>",

downloadIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512'><path d='M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z'></path></svg>",

pipIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512'><path d='M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z'></path></svg>",

prevVideoIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 448 512'><path d='M64 468V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v176.4l195.5-181C352.1 22.3 384 36.6 384 64v384c0 27.4-31.9 41.7-52.5 24.6L136 292.7V468c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12z'></path></svg>",

nextVideoIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 448 512'><path d='M384 44v424c0 6.6-5.4 12-12 12h-48c-6.6 0-12-5.4-12-12V291.6l-195.5 181C95.9 489.7 64 475.4 64 448V64c0-27.4 31.9-41.7 52.5-24.6L312 219.3V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12z'></path></svg>",

playIcon: "<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>",

pauseIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 448 512'><path d='M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z'/></svg>",

rewindIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512'><path d='M255.545 8c-66.269.119-126.438 26.233-170.86 68.685L48.971 40.971C33.851 25.851 8 36.559 8 57.941V192c0 13.255 10.745 24 24 24h134.059c21.382 0 32.09-25.851 16.971-40.971l-41.75-41.75c30.864-28.899 70.801-44.907 113.23-45.273 92.398-.798 170.283 73.977 169.484 169.442C423.236 348.009 349.816 424 256 424c-41.127 0-79.997-14.678-110.63-41.556-4.743-4.161-11.906-3.908-16.368.553L89.34 422.659c-4.872 4.872-4.631 12.815.482 17.433C133.798 479.813 192.074 504 256 504c136.966 0 247.999-111.033 248-247.998C504.001 119.193 392.354 7.755 255.545 8z'></path></svg>",

skipBackwardIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512'><path d='M11.5 280.6l192 160c20.6 17.2 52.5 2.8 52.5-24.6V96c0-27.4-31.9-41.8-52.5-24.6l-192 160c-15.3 12.8-15.3 36.4 0 49.2zm256 0l192 160c20.6 17.2 52.5 2.8 52.5-24.6V96c0-27.4-31.9-41.8-52.5-24.6l-192 160c-15.3 12.8-15.3 36.4 0 49.2z'></path></svg>",

skipForwardIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512'><path d='M500.5 231.4l-192-160C287.9 54.3 256 68.6 256 96v320c0 27.4 31.9 41.8 52.5 24.6l192-160c15.3-12.8 15.3-36.4 0-49.2zm-256 0l-192-160C31.9 54.3 0 68.6 0 96v320c0 27.4 31.9 41.8 52.5 24.6l192-160c15.3-12.8 15.3-36.4 0-49.2z'></path></svg>",

vrIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 640 512'><path d='M608 64H32C14.33 64 0 78.33 0 96v320c0 17.67 14.33 32 32 32h160.22c25.19 0 48.03-14.77 58.36-37.74l27.74-61.64C286.21 331.08 302.35 320 320 320s33.79 11.08 41.68 28.62l27.74 61.64C399.75 433.23 422.6 448 447.78 448H608c17.67 0 32-14.33 32-32V96c0-17.67-14.33-32-32-32zM160 304c-35.35 0-64-28.65-64-64s28.65-64 64-64 64 28.65 64 64-28.65 64-64 64zm320 0c-35.35 0-64-28.65-64-64s28.65-64 64-64 64 28.65 64 64-28.65 64-64 64z'></path></svg>",

ccToggleIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512'><path d='M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM218.1 287.7c2.8-2.5 7.1-2.1 9.2.9l19.5 27.7c1.7 2.4 1.5 5.6-.5 7.7-53.6 56.8-172.8 32.1-172.8-67.9 0-97.3 121.7-119.5 172.5-70.1 2.1 2 2.5 3.2 1 5.7l-17.5 30.5c-1.9 3.1-6.2 4-9.1 1.7-40.8-32-94.6-14.9-94.6 31.2.1 48 51.1 70.5 92.3 32.6zm190.4 0c2.8-2.5 7.1-2.1 9.2.9l19.5 27.7c1.7 2.4 1.5 5.6-.5 7.7-53.5 56.9-172.7 32.1-172.7-67.9 0-97.3 121.7-119.5 172.5-70.1 2.1 2 2.5 3.2 1 5.7L420 222.2c-1.9 3.1-6.2 4-9.1 1.7-40.8-32-94.6-14.9-94.6 31.2 0 48 51 70.5 92.2 32.6z'></path></svg>",

settingsMenuIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512'><path d='M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z'></path></svg>",

theaterToggleIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 459 459'><path d='M408,51H51C22.95,51,0,73.95,0,102v255c0,28.05,22.95,51,51,51h357c28.05,0,51-22.95,51-51V102 C459,73.95,436.05,51,408,51z M408,357H51V102h357V357z'/></svg>",

airplayIcon: "<svg aria-hidden='true' focusable='false' role='img' height='48' viewBox='0 0 48 48' width='48'><defs><path d='M0 0h48v48H0V0z' id='a'/></defs><defs><path d='M0 0h48v48H0V0z' id='c'/></defs><clipPath id='b'><use overflow='visible' xlink:href='#a'/></clipPath><clipPath clip-path='url(#b)' id='d'><use overflow='visible' xlink:href='#c'/></clipPath><path clip-path='url(#d)' d='M42 6H6c-2.2 0-4 1.8-4 4v24c0 2.2 1.8 4 4 4h8v-4H6V10h36v24h-8v4h8c2.2 0 4-1.8 4-4V10c0-2.2-1.8-4-4-4zM12 44h24L24 32z'/></svg>",

bigPlayIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 373.008 373.008' role='img' aria-label='Play'><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>",

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.

For detail about specific media in player go to media section.

Parameters:

Self hosted video minimal example:

    {
        type:'video',
        path:'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
                path: 'media/video/04.mp4',
               
            },
            {   
                label: 'SD',
                path: 'media/video/04.mp4',
                activeMobile: true//active on mobile
            },
            {   
                label: 'Default',
                path: '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,
        path:'URL_TO_360_VIDEO'
    },

VR video can be monoscopic (single screen) which is default or it can be stereoscopic (double screen). If you video is stereoscopic, add vrMode:stereoscopic

    {
        type:'video',
        is360:true,
        vrMode:stereoscopic,//monoscopic, stereoscopic
        path:'URL_TO_360_VIDEO'
    },

Gyroscope should work automatically if supported (note that Gyroscope function needs https url and the list of supported browsers is here: https://developer.mozilla.org/en-US/docs/Web/API/XRSystem/isSessionSupported )

Note that if device does not support stereoscopic mode, video will be played in monoscopic mode.

Image 360 panorama example:

     
    {
        type:'image',
        is360:true,
        path:'URL_TO_IMAGE_PANORAMA'
    },

Available settings for panorama images:

Parameters:

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

Additional settings

Hls

You can pass your own config parameters to hls using following settings:

hlsConfig:{...}

For example:

hlsConfig:{ 
    maxFragLookUpTolerance: 0.25,
    liveSyncDurationCount: 3,
    liveMaxLatencyDurationCount: Infinity
}

Dash

You can pass your own config parameters to dash using following settings:

dashConfig:{...}

For example:

dashConfig:{ 
    'streaming': {
        'stableBufferTime': stableBuffer,
        'bufferTimeAtTopQualityLongForm': bufferAtTopQuality,
        'abr': {
            'minBitrate': {
                'video': minBitrate
            },
            'maxBitrate': {
                'video': maxBitrate
            },
            'limitBitrateByPortal': limitByPortal
        }
    }
}

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

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

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.

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(document.getElementById("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',
    path:'media/video/04.mp4',
}

Example encrypted:

{
    type:'video',
    path:'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).

How to use Airplay in the player?

Use following settings:

useAirPlay:true,
disableRemotePlayback:false

If Airplay is supported and compatible, button to turn on Airplay will show in player controls when video plays.

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-path=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-path=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-path=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-path=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-path=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-path=VIDEO_URL_QUALITY_1,VIDEO_URL_QUALITY_2&vpl-path-1-path=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-path=media/video/01.mp4,media/video/01_hd.mp4&vpl-path-0-label=720p,1080p&vpl-path-1-path=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-path, vpl-path-1-path, 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-path=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%.

To show resume screen before video starts and allow user to choose either to resume video from last played position or restart from beginning:

To activate this feature use folowing settings:

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',
    path:'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',
    path:'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

Using cue points in player

Define specific times in video when to execute a function. Available for media type video, audio, Youtube, Vimeo.

Example, add cuepoints in player settings:

media:[
{
    type:'video',
    path:'media/video/03.mp4',

    cuepoints:[
        {start:5, callback: 'myFirstCue'},
        {start:10, eval:"alert('callback at 10 seconds')"}
    ],
}

Add this function somewhere in page on global level:

function myFirstCue(args){
    alert('callback at '+args.start+' seconds')
    console.log(args)
}

Video example above has 2 cue points. First calls functioncallback while other executes script with eval. Use either callback or eval, not both.

start = when to execute cue point, in seconds (rounded to full second)
callback = name of the function in your page to call
eval = string script to execute with eval

Additional settings for cue points:

cueMakeMarkers = true / false, make cue markers in progress seekbar. Only for chromeless players with custom controls.

executeCueOnlyOnce = true / false, execute cue only once per video

To make the player automatically become fixed to page bottom if user scrolls down the page, use the following settings:

To make the player autoplay when user scroll the page and video player enters into view use the following settings:

Displaying mobile list menu

Its possible to display some options in player in mobile friendly list menu. Example playback rate menu on mobile:

These include playback rate menu, subtitles menu, playback quality menu, audio language menu (for live streaming), chapters menu.

Activate this option with folowing settings:

useMobileListMenu = true / false

To activate this option for chapters use chapters setting.

Add your own buttons in player controls

Buttons can be added in the top and the bottom controls. Settings for adding buttons (example):

buttonsTop:[
    {
        full: '<a href="https://google.com" target="_blank" data-tooltip="I am a custom button" class="vpl-contr-btn vpl-btn-reset my-custom-button"><svg viewBox="0 0 512 512"><path d="M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17v80c0 13.3 10.7 24 24 24h80c13.3 0 24-10.7 24-24V448h40c13.3 0 24-10.7 24-24V384h40c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z"/></svg></a>',
    },
    {
        icon:'<svg viewBox="0 0 512 512"><path d="M192 0c-17.7 0-32 14.3-32 32V64c0 .1 0 .1 0 .2c-38.6 2.2-72.3 27.3-85.2 64.1L39.6 228.8C16.4 238.4 0 261.3 0 288V432v48c0 17.7 14.3 32 32 32H64c17.7 0 32-14.3 32-32V432H416v48c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V432 288c0-26.7-16.4-49.6-39.6-59.2L437.2 128.3c-12.9-36.8-46.6-62-85.2-64.1c0-.1 0-.1 0-.2V32c0-17.7-14.3-32-32-32H192zM165.4 128H346.6c13.6 0 25.7 8.6 30.2 21.4L402.9 224H109.1l26.1-74.6c4.5-12.8 16.6-21.4 30.2-21.4zM96 288a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm288 32a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>',
        url: "https://google.com",
        target: "_blank",
        rel: "nofollow",
        class: 'my-other-button',
        tooltip: "Lets go for a ride!"
    }
],

buttonsBottom:[
    {
        icon:'<svg viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"/></svg>',
        url: "https://google.com",
        target: "_blank",
        rel: "nofollow",
        class: 'my-bottom-button',
        tooltip: "I am a custom button"
    }
],

List one or more buttons. Either provide full button HTML or individual button properties.

Full button HTML

<a href="https://google.com" target="_blank" data-tooltip="I am a custom button" class="vpl-contr-btn vpl-btn-reset my-custom-button"><svg viewBox="0 0 512 512"><path d="M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17v80c0 13.3 10.7 24 24 24h80c13.3 0 24-10.7 24-24V448h40c13.3 0 24-10.7 24-24V384h40c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z"/></svg></a>

If you want the button to use the same styling as the player buttons add classes vpl-contr-btn vpl-btn-reset

Individual button properties

Construct button from properties:

REQUIRED
icon - button icon (svg but can also be image) 

OPTIONAL
url - button url
target - url target (_blank, _self...)
rel - rel attribute
class - classes to add to button
tooltip - button tooltip

If you want the button to use the same styling as the player buttons add classes vpl-contr-btn vpl-btn-reset

Using SVG for icons

To get SVG code, for example, go to Font Awesome page, choose icon and copy SVG code. Of course you can get SVG code from different websites.

Controlling visiblity of buttons on small screen

If you want buttons to hide on small screen (for example mobile) you can use following CSS. my-custom-button is the custom class you added to button.

@media (max-width: 700px) { 
    .my-custom-button{
        display:none;
    }
}

This can be important since the player has its own buttons and not a lot of button can fit on small mobile screen.

Attaching javascript click function to button

If you want to add click function to button you can use following javscript:

document.querySelector('.my-custom-button').addEventListener('click', function(){
    alert('button clicked')
})

Make sure this code is added after document loaded so the button is present in the page.

You can also target this button after player has loaded user player event callbacks:

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

    //called when plugin has been instantiated and is ready to use api, returns (instance, instanceName)

    document.querySelector('.my-custom-button').addEventListener('click', function(){
        alert('button clicked')
    })

})

For example of this, look at custom_button_in_controls.html demo.

Chapters can be shown in chapter menu (which opens above the player).

Example of chapter menu:

Chapters are loaded using webvtt file. Example of webvtt:

WEBVTT

0
00:00:00.000 --> 00:00:10.000
Super long chapter title goes here

1
00:00:10.000 --> 00:00:13.500
Guidance

2
00:00:13.500 --> 00:00:21.000
Main Plot

3
00:00:21.000 --> 00:00:32.450
Chapter Title here

4
00:00:32.450 --> 00:00:55.800
Almost Ready

5
00:00:55.800 --> 00:01:14.000
Final Toughts

Chapter url for video is added in Edit playlist section when adding videos. Note that webvtt file needs to be located on same domain as video player (unless server providing webvtt file contains CORS).

Chapter file is added to video the following way:

media:[
{
    type:'video',
    path:'media/video/03.mp4',
    chapters:'data/chapters/01.vtt',
}.

Example of chapter file can be found inside plugin files documentation / misc / chapters folder.

Available options to chapters

Show chapter menu before video starts

1. If you want to show chapter menu before video starts use following settings:

showControlsBeforeStart:true,
autoPlay:false

Note that to show chapter menu before video starts, you need to supply video duration in seconds and video needs to have poster set. Example (duration and poster set on video)

media:[
{
    type:'video',
    path:'media/video/03.mp4',
    poster:'media/video/03.jpg',
    chapters:'data/chapters/01.vtt',
    duration:73//seconds
}.

Show mobile friendly chapter menu on mobile

To display chapters in mobile friendy list, use following settings:

useMobileChapterMenu:true

This feature is activated by clicking on chapter toggle button in player controls. This will display chapters on mobile in following way:

1. Auto open chapters menu option is not compatible using this.

useMobileChapterMenu:true

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',
    path:'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',
        path: 'media/video/04.mp4',
        active: true
    },
    {   
        label: 'SD',
        path: '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', path: '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 with sound

When you set autoPlay in settings, player will automatically mute video so it can start playing without user interaction.

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

How to contact us?

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.