Modern Video Player

jQuery


Thank you for purchase. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form on the link.

Quick installation method

Use _skin.html demo which will generate code that you can paste in the head and body section of the page.

You need to run _skin.html on local server (xampp, mamp..) on online. Dont change deploy folder structure in which all player files and folders are located!



Note: special demos list1.html, list2.html, grid1.html currently do not have option to generate code from _skin.html

This special demos create a list / grid of thumbnails that when clicked, can play video in connected player. Thumbnail list and player can be located anywhere on the page separately. Connected player can be normal or lightbox. It can also be fixed to page. Connected player can be hidden until first video is played (hidePlayerUntilPlaylistStartLoad:true).

Use these examples by copying code directly from them. Important settings for this demos are in bold:

var settings = {
    sourcePath:"",
    instanceName:"mvp_player1",
    activePlaylist:".playlist-mixed",
    youtubeAppId:"AIzaSyDQXQJhoY1TBwY_0NtKlXDDICXzsKLVv9I",
    playlistOpened:true,
    rightClickContextMenu:'custom',
    playlistItemContent:'thumb,title,description',
    youtubeThumbSize:'medium',

    
    playerClass:"mvp-player mvp-grid mvp-grid1 mvp-info-dbt",
    usePlayer:false,
    activeItem:-1,
    navigationType: "",
    addPlaylistEvents: false,
    addResizeEvent: false,
    

};

playerClass = classes that will be attached to player  

playlist descritpion style:
mvp-info-dot (description over thumb) 
mvp-info-dbt (description below thumb)
mvp-info-drot (description right of thumb)

usePlayer = we dont use player, just playlist to display list of thumbnail in any style
activeItem = no video load on start (we dont play videos with this, only to display list of thumbnails)
navigationType = do not create navigation from the plugin internally (scroll, buttons etc...)
addPlaylistEvents = do no add click events on thumbnails, we will do this ourselves
addResizeEvent = do no add window resize event for list / grid, we will use our layout of choise

playlistItemContent = thumb,title,date,description,duration

All player options that can be set when initalizing plugin:

Parameters:

Parameter Value description
sourcePath plugin root where the player is located. If the player is located in the same directory where all player folders are located (js, css, includes...) then this does not need to be set. If all player folders (js, css, includes...) are located in one level below the root in a directory named some_folder for example, then sourcePath would be "some_folder/". If all player folders (js, css, includes...) are located in one level above the root in a directory named some_folder for example, then sourcePath would be "../some_folder/". Plugin uses this internally to load some php files and script so it needs relative url to those directories.
instanceName Name of the player instance (String), can be used for api (no spacing or special chars)
activePlaylist #id Active playlist on player start. Leave empty for none. Check working with playlist section for more info.
activeItem Number Active media to start with on player load (-1 = none, 0 = first, 1 = second...)
volume 0-1 Media volume
autoPlay true / false Auto play media. This will mute video which is required for autoplay. One more thing to note about autoplay: if you have poster defined on video, poster will be shown instead of autoplay (this is by design). To overcome this, either remove video poster, or set skipPoster:true option in settings, which will skip all posters set on media.
autoPlayAfterFirst true / false Auto play media after first media has been manually started.
autoPlayInViewport true / false Start playing media when player is visible on the page by user scrolling.
selectorInit true / false When player is opened on page element click and you want to autoplay with sound, set this option to true.
activateWhenParentVisible true / false Activate the player when parent becomes visible. For example, use this if you have player in tabs which have css display none.
playerRatio number Aspect ratio of video area. Set video area ratio to fit your videos. If you videos are 4/3 ratio, use 1.333333. If your videos are 16/9 ratio, use 1.777777 (this is default).
combinePlayerRatio true / false Apply ratio to both player and playlist. Applies to playlist position Vertical right and bottom, Vertical left and bottom. If true, when playlist is on the side and you open / close playlist, player height will grow / shrink to keep video ratio.
aspectRatio 0 / 1 / 2 Set default media resize option inside player (valid for self hosted media).
Fit inside will always show whole video, but may leave blank spaces above and below, or left and right of the video, depending on the resolution.
Fit outside will always cover the whole screen with video, leaving no blank lines, but may cut part of the video above and below, or left and right of the it, depending on the resolution.
preload auto/metadata/none Set video preload attribute.
randomPlay true / false Randomize playlist playback
loopingOn true / false Loop on playlist end backwards to begining.
mediaEndAction next / loop / rewind / poster / comingnext / rel Media end action
next = go to next media
loop = loop curent media
rewind = rewind current media to start
poster = show poster of current media, requires poster set for self hosted media (data-poster="POSTER_URL")
comingnext = show coming next screen
rel = show related videos screen
comingnextTime seconds How long is coming next screen shown before next video (seconds). This is for comingnext mediaEndAction action.
youtubeAppId Youtube API key. Go here for the API key: https://console.developers.google.com and create new project, enable YouTube Data API, go to Credentials, create API key. You can enter multiple keys separated by comma for backup.
youtubePlayerType chromeless / default Youtube player type. Default is chromeless (custom controls).
youtubePlayerColor red / white This parameter specifies the color that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen.
youtubeNoCookie true / false Serve Youtube videos from No Cookie domain.
vimeoPlayerType chromeless / default Vimeo player type. Chromeless is only available for videos hosted by a Plus account or higher! If you set chromeless type and video is not hosted by plus account or higher, default vimeo player will be used in that case. Same playlist can contain both vimeo default and chromeless videos.
vimeoPlayerColor hex Vimeo player color.
vimeoNoCookie true / false Whether to prevent Vimeo player from tracking session data, including cookies. Keep in mind that setting this argument to true also blocks video stats.
facebookAppId Facebook Application ID for social sharing
clickOnBackgroundClosesLightbox true / false With lightbox, click on background around lightbox will close lightbox and player.
useLightboxAdvanceButtons true / false Next and previous buttons in lightbox allow to advance video. If you have single video in player you can remove them.
playlistScrollTheme Scroll theme for navigationType type scroll: http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html
useKeyboardNavigationForPlayback true / false Use keyboard navigation for playback
left arrow = seek backward
right arrow = seek forward
f = fullscreen
t = theater mode
spacebar = pause
c = toggle subtitle
m = toggle mute
*/- increase/decrease subtitle font size
playlistOpened true / false Playlist opened on start
blockYoutubeEvents true / false Place transparent div over video to prevent clicking on youtube video.
rightClickContextMenu browser / custom / disabled Right click context menu. Use browser default, custom or disable right click (disabled works for self hosted media and Youtube and Vimeo chromeless players).
showControlsBeforeStart true / false Show controls before video is played (including chapter menu if video has chapters). The use this feature video poster is required.
Additional:
For self hosted video you need to set video duration in seconds (example data-duration="34")
For Youtube add duration in playlistItemContent
Vimeo automatically gets video duration.
hideQualityMenuOnSingleQuality true / false Hide quality menu in controls when there is only single quality available
truncatePlaylistDescription true / false Shorten playlist item description text and apply (...) on the end.
togglePlaybackOnMultipleInstances true / false Pause one player if other is playing when multiple instances in same page.
hidePlaylistOnFullscreenEnter true / false Hide playlist on fullscreen enter.
theaterElement string Add DOM selector which will get class attached when player enters theater mode (you can add multiple classes, for example: '.classA, .classB')
theaterElementClass string Add classname which will be attached to DOM selector when player enters theater mode (for example: 'foo')
focusVideoInTheater true / false Scroll page to video top when theater mode is activated.
hidePlaylistOnTheaterEnter true / false Hide playlist on theater enter.
verticalBottomSepearator number The limit for when vertical playlist drops below player on narrow screens. Valid for layouts when playlist is on the side.
playlistBottomHeight number Playlist height in playlistPosition left_bottom / right_bottom. Default is 300.
lightboxMaxWidth number Max width of lightbox (height is auto calculated based on ratio). Default is 920.

calculateGrid true / false Layouts with playlistPosition "outer" can have thumbnail grid auto calculated based on breakpoints supplied instead of css media queries, example demos (navigation_outer.html, lightbox.html)
breakPointArr Grid breakpoints on "wrapper" element on which grid is calculated, example:

breakPointArr:[
   {width:0, column:1, gutter:0},
   {width:500, column:2, gutter:0},
   {width:700, column:3, gutter:10},
   {width:1100, column:4, gutter:10},
   {width:1600, column:5, gutter:10}
]

Below 500px, use 1 column, 0 spacing between grid boxes
below 700px use 2 columns, 0 spacing between grid boxes
below 1100px use 3 columns, 10 spacing between grid boxes
etc...
subtitleOffText Subtitle Off menu item text. Default "Disabled".
caption_breakPointArr Subtitle font size breakpoints, example:

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

Below 1280px, use 24px font size
below 1024px, use 22px font size
below 768px, use 20px font size
etc...
keepCaptionFontSizeAfterManualResize true / false Keep caption font size after manual resize using keyboard controls (+/-)
elementsVisibilityArr Choose which elements to display in the player on narrow screens, example:

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

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

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

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

When no elementsVisibilityArr is specified, all elements will always be shown! width applies to wrapper element which holds the player.

Possible values: seekbar, play (small play button), time, download, share, info, next, previous, rewind, skip_backward, skip_forward, fullscreen, theater, volume, volume_seekbar, settings (menu controls layout which contains subtitles, playback_rate, quality), pip (picture in picture), cc (caption toggle), chapter (chapter menu)
playAdsOnlyOnce true / false Play ads only once per main media.
showAnnotationsOnlyOnce true / false Show annotations only once per main media.
rememberPlaybackPosition true / false Remember playback position on new page load (volume, active item, current time).
playbackPositionKey string (no spacing or special characters) Unique string identifier for Remember playback position feature (local storage). Has to be unique per player.
useMobileNativePlayer true / false Use mobile native player on IOS. Note: if true, this will loose ability to play in browser and have any of the custom elements above the media like subtitles, annotations... etc
useSwipeNavigation true / false Use swipe navigation on touch sensitive devices to move to next or previous media.
Note: Works with self hosted audio, video, image, Youtube or Vimeo chromeless players. It does not work with 360 images or videos!
limitDescriptionText number Limit number of characters in playlist item description text. Set zero (0) for no limit.
minimizeOnScroll true / false Minimize on page scroll when player gets out of visible area. Example demo minimize_on_scroll.html Works for all layouts except outer and wall.
minimizeOnScrollOnlyIfPlaying true / false Minimize on page scroll when player gets out of visible area only if video is playing. minimizeOnScroll needs to be true as well for this to work.
minimizeClass class name Add class which will be attached to player on minimize. (mvp-minimize-bl / mvp-minimize-br)
hidePlaylistOnMinimize true / false Hide playlist on minimize (if opened).
useMinimizeCloseBtn true / false Use button to close player when minimized and end minimize on scroll.
playlistItemContent thumb,title,date,description,duration Select content to show in playlist items. Possible values are: thumb,title,date,description,duration. Duration is shown in thumbnail, so if you want duration you need to have thumb as well.
Note: If you want duration with self hosted videos, you need to add duration in data-duration attribute yourself (data-duration="90").
Note: Using duration with Youtube playlist or channel requires more quota!
showStreamVideoBitrateMenu true / false Create video bitrate menu for hls, dash streaming.
showStreamAudioBitrateMenu true / false Create audio bitrate menu for hls, dash streaming.
useResumeScreen true / false Resume playback position prompt - ask user to continue watching where left off or start from the beginning
disableVideoSkip true / false Disable user to skip video (disable seekbar, previous, next buttons, click playlist item).
seekTime number Seek time value for seek backward / seek forward commands
seekToChapterStart true / false When chapters are used, setting to this to true will make click on the seekbar seek to chapter start time. Default is true.
autoOpenChapterMenu true / false Auto open chapters menu on start if video has chapters.
hideChapterMenuOnChapterSelect true / false Hide chapter menu after we click on chapter menu item.
requirePosterFromFolder true / false If true, player will assume you have poster images as per required folder organization when loading playlist from folder.
requireThumbnailsFromFolder true / false If true, player will assume you have thumbnail images as per required folder organization when loading playlist from folder.
displayPosterOnMobile true / false Display poster on mobile instead of playing media to preserve bandwidth. Note: each media in playlist needs to have poster defined for this to work.
showPosterOnPause true / false Show poster everytime video is paused. Video needs to have poster set for this to work.
createAdMarkers true / false Create markers for the mid-roll adverts in seekbar.
youtubeThumbSize default / medium / high / standard / maxres youtube preffered thumb size:
default 120x90
medium 320x180
high 480x360
standard 640x480
maxres 1280x720
vimeoThumbSize 100x75 / 200x150 / 295x166 / 640x360 / 960x540 / 1280x720 / 1920x1080 vimeo preffered thumb size. Note that Vimeo does not always respect those heights but widths are accurate.
useAudioEqualizer true / false Audio visualizer as alternative to poster showing while audio plays.
closeSettingsMenuOnSelect true / false Close settings menu completely on select certain value (playback rate, subtitle...).
skipPoster true / false Skip poster on start if exist and go to video directly. Useful if you have poster set on videos and you want to disable them.
vrInfoImage image url Image which is shown over the player when 360 virtual reality video or image panorama starts to remind user this is 360 media and can be dragged around. Valid for self hosted media.
searchDescriptionInPlaylist true / false Search description in playlist. By default only title is searched.
searchSelector DOM selector Use your own input search field for the playlist items and specify dom selector (ID/Classname) for this element.
showPrevNextVideoThumb true / false Show next and previous video thubmnail when hovering next / previous buttons (enabled on desktop browsers)
upnextTime seconds Time before "Up Next" thumbnail is shown for next playing media. For example, setting it to 20 will make it appear 20 seconds before current media ends. Leave empty to disable this feature.
useCache true / false Cache playlist in browser to limit api requests for Youtube, Vimeo and other services.
cacheTime seconds How long to cache playlist in browser. For example, if you load a Youtube playlist or a Vimeo channel, and set cacheTime:3600 (1 hour), everytime the page is reloaded within that hour, playlist will be loaded from cache. If you change activePlaylist option in settings, playlist will be loaded again using API (because this is what plugin remembers as last stored playlist).
playerClass list of custom classes to attach to player separated by space. Note, when this is used player will not get any other clases attached that is usually does when you use player default settings (like playlist positioned right of player etc...)
usePlayer true / false Do not create player code. Default is true. Use this when you have custom player markup like demos: grid1, list1, list2 etc.. and you dont want player created.
addResizeEvent true / false Add window resize event internally which resizes player and playlist accordingly depending on the layout. Default is true. Use this when you have custom player markup like demos: grid1, list1, list2 etc.. and you dont want resize event added internally.
addPlaylistEvents true / false Add events for click, mouse over and mouse out to playlist items (thumbnails). Default is true. Use this when you have custom markup for playlist and you want to manually add code for clicking on playlist thumb and you dont want events added internally.

This section explains how to load a playlist on start.

Youtube playlist example, you need to have this in page BODY:

<div id="mvp-playlist-list">
     <div class="playlist-youtube-1">
         <div class="mvp-playlist-item" data-type="youtube_playlist" data-path="PLFgquLnL59alCl_2TQvOiD5Vgm1hCaGSI" data-limit="10"></div>
     </div>
 </div>

To load this playlist on start use this settings:

activePlaylist:".playlist-youtube-1",/* active playlist on player start. Leave empty for none. */

Json playlist example, you need to have this in page BODY:

<div id="mvp-playlist-list">
    <div class="playlist-json">
	    <div class="mvp-playlist-item" data-type="json" data-path="json/1.json"></div>
	</div>    
</div>

To load this playlist on start use this settings:

activePlaylist:".playlist-json",

Check api.html demo which contains all possible playlist examples.

Example:

<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "480p", "mp4": "media/video/01.mp4"}, {"quality": "1280p", "mp4": "media/video/01_1280p.mp4"}, {"quality": "720p", "mp4": "media/video/01_720p.mp4"}]' data-quality="1280p" data-poster="media/video/poster/01.jpg" data-download="media/video/01.mp4" data-share="http://www.google.com" data-thumb="media/video/thumb/01.jpg" data-title="Video title goes here" data-description="Self hosted video. Commodo vitae, tempor eu, urna eu mi hendrerit. Maecenas eu erat condimentum."> 

    <div class="mvp-subtitles">
        <div data-label="English" data-src="data/subtitles/sintel-en.vtt" data-default></div>  
        <div data-label="German" data-src="data/subtitles/sintel-de.vtt"></div>
        <div data-label="Spanish" data-src="data/subtitles/sintel-es.vtt"></div>
    </div>

</div>

Parameters:

Parameter Required Value
data-type yes video / video_360 (for 360 videos)
data-path yes path to video quality menu title / video file url (mp4 is supported format) (multiple qualities can be supplied)
data-quality default quality on start for desktop
data-poster video poster
data-poster-frame-time seconds set any video frame time as poster for self hosted video. For example, set 2 to display frame at 2 seconds into the video as poster (can be decimal value for example: 2.3). Requires autoPlay:false in settings. Do not set data-poster if you want this feature.
mvp-subtitles List of subtitles.
data-download download path
data-share share url link
data-start media start time in seconds
data-end media end time in seconds
data-playback-rate media playback speed: http://www.w3schools.com/tags/av_prop_playbackrate.asp
data-aspect-ratio overwite aspect ratio from settings. Set how media displays in player; possible values: 0 = original, 1 = fit-inside, 2 = fit-outside
data-end-link Url link to open on media end (when media finishes).
data-end-target Url link target (_blank, _parent..)
data-duration video duration in seconds (manually add duration). If you want to have duration visible in thumbnails check playlistItemContent





If you want to use single video (or audio) files from google drive, use the following method:

Go to Disc – My drive:

https://drive.google.com/drive/my-drive

right click on video, Get shareable link and you will get something like this:

https://drive.google.com/file/d/1efYX-vPw9PPdGqOiGvWYLKvbH9b8OOnN/view?usp=sharing

use that video ID and add it to the following url in VIDEO_ID:

https://drive.google.com/uc?export=download&id=VIDEO_ID

This is final URL how final video URL should look:

https://drive.google.com/uc?export=download&id=1efYX-vPw9PPdGqOiGvWYLKvbH9b8OOnN 

Use this url in player as type video and mp4 url.




Note: Google drive has some limitation in file size which can be played because it generates expiring links on large files. If your files on Google drive are larger in size (~ several 100 mbs or larger) use the following method for single google drive files, you will need an API key. Create Google Drive API key, go to: https://console.developers.google.com and create new project, enable Drive API, go to Credentials, create Browser key.

use the same Get shareable link we used above and add it to the following url in VIDEO_ID and add your Google drive API_KEY:

https://www.googleapis.com/drive/v3/files/VIDEO_ID?alt=media&key=API_KEY

This is final URL how final video URL should look:

https://www.googleapis.com/drive/v3/files/1efYX-vPw9PPdGqOiGvWYLKvbH9b8OOnN?alt=media&key=XXXXXXXXXXXXXXXXX

Use this url in player as type video and mp4 url.

Supported are Apple HLS and MPEG DASH live streams.

Example HLS:

<div class="mvp-playlist-item" data-type="hls" data-path="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" data-thumb="media/video/thumb/02.jpg" data-title="HLS Video title goes here" data-description="Send live and on‐demand audio and video to iPhone, iPad, Mac, Apple TV, and PC with HTTP Live Streaming (HLS) technology from Apple."></div>

Example DASH:

<div class="mvp-playlist-item" data-type="dash" data-path="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd" data-mp4="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" data-thumb="media/video/thumb/02.jpg" data-title="Dynamic Adaptive Streaming over HTTP" data-description="MPEG-DASH is the first adaptive bit-rate HTTP-based streaming solution that is an international standard.[1] MPEG-DASH should not be confused with a transport protocol — the transport protocol that MPEG-DASH uses is TCP."></div>

Parameters:

Parameter Required Value
data-type yes hls / dash
data-path yes for hls: path to m3u8 HLS live stream
for dash: path to dash manifest live stream
data-mp4 Add url to mp4 video as a backup for browsers that do not support live streaming. (ios dash, ..?)
data-poster video poster
data-download download path
data-share share url link
data-playback-rate media playback speed: http://www.w3schools.com/tags/av_prop_playbackrate.asp
data-aspect-ratio overwite aspect ratio from settings. Set how media displays in player; possible values: 0 = original, 1 = fit-inside, 2 = fit-outside
data-end-link Url link to open on media end (when media finishes).
data-end-target Url link target (_blank, _parent..)
data-live-stream If you want to show "LIVE" icon in controls. For Youtube if stream is live, this icon is automatically added.





Example:

<div class="mvp-playlist-item" data-type="audio" data-path='[{"quality": "128kbps", "mp3": "media/audio/02.mp3", "wav": "media/audio/wav/01.wav"},{"quality": "320kbps", "mp3": "media/audio/02_320kbps.mp3"}]' data-quality="320kbps" data-poster="media/audio/poster/01.jpg" data-download="media/audio/01.mp3" data-share="http://www.google.com" data-thumb="media/audio/thumb/01.jpg" data-title="Audio title goes here" data-description="Self hosted audio. Commodo vitae, tempor eu, urna eu mi hendrerit. Maecenas eu erat condimentum."> 

    <div class="mvp-subtitles">
        <div data-label="English" data-src="data/subtitles/sintel-en.vtt" data-default></div>  
        <div data-label="German" data-src="data/subtitles/sintel-de.vtt"></div>
        <div data-label="Spanish" data-src="data/subtitles/sintel-es.vtt"></div>
    </div>

</div>

Parameters:

Parameter Required Value
data-type yes audio
data-path yes path to audio quality menu title / audio file url (mp3, wav are supported formats, wav takes priority over mp3 if supplied and supported by browser) (multiple qualities can be supplied). Mp3 format is supported in all browsers.
data-quality default quality on start for desktop
data-poster audio poster (image shown while audio plays)
mvp-subtitles List of subtitles.
data-download download path
data-share share url link
data-start media start time in seconds
data-end media end time in seconds
data-playback-rate media playback speed: http://www.w3schools.com/tags/av_prop_playbackrate.asp
data-end-link Url link to open on media end (when media finishes).
data-end-target Url link target (_blank, _parent..)
data-duration audio duration in seconds (manually add duration). If you want to have duration visible in thumbnails check playlistItemContent

Example normal image:

<div class="mvp-playlist-item" data-type="image" data-path="media/image/01.jpg" data-download="media/image/01.jpg" data-share="http://www.google.com" data-duration="5000" data-thumb="media/image/thumb/01.jpg" data-title="Image title goes here" data-description="Custom description. Commodo vitae, tempor eu, urna eu mi hendrerit. Maecenas eu erat condimentum."></div>

Example virtual reality 360 image:

<div class="mvp-playlist-item" data-type="image_360" data-path="media/360_image/01.jpg" data-thumb="media/360_image/thumb/01.jpg" data-title="Image title goes here" data-description="Custom description. Commodo vitae, tempor eu, urna eu mi hendrerit. Maecenas eu erat condimentum."></div>

Parameters:

Parameter Required Value
data-type yes image / image_360 (for 360 images)
data-path yes path to image
data-download download path
data-share share url link
data-duration duration (how long to show the image, in seconds)
data-aspect-ratio overwite aspect ratio from settings. Set how media displays in player; possible values: 0 = original, 1 = fit-inside, 2 = fit-outside
data-end-link Url link to open on media end (when media finishes).
data-end-target Url link target (_blank, _parent..)





Youtube requires API key which needs to be entered in configuration: youtubeAppId

Go here for the API key: https://console.developers.google.com and create new project, enable YouTube Data API, go to Credentials, create API key.

Tutorial on how to create Youtube API key: https://www.youtube.com/watch?v=pJSkp719HeE

Note:

Youtube player type: default / chromeless. This can be adjusted in configuration

Youtube player can use Youtube "default" controls or custom controls as "chromeless" player.


Examples:

Youtube single video:

<div class="mvp-playlist-item" data-type="youtube_single" data-path="5zYArkwq2PQ"></div>



Its also possible to play Youtube single video without api (provide video title, description and thumbnail yourself). In this case Youtube api key in not required. Youtube single video example (note data-noapi attribute which means dont use api to retrieve video title, description and thumbnail):

<div class="mvp-playlist-item" data-type="youtube_single" data-path="jXSxzMTrKq0" data-title="This is Youtube video" data-description="Rihanna has arrived! So Kodak commercial featuring Rihanna and the all new m590 camera from Kodak." data-thumb="https://i.ytimg.com/vi/jXSxzMTrKq0/mqdefault.jpg" data-noapi></div>

Video title, description and thumbnail are optional, so technically this is enough to play Youtube single videos without api:

<div class="mvp-playlist-item" data-type="youtube_single" data-path="jXSxzMTrKq0" data-noapi></div>



One or more Youtube single videos spearated by comma:

<div class="mvp-playlist-item" data-type="youtube_single_list" data-path="5zYArkwq2PQ,M4z90wlwYs8,89s2DVcsoyk"></div>



Youtube playlist:

<div class="mvp-playlist-item" data-type="youtube_playlist" data-path="PLijk13kqreIe83BAajgYNGpsx57keRRNz" data-limit="10"></div>



Youtube channel:

<div class="mvp-playlist-item" data-type="youtube_channel" data-path="UCNL1ZadSjHpjm4q9j2sVtOA" data-limit="22"></div>

Parameters:

Parameter Required Value
data-type yes youtube_single / youtube_single_list / youtube_playlist / youtube_channel
data-path yes single video id / playlist id / channel id
data-sort optional for youtube_channel date, rating, relevance, title, videoCount, viewCount
data-limit number of results to retrieve (default all)
data-load-more Load more videos on total scroll when used with Navigation type scroll or buttons.
Works with Youtube media (playlist, channel, video search) or Vimeo (album, group, channel, video search).
Works in conjuntion with data-limit playlist option (for example, set data-limit="10" which will show 10 videos in playlist on start, then on total scroll, it will load another 10, and so on..
(max data-limit for this option when Vimeo is used is 100).
mvp-subtitles List of subtitles.
data-download custom download url
data-share custom share url link
data-start media start time in seconds
data-end media end time in seconds
data-playback-rate media playback speed: http://www.w3schools.com/tags/av_prop_playbackrate.asp
data-thumb custom thumbnail url
data-poster video poster
data-title custom title
data-description custom description
data-is360 is video 360
data-end-link Url link to open on media end (when media finishes).
data-end-target Url link target (_blank, _parent..)
data-alt string thumbnail alt text.
data-noapi Dont use Youtube api to retrieve video title, description and thumbnail (only for youtube single videos).

1. Vimeo requires API key, register new application: https://developer.vimeo.com/apps/new

2. Get Client identifier (as vimeo_key), Client secrets (as vimeo_secret)

3. Generate Access Token with Public and Private scope. To get video download links you also need Video Files scope as well.

4. Get Token (as vimeo_token) (copy token immediately while its still visible)

5. Enter this data in deploy / includes / vimeo / vimeo_api.php file.


Note:

Vimeo player type: default / chromeless. This can be adjusted in configuration

Vimeo player can use Vimeo "default" controls or custom controls as "chromeless" player. Chromeless is only available for videos hosted by a Plus account or higher! Other option to use custom controls with Vimeo videos, if you are Vimeo Pro member, you can get direct link to video on their servers, than you can use this as self hosted video type instead to get default player interface.


Examples:

Vimeo single video:

<div class="mvp-playlist-item" data-type="vimeo_single" data-path="137812610"></div>



Its also possible to play Vimeo single video without api (provide video title, description and thumbnail yourself). In this case Vimeo api keys are not required. Vimeo single video example (note data-noapi attribute which means dont use api to retrieve video title, description and thumbnail):

<div class="mvp-playlist-item" data-type="vimeo_single" data-path="84503186" data-title="This is Vimeo video" data-description="OTBMIAMI Presents High Fashion with We The Fresh clothing." data-thumb="https://i.vimeocdn.com/video/461423991_295x166.jpg?r=pad" data-noapi></div>

Video title, description and thumbnail are optional, so technically this is enough to play Vimeo single videos without api:

<div class="mvp-playlist-item" data-type="vimeo_single" data-path="84503186" data-noapi></div>



Vimeo single private video:

<div class="mvp-playlist-item" data-type="vimeo_single" data-path="367337290/f83707b367"></div>

Get a list of the videos in an group: https://developer.vimeo.com/api/reference/groups#get_group_videos

Example of vimeo group: https://vimeo.com/groups/artinfx

<div class="mvp-playlist-item" data-type="vimeo_group" data-path="artinfx" data-limit="30" data-sort="date"></div>

data-sort = alphabetical, comments, date, duration, likes, plays
data-sort-direction = desc, asc




Get a list of the videos in an channel: https://developer.vimeo.com/api/reference/channels#get_channel_videos

Example of vimeo channel: https://vimeo.com/channels/mtb

<div class="mvp-playlist-item" data-type="vimeo_channel" data-path="mtb" data-limit="11" data-sort="date"></div>

data-sort = added, alphabetical, comments, date, default, duration, likes, manual, modified_time, plays
data-sort-direction = desc, asc




Get a list of the videos in an album: (requires vimeo username and album ID) https://developer.vimeo.com/api/reference/albums#get_album_videos

Example of vimeo user: https://vimeo.com/filmevondraussen and his album on vimeo: https://vimeo.com/showcase/4439714

<div class="mvp-playlist-item" data-type="vimeo_user_album" data-user-id="filmevondraussen" data-path="4439714" data-limit="21" data-sort="date" data-sort-direction="desc"></div>

data-sort = alphabetical, comments, date, default, duration, likes, manual, modified_time, plays
data-sort-direction = desc, asc




Get a list of the videos in an album: (requires album ID) (un-documented method, may not work in future).

Example of album on vimeo: https://vimeo.com/showcase/3498469

<div class="mvp-playlist-item" data-type="vimeo_album" data-path="3498469" data-limit="21" data-sort="date" data-sort-direction="desc"></div>

data-sort = alphabetical, comments, date, default, duration, likes, manual, modified_time, plays
data-sort-direction = desc, asc




Get a list of the user videos (required user ID).

Example of user: https://vimeo.com/gopro

<div class="mvp-playlist-item" data-type="vimeo_user_videos" data-user-id="gopro"></div>





Get collection / on demand (required collection ID).

Example of collection on vimeo: https://vimeo.com/ondemand/loyisogola

<div class="mvp-playlist-item" data-type="vimeo_ondemand" data-path="loyisogola" data-limit="21" data-sort="date" data-sort-direction="desc"></div>

data-sort = date, default, episode, manual, name, purchase_time, release_date
data-sort-direction = desc, asc




Get folder videos (requires vimeo username and folder ID)

Example of user: https://vimeo.com/user5482434

Example of folder: https://vimeo.com/manage/folders/1444068

<div class="mvp-playlist-item" data-type="vimeo_folder" data-path="1444068" data-user-id="user5482434" data-limit="21" data-sort="date" data-sort-direction="desc"></div>

data-sort = alphabetical, date, default, duration, last_user_action_event_date
data-sort-direction = desc, asc




Parameters:

Parameter Required Value
data-type yes vimeo_single / vimeo_video_query / vimeo_group / vimeo_channel / vimeo_user_album / vimeo_user_videos / vimeo_ondemand / vimeo_folder
data-path yes
data-user-id user id
data-limit number of results to retrieve (default all)
data-load-more Load more videos on total scroll when used with Navigation type scroll or buttons.
Works with Youtube media (playlist, channel, video search) or Vimeo (album, group, channel, video search).
Works in conjuntion with data-limit playlist option (for example, set data-limit="10" which will show 10 videos in playlist on start, then on total scroll, it will load another 10, and so on..
(max data-limit for this option when Vimeo is used is 100).
data-start media start time in seconds
data-end media end time in seconds
data-playback-rate media playback speed: http://www.w3schools.com/tags/av_prop_playbackrate.asp
data-thumb custom thumbnail url
data-poster video poster
data-title custom title
data-description custom description
data-is360 Add this attribute if video is 360.
data-end-link Url link to open on media end (when media finishes).
data-end-target Url link target (_blank, _parent..)
data-alt string thumbnail alt text, default is title.
data-noapi Dont use Vimeo api to retrieve video title, description and thumbnail (only for Vimeo single videos).
data-sort Vimeo sort methods. https://developer.vimeo.com/api/reference
data-sort-direction sort direction: desc / asc (descending / ascending)

Reading video files from folders

Example:

<div class="mvp-playlist-item" data-type="folder_video" data-path="../media/video/" data-limit="5"></div>

Parameters:

Parameter Required Value
data-type yes folder_video
data-path yes relative folder path to the plugin "includes" directory (where folder_parser.php file is located)
data-limit number of results to retrieve (default all)
data-download custom download url
data-share custom share url link
data-start media start time in seconds
data-end media end time in seconds
data-playback-rate media playback speed: http://www.w3schools.com/tags/av_prop_playbackrate.asp
data-sort sort method:
filename-asc - file name ascending
filename-desc - file name descending
date-asc - last modification date ascending
date-desc - last modification date descending



Required folder organization

You need to have following organization when loading files from folders, example:

<div class="mvp-playlist-item" data-type="folder_video" data-path="../media/video/"></div>

Inside 'video' directory, we have 2 folders: 'poster' (where poster files are located) and 'thumb' (where thumbnails for the playlist are located)

Equivalent video and poster/thumbnail file names need to be the same!

So you end up with this structure in your folder:

video directory
    video1.mp4//video file
    video2.mp4
    ...
poster directory
    video1.jpg//poster file
    video2.jpg
    ...    
thumb directory
    video1.jpg//thumb file
    video2.jpg
    ...

This can also be customized with following options: require Poster From Folder and require Thumbnails From Folder

Rules:

Multiple video qualities are not allowed when reading folders! So you cannot have for example (video1.mp4, video1_HD.mp4 inside a folder), this will simply be processed as different video, not different quality.

Required extension for video files is mp4. Required extension for poster and image thumbnails is jpg.






Reading audio files from folders

Example:

<div class="mvp-playlist-item" data-type="folder_audio" data-path="../media/audio/" data-limit="5"></div>

Parameters:

Parameter Required Value
data-type yes folder_audio
data-path yes relative folder path to the plugin "includes" directory (where folder_parser.php file is located)
data-limit number of results to retrieve (default all)
data-download custom download url
data-share custom share url link
data-start media start time in seconds
data-end media end time in seconds
data-playback-rate media playback speed: http://www.w3schools.com/tags/av_prop_playbackrate.asp
data-id3 get id3 tags from files
data-sort sort method:
filename-asc - file name ascending
filename-desc - file name descending
date-asc - last modification date ascending
date-desc - last modification date descending



Required folder organization

You need to have following organization when loading files from folders, example:

<div class="mvp-playlist-item" data-type="folder_audio" data-path="../media/audio/"></div>

Inside 'audio' directory, we have 2 folders: 'poster' (where poster files are located) and 'thumb' (where thumbnails for the playlist are located)

Equivalent audio and poster/thumbnail file names need to be the same!

So you end up with this structure in your folder:

audio directory
    audio1.mp3//audio file
    audio2.mp3
    ...
poster directory
    audio1.jpg//poster file
    audio2.jpg
    ...    
thumb directory
    audio1.jpg//thumb file
    audio2.jpg
    ...

This can also be customized with following options: require Poster From Folder and require Thumbnails From Folder

Rules:

Multiple qualities are not allowed when reading folders! So you cannot have for example (audio1.mp3, audio1_320kbps.mp3 inside a folder), this will simply be processed as different audio, not different quality.

Required extension for audio files is mp3, wav. Required extension for poster and image thumbnails is jpg.






Reading image files from folders

Example:

<div class="mvp-playlist-item" data-type="folder_image" data-path="../media/image/" data-limit="5"></div>

Parameters:

Parameter Required Value
data-type yes folder_image
data-path yes relative folder path to the plugin "includes" directory (where folder_parser.php file is located)
data-limit number of results to retrieve (default all)
data-download custom download url
data-share custom share url link
data-duration duration (how long to show the image, in seconds)
data-sort sort method:
filename-asc - file name ascending
filename-desc - file name descending
date-asc - last modification date ascending
date-desc - last modification date descending



Required folder organization

You need to have following organization when loading files from folders, example:

<div class="mvp-playlist-item" data-type="folder_image" data-path="../media/image/"></div>

Inside 'image' directory, we have 1 folder: 'thumb' (where thumbnails for the playlist are located)

Equivalent image and thumbnail file names need to be the same!

So you end up with this structure in your folder:

image directory
    image1.jpg//large file
    image2.jpg
    ...
thumb directory
    image1.jpg//thumb file
    image2.jpg
    ...

Rules:

Required extension for image files is jpg, jpeg, png, gif.


Example:

<div class="playlist-xml">
    <div class="mvp-playlist-item" data-type="xml" data-path="data/xml/1.xml"></div>
</div>

Only important rule is that XML playlist markup is exactly the same as the playlist markup in HTML!

XML examples are provided inside package xml directory.

Parameters:

Parameter Required Value
data-type yes xml
data-path yes xml url

Note: XML file needs to be located on the same domain as the player!

Important: note that there are single quotes around data-path attribute! All other quotes inside xml nodes are double quotes!

<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "SD", "mp4": "media/video/04.mp4"}, {"quality": "1280p", "mp4": "media/video/04.mp4"}, {"quality": "720p", "mp4": "media/video/04.mp4"}]' data-share="https://codecanyon.net/user/Tean/portfolio" data-preview-seek="data/seek/04.vtt" data-thumb="media/video/thumb/04.jpg" data-title="Video title goes here" data-description="Self hosted video."> 

Example:

<div class="playlist-json">
    <div class="mvp-playlist-item" data-type="json" data-path="data/json/1.txt"></div>
</div>

JSON examples are provided inside package json directory.

Parameters:

Parameter Required Value
data-type yes json
data-path yes json url (or txt file)

Self hosted video example in json with all possible nodes including ads (pre-roll, mid-rolls, end-roll):

{
	"type": "video",
	"path": [	//multiple video qualities supported
	    {
	        "quality": "SD",//menu label
	        "mp4": "media/video/01.mp4"//video url
	    },
	    {
	        "quality": "1280p",
	        "mp4": "media/video/01.mp4"
	    },
	    {
	        "quality": "720p",
	        "mp4": "media/video/01.mp4"
	    }
	],
	"quality": "720p",	//default video quality on start, optional
	"poster": "media/video/poster/01.jpg",	//optional poster
	"thumb": "media/video/thumb/01.jpg",	//playlist thumb
	"title": "Video title goes here",	//video title
	"description": "Custom description. Tiam justo commodo in sem dolor iaculis eros nec vivamus dolor.",	//video description
	"download": "media/video/01.mp4",	//download url
	"share": "http://www.google.com",	//share url
	"endLink": "http://www.google.com",	//url link to open on video end
	"endTarget": "_parent",	//url link target
	"start": "10",	//video start time
	"end": "20",	//video end time
	"playbackRate": "2",	//playback rate
	"subtitles": [	//video subtitles
	    {
	        "label": "English",	//menu label
	        "src": "data/subtitles/sintel-en.vtt",	//subtitle url
	        "default": true 	//make this default subtitle on start, optional
	    },
	    {
	        "label": "German",
	        "src": "data/subtitles/sintel-de.vtt"
	    },
	    {
	        "label": "Spanish",
	        "src": "data/subtitles/sintel-es.vtt"
	    }
	],
	"adPre": //pre-roll: plays before video starts, only one allowed
	{
	    "type": "video",
	    "path": [
	        {
	            "quality": "SD",
	            "mp4": "media/video/ad_01.mp4"
	        }
	    ],
	    "skipEnable": "3",	//allow skip to show button after x seconds, optional
	    "link": "http://www.google.com",	//url link to open when ad is clicked 
		"target": "_blank"	//url link target
	},
	"adMid": [	//mid-rolls, multiple allowed, plays during main video playback
	    {
	        "type": "video",
	        "path": [
	            {
	                "quality": "SD",
	                "mp4": "media/video/ad_02.mp4"
	            }
	        ],
	        "skipEnable": "3",	//allow skip to show button after x seconds, optional
	        "begin":"8"	//when to begin in seconds
	    },
	    {
	        "type": "youtube",	//youtube single mid-roll example
	        "path": "3XJh9n8K3XU",
	        "skipEnable": "3",
	        "begin": "15"
	    }
	],
	"adEnd": 	//end roll, only one allowed, plays after main video finishes
	{
	    "type": "video",
	    "path": [
	        {
	            "quality": "SD",
	            "mp4": "media/video/ad_03.mp4"
	        }
	    ],
	    "skipEnable": "7"	//allow skip to show button after x seconds, optional
	}

}

All possible video parameters shown above, here is example with munimum required (even playlist thumb, title and description are optional):

{
	"type": "video",
	"path": [
	    {
	        "quality": "720p",
	        "mp4": "media/video/01.mp4"
	    }
	],
	"thumb": "media/video/thumb/01.jpg",
	"title": "Video title goes here",
	"description": "Custom description. Tiam justo commodo in sem dolor iaculis eros nec vivamus dolor.",
}

Load any custom HTML in the player with external file. Place your html inside txt file which will be loaded in the player with jquery load. File needs to be located on same domain.

Examples are provided in custom directory inside plugin package.

<div class="mvp-playlist-item" data-type="custom" data-path="data/custom/fb.txt" data-thumb="media/other/fb.jpg" data-title="This is a Facebook video" data-description="Facebook, Inc. is an American social media and technology company based in Menlo Park, California."></div>

<div class="mvp-playlist-item" data-type="custom" data-path="data/custom/gmaps.txt" data-thumb="media/other/gmaps.jpg" data-title="Google maps embed" data-description="Google Maps is a web mapping service developed by Google."></div>

<div class="mvp-playlist-item" data-type="custom" data-path="data/custom/wistia.txt" data-thumb="media/other/wistia.png" data-title="Wistia video here" data-description="Wistia provides simple software for creating, managing, and sharing videos for business"></div>

Parameters:

Parameter Required Value
data-type yes custom
data-path yes url to file (same domain limit)
data-thumb custom thumbnail url
data-title custom title
data-description custom description
data-poster video poster

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


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

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

On video end show coming next screen with next video title showing, allowing user to view next video preview.

To show coming next screen on video end, use this setting:

    mediaEndAction:'comingnext'

Check media end action settings

Using query string parameters. Rules: all parameters begins with "mvp-", 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?mvp-query-instance=instanceName&mvp-auto-play=true&mvp-active-item=1&mvp-media-end-action=loop&mvp-playlist-item-content=title,thumb&mvp-skip-poster=true&mvp-use-resume-screen=false&mvp-random-play=true&mvp-playlist-opened=false

For all possible parameters check configuration

Note: query string must have this mvp-query-instance=instanceName (instanceName is from settings). This is to differentiate between multiple players in page. Use simple instanceName for example "player1", "player2" etc.


How to create a playlist from query string?

Single video in player:

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=video&mvp-path-0-mp4=VIDEO_URL&mvp-path-0-quality=QUALITY_MENU_TITLE&mvp-thumb=THUMB_URL&mvp-title=VIDEO_TITLE&mvp-poster=VIDEO_POSTER&mvp-subtitle-0-label=SUBTITLE_LABEL&mvp-subtitle-0-src=SUBTITLE_URL
www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=video&mvp-path-0-mp4=media/video/01.mp4&mvp-path-0-quality=720p&mvp-thumb=media/video/thumb/01.jpg&mvp-title=Video+title+one&mvp-poster=media/video/poster/01.jpg&mvp-subtitle-0-label=English,German,Spanish&mvp-subtitle-0-src=data/subtitles/sintel-en.vtt,data/subtitles/sintel-de.vtt,data/subtitles/sintel-es.vtt

Multiple video qualities and multiple subtitles:

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=video&mvp-path-0-mp4=VIDEO_URL_QUALITY_1,VIDEO_URL_QUALITY_2&mvp-path-0-quality=QUALITY_MENU_TITLE_1,QUALITY_MENU_TITLE_2&mvp-thumb=THUMB_URL&mvp-title=VIDEO_TITLE&mvp-poster=VIDEO_POSTER&mvp-subtitle-0-label=SUBTITLE_LABEL_1,SUBTITLE_LABEL_2,SUBTITLE_LABEL_3&mvp-subtitle-0-src=SUBTITLE_URL_1,SUBTITLE_URL_2,SUBTITLE_URL_3

Set start time in seconds (mvp-start=12, or mvp-playback-position-time=12):

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=video&mvp-path-0-mp4=media/video/01.mp4&mvp-path-0-quality=720p&mvp-thumb=media/video/thumb/01.jpg&mvp-title=Video+title+one&mvp-poster=media/video/poster/01.jpg&mvp-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?mvp-query-instance=instanceName&mvp-active-item=3&mvp-playback-position-time=12

Multiple videos in player:

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=video,video&mvp-path-0-mp4=VIDEO_URL_QUALITY_1,VIDEO_URL_QUALITY_2&mvp-path-1-mp4=VIDEO_URL_QUALITY_1,VIDEO_URL_QUALITY_2&mvp-path-0-quality=QUALITY_MENU_TITLE_1,QUALITY_MENU_TITLE_2&mvp-path-1-quality=QUALITY_MENU_TITLE_1,QUALITY_MENU_TITLE_2&mvp-thumb=THUMB_URL,THUMB_URL&mvp-title=VIDEO_TITLE,VIDEO_TITLE&mvp-poster=VIDEO_POSTER,VIDEO_POSTER&mvp-subtitle-0-label=SUBTITLE_LABEL_1,SUBTITLE_LABEL_2,SUBTITLE_LABEL_3&mvp-subtitle-1-label=SUBTITLE_LABEL_1,SUBTITLE_LABEL_2&mvp-subtitle-0-src=SUBTITLE_URL_1,SUBTITLE_URL_2,SUBTITLE_URL_3&mvp-subtitle-1-src=SUBTITLE_URL_1,SUBTITLE_URL_2
www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=video,video&mvp-path-0-mp4=media/video/01.mp4,media/video/01_hd.mp4&mvp-path-0-quality=720p,1080p&mvp-path-1-mp4=media/video/02.mp4,media/video/02_hd.mp4&mvp-path-1-quality=SD,HD&mvp-thumb=media/video/thumb/01.jpg,media/video/thumb/02.jpg&mvp-title=Video+ 1,Video+title+two&mvp-poster=media/video/poster/01.jpg,media/video/poster/02.jpg&mvp-subtitle-0-label=English,German,Spanish&mvp-subtitle-0-src=data/subtitles/sintel-en.vtt,data/subtitles/sintel-de.vtt,data/subtitles/sintel-es.vtt&mvp-subtitle-1-label=German,Spanish&mvp-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 thumb, same number of title etc..)

2. Note that path and subtitles have specific format (mvp-path-0-mp4, mvp-path-1-mp4, mvp-path-0-quality, mvp-path-1-quality... for each video).
The same for subtitles (mvp-subtitle-0-label, mvp-subtitle-1-label, mvp-subtitle-0-src, mvp-subtitle-1-src... for each video)

For parameters check video section (remove data- from parameter)




Youtube single video:

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=youtube_single&mvp-path=VIDEO_ID&mvp-playlist-position=no-playlist
www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=youtube_single&mvp-path=pSOoXLRBDuk&mvp-playlist-position=no-playlist

Youtube single video (same video without using youtube api):

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=youtube_single&mvp-path=VIDEO_ID&mvp-thumb=THUMB_URL&mvp-title=VIDEO_TITLE&mvp-description=VIDEO_DESCRIPTION&mvp-poster=VIDEO_POSTER&mvp-noapi=true
www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=youtube_single&mvp-path=pSOoXLRBDuk&mvp-thumb=https://i.ytimg.com/vi/pSOoXLRBDuk/mqdefault.jpg&mvp-title=Giorgio+Armanis+boudoir+fashion+commercial&mvp-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.&mvp-poster=https://i.ytimg.com/vi/pSOoXLRBDuk/maxresdefault.jpg&mvp-noapi=true

Multiple Youtube videos:

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=youtube_single,youtube_single,youtube_single&mvp-path=VIDEO_ID,VIDEO_ID,VIDEO_ID
www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=youtube_single,youtube_single,youtube_single&mvp-path=jXSxzMTrKq0,5zYArkwq2PQ,M4z90wlwYs8

Youtube playlist:

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=youtube_playlist&mvp-path=PLAYLIST_ID&mvp-limit=10&mvp-load-more=true
www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=youtube_playlist&mvp-path=PLFgquLnL59alCl_2TQvOiD5Vgm1hCaGSI&mvp-limit=10&mvp-load-more=true

Youtube channel:

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=youtube_channel&mvp-path=CHANNEL_ID&mvp-sort=date&mvp-limit=10&mvp-load-more=true
www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=youtube_channel&mvp-path=UCqhnX4jA0A5paNd1v-zEysw&mvp-sort=date&mvp-limit=10&mvp-load-more=true

For parameters check youtube section (remove data- from parameter)




Vimeo single video:

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=vimeo_single&mvp-path=VIDEO_ID&mvp-playlist-position=no-playlist
www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=vimeo_single&mvp-path=137812610&mvp-playlist-position=no-playlist

Vimeo single video (same video without using Vimeo api):

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=vimeo_single&mvp-path=VIDEO_ID&mvp-thumb=THUMB_URL&mvp-title=VIDEO_TITLE&mvp-description=VIDEO_DESCRIPTION&mvp-poster=VIDEO_POSTER&mvp-noapi=true
www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=vimeo_single&mvp-path=137812610&mvp-thumb=https://i.vimeocdn.com/video/461423991_295x166.jpg&mvp-title=This+is+Vimeo+video&mvp-description=OTBMIAMI+Presents+High+Fashion+with+We+The+Fresh+clothing.&mvp-poster=https://i.vimeocdn.com/video/461423991_1280x720.jpg&mvp-noapi=true

Vimeo channel:

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=vimeo_channel&mvp-path=CHANNEL_ID&mvp-limit=10&mvp-sort=added&mvp-sort-direction=desc&mvp-load-more=true
www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=vimeo_channel&mvp-path=fashioninmotion&mvp-limit=10&mvp-sort=added&mvp-sort-direction=desc&mvp-load-more=true

For parameters check vimeo section (remove data- from parameter)




Live streaming HLS video:

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=hls&mvp-path=URL_TO_M3U8&mvp-playlist-position=no-playlist


Live streaming DASH video:

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=dash&mvp-path=URL_TO_MPEG_DASH&mvp-mp4=OPTIONAL_MP4_BACKUP_URL_FOR_BROWSERS_THAT_DO_NOT_SUPPORT_DASH&mvp-playlist-position=no-playlist

For parameters check live streaming section (remove data- from parameter)



The same can be done with other media types, just check each section in Working with media

You can encrypt self hosted media paths (video, audio, images) and subtitles with base64 to hide real url from page source.

To do so prepend the following string 'ebsfm:' before encrypted file path (using base64) in data-path attribute.

Use any online free base64 tool like https://www.base64encode.org/ for encryption.

Example normal:

<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]'></div>

Example encrypted:

<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "ebsfm:bWVkaWEvdmlkZW8vMDEubXA0"}]'></div>

To set password to view specific media add data-pwd attribute to playlist item, password example here is "123":

<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-pwd="202cb962ac59075b964b07152d234b70"></div>

To make password use md5 Hash Generator:

http://www.miraclesalad.com/webtools/md5.php

Enter your password and use hash in data-pwd attribute.

Password can also be defined in global playlist data (apply for every item in playlist).

Adverts can be video, audio file, image file (with data-duration set), Youtube single video or Vimeo single video with chromeless player. They can be added before main media starts, during main media play and after main media ends.

Adverts are added inside div class="mvp-ad-section". This can be inside mvp-playlist-item or inside global playlist data as global adverts (apply for every item in playlist).

Add preroll advert will play before main media starts. If multiple are added, they will play in sequence and after they all finish, main video will start.

<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-poster="media/video/poster/01.jpg" data-thumb="media/video/thumb/01.jpg" data-title="Video title goes here" data-description="Self hosted video. Commodo vitae, tempor eu, urna eu mi hendrerit. Maecenas eu erat condimentum."> 

    <div class="mvp-ad-section">
        <div class="mvp-ad mvp-ad-pre" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/ad_01.mp4"}]' data-skip-enable="10"></div>

        <div class="mvp-ad mvp-ad-pre" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/ad_02.mp4"}]' data-skip-enable="20"></div>
    </div>    

</div>

Add midroll advert will play during main media. They require data-begin attribute (when ad starts).

<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-poster="media/video/poster/01.jpg" data-thumb="media/video/thumb/01.jpg" data-title="Video title goes here" data-description="Self hosted video. Commodo vitae, tempor eu, urna eu mi hendrerit. Maecenas eu erat condimentum."> 

    <div class="mvp-ad-section">
        <div class="mvp-ad mvp-ad-mid" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/ad_02.mp4"}]' data-skip-enable="7" data-begin="10"></div>

        <div class="mvp-ad mvp-ad-mid" data-type="audio" data-path='[{"quality": "default", "mp3": "media/audio/01.mp3"}]', data-skip-enable="7" data-begin="20" data-poster="media/audio/poster/01.jpg"></div>   

        <div class="mvp-ad mvp-ad-mid" data-type="youtube" data-path="3XJh9n8K3XU" data-skip-enable="3" data-begin="30"></div>

        <div class="mvp-ad mvp-ad-mid" data-type="image" data-path="media/image/01.jpg" data-duration="5" data-skip-enable="2" data-begin="40"></div>
    </div>

</div>

Add endroll advert will play after main media ends. If multiple are added, they will play in sequence and after they all finish, next media will be called.

<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-poster="media/video/poster/01.jpg" data-thumb="media/video/thumb/01.jpg" data-title="Video title goes here" data-description="Self hosted video. Commodo vitae, tempor eu, urna eu mi hendrerit. Maecenas eu erat condimentum."> 

    <div class="mvp-ad-section">
        <div class="mvp-ad mvp-ad-end" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/ad_03.mp4"}]' data-skip-enable="7"></div>

        <div class="mvp-ad mvp-ad-end" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/ad_04.mp4"}]' data-skip-enable="0"></div>
    </div>    

</div>

Adverts can be defined inside global playlist data as global adverts (apply for every item in playlist).

<div id="mvp-playlist-list">

    <div class="playlist-test">

        <div class="mvp-global-playlist-data">

            <div class="mvp-ad-section">

                <div class="mvp-ad mvp-ad-pre" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/ad_01.mp4"}]' data-skip-enable="10"></div>

                <div class="mvp-ad mvp-ad-pre" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/ad_02.mp4"}]' data-skip-enable="20"></div>

                <div class="mvp-ad mvp-ad-mid" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/ad_02.mp4"}]' data-skip-enable="7" data-begin="10"></div>

                <div class="mvp-ad mvp-ad-mid" data-type="vimeo" data-path="279267531" data-skip-enable="4" data-begin="15"></div>

                <div class="mvp-ad mvp-ad-mid" data-type="audio" data-path='[{"quality": "default", "mp3": "media/audio/01.mp3"}]', data-skip-enable="7" data-begin="20" data-poster="media/audio/poster/01.jpg"></div>   

                <div class="mvp-ad mvp-ad-end" data-type="youtube" data-path="pSOoXLRBDuk" data-skip-enable="7"></div>

                <div class="mvp-ad mvp-ad-end" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/ad_04.mp4"}]' data-skip-enable="0"></div>

            </div>  

        </div>

        <div class="mvp-playlist-item"...

    </div>
            
</div>                

Parameters:

Parameter Required Value
data-type yes video, audio, image, youtube_single, vimeo_single
data-path yes path video, audio, image, youtube_single, vimeo_single
data-skip-enable When to show skip advert button, in seconds. If emmited, no skip button will be shown. Settings this vlaue to 0 will show immediatelly.
data-begin yes for midroll When to start midroll, in seconds.
data-poster Used with advert type audio. Poster is shown in video area while audio plays.
data-duration yes for advert type image How long to show the image, in seconds.
data-link Url link to open when ad is paused.
data-target Url link target (_blank, _parent..)
data-ad-id optional parameter to track ads with ad callbacks

Annotations are HTML elements that can appear over video area during playback. Then can be added to self hosted media (video, audio, images with defined data-duration) and Youtube and Vimeo videos with chromeless players.

Annotations are added inside div class="mvp-annotation-section". This can be inside mvp-playlist-item or inside global playlist data as global annotations (apply for every item in playlist). Additional "id" attribute is added to div class="mvp-annotation-section" and then this can be targeted with CSS.

Annotations can be any HTML, iframe, or AdSense.

Example of HTML annotation:

<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-poster="media/video/poster/01.jpg"> 

    <div class="mvp-annotation-section">
        
        <div id="an1" class="mvp-annotation" data-show data-hide>
            <span>This is a popup text visible through the whole video. Lorem ipsum dolor sit amet. Link <a href="http://www.google.com" target="_blank">here</a></span>
            <div class="mvp-annotation-close" title="Close">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"></path></svg>
            </div>
        </div> 

        <div id="an2" class="mvp-annotation" data-show="5" data-hide="15">
            <div class="an2-wrap">
                <a href="http://www.google.com" target="_blank"><img src="data/ad-placeholder.jpg" alt=""/></a>
                <div class="an2-title">Unlimited space</div>
                <div class="an2-desc">Your advertizing space goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div> 
            </div> 
            <div class="mvp-annotation-close" title="Close">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"></path></svg>
            </div>
        </div>   

        <div id="an3" class="mvp-annotation" data-show="20" data-hide="30">
            <a href="http://www.google.com" target="_blank"><span>This popup is a link and cannot be closed.</span></a>
        </div>

    </div>    

</div>

Example of iframe annotation:

Notice:

1.
mvp-annotation has also class mvp-annotation-iframe

2.
iframe src is about:blank and iframe data-src attribute is actual iframe src! This is so its not loaded until is actually shown in the player.

<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-poster="media/video/poster/01.jpg"> 

    <div class="mvp-annotation-section">
        
        <div id="an1" class="mvp-annotation mvp-annotation-iframe" data-show data-hide>
            <p>This is an iframe</p> 
            <iframe src="about:blank" data-src="https://www.weather.gov/" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
            <div class="mvp-annotation-close" title="Close">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"></path></svg>
            </div>
        </div> 

    </div>    

</div>

Example of AdSense annotation:

Notice:

1.
mvp-annotation has also class mvp-adsense-code

Enter AdSense full code (only ins tag), do not enter script tag here. If you have AdSense CSS, enter it in CSS file.

<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-poster="media/video/poster/01.jpg"> 

    <div class="mvp-annotation-section">
        
        <div class="mvp-annotation mvp-adsense-code" data-show data-hide>
            <ins class="adsbygoogle" 
            style="display:inline-block;width:728px;height:90px"
            data-ad-client="ca-pub-xxxxxxxxxxxxx"
            data-ad-slot="xxxxxx"></ins>
        </div>

    </div>    

</div>

Example of annotations defined inside global playlist data as global annotations (apply for every item in playlist):

<div id="mvp-playlist-list">

    <div class="playlist-test">

        <div class="mvp-global-playlist-data">

            <div class="mvp-annotation-section">
        
                <div id="an1" class="mvp-annotation" data-show data-hide>
                    <span>This is a popup text visible through the whole video. Lorem ipsum dolor sit amet. Link <a href="http://www.google.com" target="_blank">here</a></span>
                    <div class="mvp-annotation-close mvp-ctl" title="Close"></div>
                </div> 

                <div id="an2" class="mvp-annotation" data-show="5" data-hide="15">
                    <div class="an2-wrap">
                        <a href="http://www.google.com" target="_blank"><img src="data/ad-placeholder.jpg" alt=""/></a>
                        <div class="an2-title">Unlimited space</div>
                        <div class="an2-desc">Your advertizing space goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div> 
                    </div> 
                    <div class="mvp-annotation-close mvp-ctl" title="Close"></div>
                </div>   

                <div id="an3" class="mvp-annotation" data-show="20" data-hide="30">
                    <a href="http://www.google.com" target="_blank"><span>This popup is a link and cannot be closed.</span></a>
                </div>

            </div>  

        </div>

        <div class="mvp-playlist-item"...

    </div>
            
</div>             

Anatomy of an annotation:

<div id="an1" class="mvp-annotation" data-show data-hide>
    <span>This is a popup text visible through the whole video. Lorem ipsum dolor sit amet. Link <a href="http://www.google.com" target="_blank">here</a></span>
    <div class="mvp-annotation-close mvp-annotation-close-tr" title="Close"></div>
</div> 

Each annotation element requires class="mvp-annotation" on top level. This element is going to be copied over player video area. Inside any HTML could be added.

Other parameters:

Parameter Required Value
data-show yes Time to show annotations, in seconds. Empty attribute means show on start.
data-hide yes Time to hide annotations, in seconds. Empty attribute means show till the end.

Layouts with playlistPosition "outer" and "wall" have thumbnail grid auto calculated based on breakpoints supplied, example (navigation_outer.html, lightbox.html...)

<script>
    var settings = {
        ...
        calculateGrid:true,
        breakPointArr:[
            {width:0, column:1, gutter:0},
            {width:500, column:2, gutter:0},
            {width:700, column:3, gutter:10},
            {width:1100, column:4, gutter:10},
            {width:1600, column:5, gutter:10}
        ] 
    };
});
</script>
    

Below 500px, use 1 column, 0 spacing between grid boxes
below 700px use 2 columns, 0 spacing between grid boxes
etc...

Showing preview thumbnails when hovering over seekbar.

Requires sprite of images and vtt file with time/image data for video.

<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-preview-seek="data/seek/01.vtt"></div>

Parameters:

Parameter Required Value
data-preview-seek yes Path to vtt file

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

Show preview when hovering over playlist item thumbnail.

Requires gif image (same size as thumbnail) which will be shown on hover.

<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-hover-preview="data/hover/01.gif"></div>

Parameters:

Parameter Required Value
data-hover-preview yes Path to gif file

Example which already has this implemented is hover_preview.html

How to add category and tags to videos and filter videos.

Demo example is taxonomy.html which uses grid layout. Taxonomy filtering works best with grid layout, but it could work with any layout.

How to use?

1. Create taxonomy markup (you can use only categories or tags or both)

Add data-player-id attribute which references player id (mvp_player1)

<div class="mvp-tax-display-wrap" data-player-id="1"> 

    <div class="mvp-tax-display-category-wrap">
        <div class="mvp-tax-display-title">Category</div>

        <div class="mvp-category-item mvp-category-item-selected" title="Show all" data-value="all">SHOW ALL</div>
        <div class="mvp-category-item" title="fashion" data-value="fashion">FASHION</div>
        <div class="mvp-category-item" title="woman" data-value="woman">WOMAN</div>
        <div class="mvp-category-item" title="sport" data-value="sport">SPORT</div>
        <div class="mvp-category-item" title="virtual_reality" data-value="virtual_reality">VIRTUAL REALITY</div>
    </div>

    <div class="mvp-tax-display-tag-wrap">
        <div class="mvp-tax-display-title">Tags</div>

        <div class="mvp-tag-item mvp-tag-item-selected" title="Show all" data-value="all">SHOW ALL</div>
        <div class="mvp-tag-item" title="envato" data-value="envato">ENVATO</div>
        <div class="mvp-tag-item" title="notes" data-value="notes">NOTES</div>
        <div class="mvp-tag-item" title="training" data-value="training">TRAINING</div>
        <div class="mvp-tag-item" title="360" data-value="360">360</div>
    </div>

</div>

2. Add data-category, data-tag attribute to videos in playlist:

<div class="playlist-mixed">

    <div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}' data-poster="media/video/poster/01.jpg" data-thumb="media/video/thumb/01.jpg" data-title="Video title goes here" data-category="fashion,sport" data-tag="training"></div>

    <div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/02.mp4"}' data-poster="media/video/poster/02.jpg" data-thumb="media/video/thumb/02.jpg" data-title="Video title goes here" data-category="fashion,woman,sport" data-tag="envato"></div>

</div>

2. Initialize player:


var mvp_player1;  
jQuery(document).ready(function($) {

var settings = {
    sourcePath:"",
    instanceName:"mvp_player1",
    activePlaylist:".playlist-mixed",
    rightClickContextMenu:'custom',
    playlistItemContent:'thumb,title,description',
    youtubeThumbSize:'medium',

    playerClass:"mvp-player mvp-grid mvp-grid1 mvp-info-dbt",
    usePlayer:false,
    activeItem:-1,
    navigationType: "",
    addPlaylistEvents: false,
    addResizeEvent: false,

};

var url = '_skin/taxonomy.txt';
$("#grid").load(url, function(){
    mvp_player1 = $(this).mvp(settings);
})

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

In settings use:

var settings = {
    rememberPlaybackPosition:true,
    useResumeScreen:true,
    ...
}

Note: resume playback position applies for main video, which means if video has adverts, playback position will be saved for main video, advers will play as usual.

Requires vtt file with chapter data for video.

<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/03.mp4"}]' data-poster="media/video/poster/03.jpg" data-chapters="data/chapters/1.vtt"></div>

Example of chapter file can be found in data/chapters folder.

Example which already has this implemented is chapters.html

If you want to show chapter menu before video starts, use these settings:

autoPlay:false,
autoOpenChapterMenu:true,
showControlsBeforeStart:true,

Note that (to show chapter menu before video starts) for self hosted media you need to supply video duration in seconds (example data-duration="33"). Video also needs to have poster set (data-poster="POSTER_URL").
For Youtube you need to select Playlist item content duration.

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

Subtitle examples are provided inside package data/subtitles directory.

Example:

<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]'>   

    <div class="mvp-subtitles">
        <div data-label="English" data-src="data/subtitles/sintel-en.vtt" data-default></div>
        <div data-label="German" data-src="data/subtitles/sintel-de.vtt" ></div>
        <div data-label="Spanish" data-src="data/subtitles/sintel-es.vtt" ></div>
    </div>

</div>

Youtube single video:

<div class="mvp-playlist-item" data-type="youtube_single" data-path="5zYArkwq2PQ">

    <div class="mvp-subtitles">
        <div data-label="English" data-src="data/subtitles/sintel-en.vtt" data-default></div>
        <div data-label="German" data-src="data/subtitles/sintel-de.vtt" ></div>
        <div data-label="Spanish" data-src="data/subtitles/sintel-es.vtt" ></div>
    </div>

</div>

Parameters:

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

Note: Last active subtitle is saved in browser cache. If you move to next video or load video player again, player will try to select same subtitle (from data-label). You can overwrite active subtitle with data-default

Options defined in mvp-global-playlist-data will be applied to every media in playlist.

<div id="mvp-playlist-list">

    <div class="playlist-test">

        <div class="mvp-global-playlist-data" data-start="5" data-end="10" data-playback-rate="2" data-pwd="5ebe2294ecd0e0f08eab7690d2a6ee69"></div>

        <div class="mvp-playlist-item"...

    </div>
            
</div>                

Parameters:

Parameter Required Value
data-start Enter media start time in seconds.
data-end Enter media end time in seconds.
data-playback-rate media playback speed: http://www.w3schools.com/tags/av_prop_playbackrate.asp
data-pwd Set password to view media.

Adding data-upnext-time attribute to global playlist data will auto create thumbnail and title for the next media and show it upnext time seconds before media finishes. Applies for the whole playlist.

<div id="mvp-playlist-list">

    <div class="playlist-test">

        <div class="mvp-global-playlist-data" data-upnext-time="20"></div>

        <div class="mvp-playlist-item"...

    </div>
            
</div>                

Parameters:

Parameter Required Value
data-upnext-time yes time before media ends to show up next screen.

Theater mode is avilable with all layouts except lightbox wall. In theater mode, player will have full width.

Player width can be restricted in css:

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

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

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

    }

This means when theater mode happens, element with class some-container will have class foo attached.

There are also these events available:

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

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

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

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

});

To add any kind of HTML in playlist items (that are created dynamically) place your HTML in div class="mvp-custom-playlist-item-content":

Example: (div class="foo" will be copied to all playlist items)

<div class="playlist-youtube-3">
    <div class="mvp-playlist-item" data-type="youtube_playlist" data-path="PLFgquLnL59alCl_2TQvOiD5Vgm1hCaGSI" data-limit="10">
        <div class="mvp-custom-playlist-item-content">
            <div class="foo">This div will be copied!</div>
        </div>
    </div>
</div>

Following callbacks are supported:


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

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

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

        //called when new media has been requested, returns (instance, instanceName, media)

        //console.log(data.instance, data.instanceName, data.media);

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

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

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

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

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

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

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

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

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

        //called on playlist start load, returns (instance, instanceName)

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

        //called on playlist end load, returns (instance, instanceName)

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

        //called on playlist item click, returns (instance, instanceName)

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

        //called on playlist item disable, returns (instance, instanceName)

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

        //called on playlist item enable, returns (instance, instanceName)

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

        //called on volume change, returns (instance, instanceName, volume)

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

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

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

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

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

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

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

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

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

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

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

        //called before login screen opens, returns (instance, instanceName, media)

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

        //called when video is downloaded (instance, instanceName, media)

    });

    

Ad callbacks (will trigger when "ad" is playing instead of "normal" media):


    player = mvpjq("#mvp-wrapper").on("adRequest", function(e, data){

        //called when new ad has been requested, returns (instance, instanceName, media)

        console.log(data.instance, data.instanceName, data.media)

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

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

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

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

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

        //called on ad pause (when ad is clicked), returns (instance, instanceName, media)

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

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

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

        //called when ad is skipped, returns (instance, instanceName, media)

    });

    

How to use returned parameters:


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

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

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

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

    });

    

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.toggleRandom(); //Set random playlist playback (true/false/toggle)
player.toggleLoop(); //Set playlist loop (when playlist reaches end) (true/false/toggle)


player.toggleInfo(); //Toggle description panel (true/false/toggle)
player.toggleShare(); //Toggle share panel (true/false/toggle)
player.togglePlaylist(); //Toggle playlist (true/false/toggle)
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 */
Example contains 2 qualities (720p, 1080p).
Active quality on start is specified by optional data-quality="720p".
Quality is any string name set by yourself.

Note: if you do not set data-quality, player will look for the first quality to load on start.

<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "720p", "mp4": "media/video/01.mp4"}, {"quality": "1280p", "mp4": "media/video/01_1280p.mp4"}]' data-quality="720p"></div>

player.setPlaybackQuality('720p'); //Set quality video (720p)
player.setPlaybackQuality('1280p'); //Set quality video (1280p)






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

<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]'>   

    <div class="mvp-subtitles">
        <div data-label="English" data-src="data/subtitles/sintel-en.vtt" data-default></div>
        <div data-label="German" data-src="data/subtitles/sintel-de.vtt" ></div>
        <div data-label="Spanish" data-src="data/subtitles/sintel-es.vtt" ></div>
    </div>

</div>

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





/* seek (seconds) */
--------------------------
player.disableSeek(boolean)//disable / enable seekbar

player.seek(0); //seek (0)
player.seek(5); //seek (5)
player.seek(15); //seek (15)

player.seekBackward();//seek 5 seconds backwards 
player.seekBackward(value); //seek {value} seconds backwards (default 10)
player.seekForward(value); //seek {value} seconds forward (default 10)
player.seekForward();//seek 10 seconds forward 






/* load media by providing track data */
--------------------------
var track = {
    type: 'video', 
    path: [
        {quality: 'default', 'mp4': 'media/video/02.mp4'},
    ],
    poster:'media/video/poster/02.jpg',
    thumb: 'media/video/thumb/02.jpg',
    title: 'Video title goes here 2',
    description:'Custom description here.',
}
player.inputMedia(track); //load this track into the player. 

Note: this will not add this track to playlist, it will only play video in player. If you want to add track as well, use addTrack.




/* load media from playlist on demand */
--------------------------

//Load media (format, value)

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 media-id attribute
player.loadMedia('id', 7); //Load media with data-media-id attribute 7
player.loadMedia('id', 2'); //Load media with data-media-id attribute 2

by title
player.loadMedia('title', 'Video title here'); 



/* load playlist on demand */
--------------------------
player.loadPlaylist('.playlist-test'); //Load 'playlist-test'
player.loadPlaylist('.playlist-youtube-1'); //Load 'playlist-youtube-1'





/* add track(s) to playlist */
Add track to currently active playlist (if active playlist doesnt exist it will be created).
--------------------------
//add track in data format (format, track, play_it, position)
var track = {
    type: 'video', 
    path: [
        {quality: 'default', 'mp4': 'media/video/02.mp4'},
    ],
    poster:'media/video/poster/02.jpg',
    thumb: 'media/video/thumb/02.jpg',
    title: 'Video title goes here 2',
    description:'Custom description here.',
}

player.addTrack('data', track, false, 0); //add track, position 0
player.addTrack('data', track, true, 2); //add track, play it, position 2
player.addTrack('data', track, true); //add track, play it, position end




//add multiple tracks in data format (format, track, play_it, position)
var track_array = [
    {
        type: 'video', 
        path: [
            {quality: '480p', 'mp4': 'media/video/01.mp4'},
            {quality: '1280p', 'mp4': 'media/video/01_1280p.mp4'},
            {quality: '720p', 'mp4': 'media/video/01_720p.mp4'}
        ],
        defaultQuality:'720p',
        defaultQualityMobile:'480p',
        poster:'media/video/poster/01.jpg',
        thumb: 'media/video/thumb/01.jpg',
        title: 'Video title goes here',
        description:'Custom description. Tiam justo commodo nec vivamus dolor.',
        download: 'media/video/02.mp4',
        share: 'http://www.google.com',
        subtitles: [
            {label: 'English', src: 'data/subtitles/sintel-en.vtt', default: true},
            {label: 'German', src: 'data/subtitles/sintel-de.vtt'},
            {label: 'Spanish', src: 'data/subtitles/sintel-es.vtt'}
        ]
    }, 

    {
        type: 'video', 
        path: [
            {quality: 'default', 'mp4': 'media/video/02.mp4'},
        ],
        poster:'media/video/poster/02.jpg',
        thumb: 'media/video/thumb/02.jpg',
        title: 'Video title goes here 2',
        description:'Custom description here.',
    }, 

    {
        type: 'youtube_single', 
        path: 'M4z90wlwYs8'
    },
];

player.addTrack('data', track_array, false, 0); //add tracks, position 0
player.addTrack('data', track_array, true, 2); //add tracks, play it, position 2
player.addTrack('data', track_array, true); //add tracks, play it, position end





//add track in html format (format, track, play_it, position)
var track = '<div class="mvp-playlist-item" data-type="video" data-path=\'[{"quality": "default", "mp4": "media/video/01.mp4"}]\' data-poster="media/video/poster/01.jpg" data-thumb="media/video/thumb/01.jpg"></div>';

player.addTrack('html', track, false, 0); //add track, position 0
player.addTrack('html', track, true, 2); //add track, play it, position 2
player.addTrack('html', track, true); //add track, play it, position end




//add multiple tracks in html format (format, track, play_it, position)
var track_array = [
     '<div class="mvp-playlist-item" data-type="video" data-path=\'[{"quality": "default", "mp4": "media/video/01.mp4"}]\' data-poster="media/video/poster/01.jpg" data-thumb="media/video/thumb/01.jpg"></div>',

     '<div class="mvp-playlist-item" data-type="video" data-path=\'[{"quality": "default", "mp4": "media/video/02.mp4"}]\' data-poster="media/video/poster/02.jpg" data-thumb="media/video/thumb/02.jpg"></div>',

     '<div class="mvp-playlist-item" data-type="video" data-path=\'[{"quality": "default", "mp4": "media/video/03.mp4"}]\' data-poster="media/video/poster/03.jpg" data-thumb="media/video/thumb/03.jpg"></div>'
];

player.addTrack('html', track_array, false, 0); //add tracks, position 0
player.addTrack('html', track_array, true, 2); //add tracks, play it, position 2
player.addTrack('html', track_array, true); //add tracks, play it, position end





/* remove track(s) from playlist */
--------------------------
//remove track by number (counting start from zero, 0 = first media, 1 = second media...)
player.removeTrack('counter', 0); //remove first track
player.removeTrack('counter', 2); //remove third track
player.removeTrack(player.getPlaylistLength()-1); //remove last track in playlist
player.destroyPlaylist(); //remove all tracks

//remove track by title
player.removeTrack('title', Video title number 1'); //remove media 'Video title number 1'
player.removeTrack('title', 'Video title number 2'); //remove media 'Video title number 2'

//remove track by media id
player.removeTrack('id', 0); //remove track media id 0
player.removeTrack('id', 0); //remove track media id 1



/* load more */
--------------------------
player.loadMore();// load more function, valid for Youtube and Vimeo 

player.setLoadMore(boolean);//toggle load more function on/off


/* add more (used with ajax to get more tracks from database) */
--------------------------
player.addMore();//manually call add more 

player.setAddMore(boolean);//toggle addMoreOnTotalScroll on/off



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

player.destroyPlaylist(); //Destroy current playlist

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




player.getCurrentMediaData();//get media data (video, title, thumb, descritpion etc...)

player.getPlaylistLength(); //get playlist length

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

player.getMediaPlaying(); //get media playing




/* show / hide lightbox */
--------------------------
player.openLightbox(); //open lightbox
player.closeLightbox(); //close lightbox





/* ad */
--------------------------
player.adSkip(); //skip ad







/* 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!



    

Use these options in settings:

Parameters:

Parameter Value description
useGa true / false Use Google Analytics
gaTrackingId Google Analytics tracking ID. Get tracking ID here

Following events will be displayed inside Google Analytics panel / REAL-TIME / Events section:


Video started 
Video paused
Video ended
video downloaded

AD started
AD ended

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

<div class="mvp-playlist-toggle mvp-contr-btn" data-tooltip="Playlist" data-tooltip-position="left">
    <svg viewBox="0 0 512 512"><path d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"></path></svg>
</div>
 

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

<div class="mvp-fullscreen-toggle mvp-contr-btn">
    <div class="mvp-btn mvp-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="mvp-btn mvp-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
Autoplay is disabled since recent browser changes and requires user interaction with the page before (like a click or keypress) to start playback: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes



Volume on mobile

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





Chrome browser on Mac OS

If using 360 video and images 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





Plugin does not work as expected

Send a message at http://codecanyon.net/user/Tean#contact with a link to your live page to illustrate the problem so we can have a look.