Modern Video Player

Javascript


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

How to install?

Include scripts and styles in HEAD section of the page:

CSS:

<link rel="stylesheet" type="text/css" href="css/perfect-scrollbar.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/mvp.css" />

Javascript:

<script src="js/new.js"></script>

Initialize the player with settings:


<script>

    document.addEventListener("DOMContentLoaded", function(event) { 
                    
        var settings = {
            sourcePath:"",
            instanceName:"player1",
            activePlaylist:".playlist-video",
            activeItem:0,
            volume:0.5,
            autoPlay:true,
            randomPlay:false,
            .... //other settings hidden for clarity
        };

        player = new mvp(document.getElementById('wrapper'), settings);

    });
</script>

View all player settings

Include player div in BODY section of the page:

<div id="wrapper"></div>

Plugin contains following folders and files
css folder:

    mvp.css - main plugin css file
    
    perfect-scrollbar.css - playlist scroll, optional, not required if playlist is not used in the player or playlist type is standard browser scroll (player can either use standard browser scroll or perfect-scrollbar).
data folder - contains player demo data, like example chapter files, json playlist example, vast demo files, subtitles etc..

    Only required is svg / left-arrow.svg file which is a small arrow used in player settings menu (for playback rate, subtitles etc..)
includes folder:
    aws - used for Amazon S3 private bucket setup. Not required if you just have video files linked directly from public bucket on Amazon S3.

    vimeo - used for getting vimeo data (playlists, albums, showcases etc). Not required for single vimeo videos used without api.

    folder_parser.php - used for reading folder of videos (loading playlist from folder).

js folder:
    cast.js - chromecast
    equalizer.js - audio visualizer for audio playback
    ima.js - ima loader
    new.js  - main plugin file (required)
    perfect-scrollbar.min.js - playlist scroll
    playlist_navigation.js - handles playlist scroll for perfect-scrollbar (is playlist scroll is used)
    rel_pagination.js - show related videos on video end option
    share_manager.js - social sharing
    three.min.js - play 360 videos
    vast.js - vast loader
    vimeoLoader.js - not required for single vimeo videos used without api.
    youtubeLoader.js - not requried for single youtube videos used without api.


media folder - contains all videos, thumbnails etc used in the demo previews.

All player options that can be set when initalizing plugin:

Parameters:

Parameter Value description
skin aviva / pollux / sirius player skin
playlistPosition vrb / vb / hb / outer / wall / no-playlist Playlist Position

vrb - playlist vertical right and bottom (auto switch side)
vb - playlist vertical bottom
hb - horizontal bottom
outer - Playlist grid below player (endless scroll)
wall - Grid wall with player opening as lightbox no-playlist - No (visible) playlist, just player
playlistStyle dot / drot / gdot / gdbt / gdrot Playlist style

Normal player (vrb / vb / hb):
dot - description over thumbnail
drot - description right of thumbnail


For grid (outer / wall):
gdot - grid description over thumbnail
gdrot - grid description right of thumbnail
gdbt - grid description below thumbnail
playlistScrollType browser / perfect-scrollbar Playlist Scroll Type

browser - default browser scroll
perfect-scrollbar - https://perfectscrollbar.com/
playerTransition alpha / slide Player animation style for opened windows (info, share, embed..)
playerShadow shadow-effect1 / shadow-effect2 / shadow-effect3 / shadow-effect4 / shadow-effect5 / shadow-effect6 shadow effect below the player
playerType normal / lightbox Use normal inline player or open player as lightbox. Default is normal.
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.
autoPlayAfterFirst true / false Auto play media after first media has been manually started.
selectorInit true / false When player is opened on page element click and you want to autoplay with sound, set this option to true.
activateWhenParentVisible DOM selector Activate the player when parent becomes visible. For example, use this if you have player in tabs which have css display none so player can correctly resize itself when parent becomes visible.
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.
crossorigin Media crossorigin attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin
disableRemotePlayback true / false Valid for HTML video. Set to true if you use casting to hide native chromecast button over the video. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/disableRemotePlayback
randomPlay true / false Randomize playlist playback
loopingOn true / false Loop on playlist end backwards to begining.
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.
playlistScrollType browser / perfect-scrollbar Choose which playlist scroll to use. You can choose between default browser scroll and PerfectScrollbar
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
togglePlaybackOnMultipleInstances true / false Pause one player if other is playing when multiple instances in same page.
hidePlaylistOnFullscreenEnter true / false Hide playlist on fullscreen enter.
openFsOnPlay true / false Auto enter fullscreen on video play.
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.
mobileSeekbarMinWidth number Skin aviva & sirius, on narrow screens width below which seekbar goes above controls to make room for other buttons. Leave empty for none.
mobileControlsTopMinWidth number Skin aviva & pollux, on narrow screens width on which top controls become horizontal. Leave empty for none.
lightboxMaxWidth number Max width of lightbox (height is auto calculated based on ratio). Default is 920.

gridType javascript / grid1 (css-grid) / grid2 (column-count) Layouts with playlistPosition "outer" and "wall" can have thumbnail grid auto calculated based on javascript breakpoints, can use plain CSS to style grid. See grids section.
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 (+/-)
rememeberCaptionState true / false Save last used subtitle. For example, if your last used subtitle was English, everytime the player runs in page and goes to a different video English subtitle would be used.
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 0 / 1 / all Remember playback position on new page load.

0 = no
1 = rememebr only last video time
all = remember times for all videos

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.
Note: Works with self hosted audio, video, image, Youtube or Vimeo chromeless players. It does not work with 360 images or videos!
swipeAction advance, rewind advance - advance to next / previous video (default)
rewind - skip forward / backward X seconds (X seconds set with seekTime )
swipeTolerance number minimum distance to trigger swipe (how much user has to drag to trigger swipe), default 100 px
limitDescriptionText number Limit number of lines in playlist item description text.
embedSrc Url on your website which holds the player you want to use as embed, for example: http://your-domain.com/some-folder/player-embed.html. Then you make this player-embed.html load videos. This url will be added to iframe: <iframe width="100%" height="100%" src="'+embedSrc+'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
playlistItemContent thumb,title,date,description,duration, playCount 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!

If you want date available for self hosted videos, you need to manaully add date with data-date="1/2/2022" attributte (MM/DD/YEAR).

If you want playCount shown, it requires setting it with data-play-count="12" attribute.
formatDateFromNow true / false If date is shown in playlist items with playlistItemContent, display date in format like "2 days ago", "5 months ago" etc..
locale en Language code for formatDateFromNow: https://en.wikipedia.org/wiki/IETF_language_tag#:~:text=An%20IETF%20BCP%2047%20language,the%20IANA%20Language%20Subtag%20Registry.
playCountText views Play count text after play count number.
showStreamVideoBitrateMenu true / false Create video bitrate menu for hls, dash streaming.
showStreamAudioBitrateMenu true / false Create audio bitrate menu for hls, dash streaming.
disableVideoSkip true / false Disable user to skip video in any way (disable seekbar, previous, next buttons, click playlist item).
disableSeekbar true / false Disable user to seek through video.
disableSeekingPastWatchedPoint true / false Disable seeking past watched time. This will prevent user from seeking into not yet watched part of the video.
seekTime number Seek time value for seek backward / seek forward commands
cors Cors url for loading subtitles across domain. Example https://cors-anywhere.herokuapp.com/
autoAdvanceToNextMediaOnError true / false Auto advance to next video on error. If current video fails, it will auto advance to next video.
showVideoTitle true / false Show video title in player top left. Same as showChapterTitle
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.
requireSubtitlesFromFolder true / false If true, player will assume you have subtitles directory 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.
adUpcomingMsgTime seconds, default 5 Time before mid-roll advert starts to show message "Ad starting in... seconds"
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. On IOS Audio visualizer is not available so you might to want to add poster for your songs so it can be shown instead.
closeSettingsMenuOnSelect true / false Close settings menu completely on select certain value (playback rate, subtitle...).
playbackRateArr array Playback rate array for playback rate menu. https://www.w3schools.com/tags/av_prop_playbackrate.asp
            playbackRateArr:[
                {value: 2, menu_title: '2x'},
                {value: 1.5, menu_title: '1.5x'},
                {value: 1.25, menu_title: '1.25x'},
                {value: 1, menu_title: '1x (Normal)'},
                {value: 0.5, menu_title: '0.5x'},
                {value: 0.25, menu_title: '0.25x'}
            ]
            
preservePlaybackRate true / false Preserve playback rate when changing to different video
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.
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.
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.
pauseVideoOnDialogOpen true / false Pause video when share, embed, video info dialogs are opened above the video.
rememberVideoQuality true / false If your videos have multiple qualities and you want to preserve video quality across different videos (valid for html5 hosted video, audio).
forceYtChromeless true / false Hide youtube elements above player (title, share, related videos etc..)




Translation settings:

Parameter Value Description
tooltipTumblr Share On Tumblr tooltip Share Tumblr
tooltipTwitter Share On Twitter tooltip Share Twitter
tooltipFacebook Share On Facebook tooltip Share Facebook
tooltipWhatsApp Share On WhatsApp tooltip Share WhatsApp
tooltipReddit Share On Reddit tooltip Share Reddit
tooltipDigg Share On Digg tooltip Share Digg
tooltipLinkedIn Share On LinkedIn tooltip Share LinkedIn
tooltipPinterest Share On Pinterest tooltip Share Pinterest
tooltipShare Share tooltip Share
tooltipRepeat Repeat tooltip Repeat
tooltipClose Close tooltip Close
embedVideoText Embed this video: embed Video Text
copyVideoLinkText Copy video link: copy Video Link Text
copyEmbedCodeBtnText Copy copy Embed Code Btn Text
copiedEmbedCodeBtnText Copied! copied Embed Code Btn Text
tooltipEmbed Embed tooltip Embed
ageVerifyHeader Age Verification age Verify Header Text
ageVerifyText By clicking enter, I certify that I am over the age of 21 and will comply with this statement. age Verify Text
ageVerifyEnterText ENTER age Verify Enter Text
ageVerifyDividerText or age Verify Divider Text
ageVerifyExitText EXIT age Verify Exit Text
ofText of tooltip seek video percent of total
tooltipSeek Seek tooltip seek video
tooltipInfo Info tooltip video description
tooltipQuality Quality settings menu video Quality text
tooltipPlaybackRate Speed settings menu Playback rate text
tooltipSubtitles Subtitles settings menu Subtitles text
tooltipPlay Play tooltip Play video
tooltipPause Pause tooltip Pause video
tooltipPrevious Previous tooltip Previous video
tooltipNext Next tooltip Next video
tooltipRewind Rewind tooltip Rewind to beginning
tooltipSkipBackward Skip backward tooltip Skip backward X seconds
tooltipSkipForward Skip forward tooltip Skip Forward X seconds
tooltipPip Picture in picture tooltip Picture in picture
tooltipCc Subtitles tooltip show / hide subtitles
tooltipAirPlay AirPlay tooltip AirPlay
tooltipVr Toggle VR mode tooltip virtual reality 360 mode
tooltipVolume Volume tooltip set Volume
tooltipMute Mute tooltip set Mute
tooltipDownload Download tooltip Download button
tooltipSettings Settings tooltip Settings menu
tooltipFullscreenEnter Fullscreen tooltip Fullscreen Enter
tooltipFullscreenExit Exit Fullscreen tooltip Fullscreen Exit
tooltipAudioLanguage Audio tooltip settings menu audio langauge selector
tooltipPlaylistToggle Playlist tooltip Playlist open / close
tooltipTheaterMode Theater mode tooltip Theater Mode
castConnectingMsg Connecting to Chromecast Connecting to Chromecast message
tooltipPlayOnTv Play on TV chromecast tooltip Playing On Tv
tooltipStopPlayingOnTv Stop playing on TV chromecast tooltip Stop Playing On Tv
tooltipLightboxPrevious Previous tooltip Lightbox Previous video
tooltipLightboxNext Next tooltip Lightbox Next video
chaptersMenuHeader Chapters chapters Menu Header text
searchChaptersText Search chapters search Chapters Text
tooltipPrevChapter Previous chapter tooltip Previous chapter
tooltipNextChapter Next chapter tooltip Next chapter
tooltipChaptersMenu Chapters tooltip Chapters Menu
subtitleOffText Disabled subtitle menu Off Text (no subtitle selected)
privateContentTitle This content is private private Content title
privateContentConfirm Submit private Content Confirm button text
privateContentInfo Enter password to view private Content info
privateContentPasswordError Please enter valid password! private Content Password Error
customContextCopyVideoUrlText Copy video url at current time Right click Context Menu Copy Video Url Text
loadMoreBtnText Load more load More Button Text
upNextText Up Next up Next Video Text
upNextPreviousText Previous Previous Video Text
adTitleText Advertisement ad title Text
adSkipWaitText You can skip ad in ad Skip Wait Text
adSkipReadyText SKIP AD > ad Skip Ready Text
adUpcomingMsgText Ad will start in.. ad Upcoming Text
searchText Search... search field placeholder text
searchNothingFoundMsg Nothing found search Nothing Found message
liveStreamText LIVE live Stream Text
upcomingLiveStreamText Scheduled for live Stream Scheduled for Text
annotationCloseTooltip Close annotation Close Tooltip
searchTranscriptText Search transcript search Transcript Text
tooltipTranscript Transcript tooltip Transcript
paginationPreviousBtnTitle Previous pagination Previous Button Title
paginationPreviousBtnText Prev pagination Previous Button Text
paginationNextBtnTitle Previous pagination Next Button Title
paginationNextBtnText Previous pagination Next Button Text
unmuteBtnText Enable volume unmute button Text
tooltipPlay Play tooltip Play
tooltipPause Pause tooltip Pause
tooltipFullscreenEnter Fullscreen tooltip Fullscreen Enter
tooltipFullscreenExit Exit Fullscreen tooltip Fullscreen Exit
tooltipShare Share tooltip Share
tooltipRepeat Repeat tooltip Repeat
resumeScreenHeader You are watching  resume Screen Header text
resumeScreenContinue Continue watching resume Screen Continue text
resumeScreenRestart Restart from beginning resume Screen Restart text
comingNextHeader Coming Next coming Next Header text
comingNextCancelBtnText CANCEL coming Next Cancel button Text




Internally loaded scripts

vimeo_js: "https://player.vimeo.com/api/player.js",

vimeoLoader_js: 'js/vimeoLoader.js',

youtube_js: "https://www.youtube.com/iframe_api",

youtubeLoader_js: 'js/youtubeLoader.js',

perfectScrollbar_js: 'js/perfect-scrollbar.min.js',

perfectScrollbar_css: "css/perfect-scrollbar.css",

hls_js: "https://cdn.jsdelivr.net/npm/hls.js@latest",

dash_js: "https://cdn.dashjs.org/latest/dash.all.min.js",

mediatags_js: "https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.0/jsmediatags.min.js",

adsbygoogle_js: "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",

gtag_js: "//www.googletagmanager.com/gtag/js?id=",

three_js: "js/three.min.js",//r127

orbitControls_js: "https://unpkg.com/three@0.85.0/examples/js/controls/OrbitControls.js",

md5_js: "https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.10.0/js/md5.min.js",

equalizer_js: "js/equalizer.js",

rel_js: "js/rel_pagination.js",

share_js: "js/share_manager.js",

playlist_navigation_js: "js/playlist_navigation.js",

vast_js: 'js/vast.js',

imaLoader_js: 'js/ima.js',

ima_js: '//imasdk.googleapis.com/js/sdkloader/ima3.js',

rangetouch_js: "js/rangetouch.js",

cast_js: 'js/cast.js',

cast_sender_js: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',

These are defualt icons for skin aviva. Note that skins pollux and sirius have some different icons, mainly in player controls.

Note that icons could also be images or font icons for example, but you need to add some CSS because current player CSS only handles SVG for icons.


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

    dotsIcon: "<svg viewBox='0 0 128 512'><path d='M56 472a56 56 0 1 1 0-112 56 56 0 1 1 0 112zm0-160a56 56 0 1 1 0-112 56 56 0 1 1 0 112zM0 96a56 56 0 1 1 112 0A56 56 0 1 1 0 96z'/></svg>",

    zoomCenterIcon: "<svg viewBox='0 0 512 512'><path d='M256 0c17.7 0 32 14.3 32 32V42.4c93.7 13.9 167.7 88 181.6 181.6H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H469.6c-13.9 93.7-88 167.7-181.6 181.6V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V469.6C130.3 455.7 56.3 381.7 42.4 288H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H42.4C56.3 130.3 130.3 56.3 224 42.4V32c0-17.7 14.3-32 32-32zM107.4 288c12.5 58.3 58.4 104.1 116.6 116.6V384c0-17.7 14.3-32 32-32s32 14.3 32 32v20.6c58.3-12.5 104.1-58.4 116.6-116.6H384c-17.7 0-32-14.3-32-32s14.3-32 32-32h20.6C392.1 165.7 346.3 119.9 288 107.4V128c0 17.7-14.3 32-32 32s-32-14.3-32-32V107.4C165.7 119.9 119.9 165.7 107.4 224H128c17.7 0 32 14.3 32 32s-14.3 32-32 32H107.4zM256 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/></svg>",

    zoomResetIcon: "<svg viewBox='0 0 320 512'><path d='M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z'/></svg>",

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

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

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

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

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

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

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

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

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

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

    upcomingLiveStreamIcon: "<svg viewBox='0 0 576 512'><path d='M108.2 71c13.8 11.1 16 31.2 5 45C82.4 154.4 64 203 64 256s18.4 101.6 49.1 140c11.1 13.8 8.8 33.9-5 45s-33.9 8.8-45-5C23.7 386.7 0 324.1 0 256S23.7 125.3 63.2 76c11.1-13.8 31.2-16 45-5zm359.7 0c13.8-11.1 33.9-8.8 45 5C552.3 125.3 576 187.9 576 256s-23.7 130.7-63.2 180c-11.1 13.8-31.2 16-45 5s-16-31.2-5-45c30.7-38.4 49.1-87 49.1-140s-18.4-101.6-49.1-140c-11.1-13.8-8.8-33.9 5-45zM232 256a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm-27.5-74.7c-17.8 19.8-28.5 46-28.5 74.7s10.8 54.8 28.5 74.7c11.8 13.2 10.7 33.4-2.5 45.2s-33.4 10.7-45.2-2.5C129 342.2 112 301.1 112 256s17-86.2 44.8-117.3c11.8-13.2 32-14.3 45.2-2.5s14.3 32 2.5 45.2zm214.7-42.7C447 169.8 464 210.9 464 256s-17 86.2-44.8 117.3c-11.8 13.2-32 14.3-45.2 2.5s-14.3-32-2.5-45.2c17.8-19.8 28.5-46 28.5-74.7s-10.8-54.8-28.5-74.7c-11.8-13.2-10.7-33.4 2.5-45.2s33.4-10.7 45.2 2.5z'/></svg>",

    relCloseIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 320 512'><path 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>",
    
    relPrevIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 192 512'><path d='M25.1 247.5l117.8-116c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L64.7 256l102.2 100.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.7 4.7-12.3 4.7-17 0L25 264.5c-4.6-4.7-4.6-12.3.1-17z'></path></svg>",

    relNextIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 192 512'><path d='M166.9 264.5l-117.8 116c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17L127.3 256 25.1 155.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0l117.8 116c4.6 4.7 4.6 12.3-.1 17z'></path></svg>",

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

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

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

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

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



    //playlist

    playlistSelectorLangToggleIcon: "<svg aria-hidden='true' role='img' viewBox='0 0 448 512'><path d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'></path></svg>",

    starIcon: "<svg viewBox='0 0 576 512'><path d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/></svg>",

    //controls

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

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

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

    fullscreenEnterIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 448 512'><path d='M448 344v112a23.94 23.94 0 0 1-24 24H312c-21.39 0-32.09-25.9-17-41l36.2-36.2L224 295.6 116.77 402.9 153 439c15.09 15.1 4.39 41-17 41H24a23.94 23.94 0 0 1-24-24V344c0-21.4 25.89-32.1 41-17l36.19 36.2L184.46 256 77.18 148.7 41 185c-15.1 15.1-41 4.4-41-17V56a23.94 23.94 0 0 1 24-24h112c21.39 0 32.09 25.9 17 41l-36.2 36.2L224 216.4l107.23-107.3L295 73c-15.09-15.1-4.39-41 17-41h112a23.94 23.94 0 0 1 24 24v112c0 21.4-25.89 32.1-41 17l-36.19-36.2L263.54 256l107.28 107.3L407 327.1c15.1-15.2 41-4.5 41 16.9z'></path></svg>",

    fullscreenExitIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512'><path d='M200 288H88c-21.4 0-32.1 25.8-17 41l32.9 31-99.2 99.3c-6.2 6.2-6.2 16.4 0 22.6l25.4 25.4c6.2 6.2 16.4 6.2 22.6 0L152 408l31.1 33c15.1 15.1 40.9 4.4 40.9-17V312c0-13.3-10.7-24-24-24zm112-64h112c21.4 0 32.1-25.9 17-41l-33-31 99.3-99.3c6.2-6.2 6.2-16.4 0-22.6L481.9 4.7c-6.2-6.2-16.4-6.2-22.6 0L360 104l-31.1-33C313.8 55.9 288 66.6 288 88v112c0 13.3 10.7 24 24 24zm96 136l33-31.1c15.1-15.1 4.4-40.9-17-40.9H312c-13.3 0-24 10.7-24 24v112c0 21.4 25.9 32.1 41 17l31-32.9 99.3 99.3c6.2 6.2 16.4 6.2 22.6 0l25.4-25.4c6.2-6.2 6.2-16.4 0-22.6L408 360zM183 71.1L152 104 52.7 4.7c-6.2-6.2-16.4-6.2-22.6 0L4.7 30.1c-6.2 6.2-6.2 16.4 0 22.6L104 152l-33 31.1C55.9 198.2 66.6 224 88 224h112c13.3 0 24-10.7 24-24V88c0-21.3-25.9-32-41-16.9z'></path></svg>",

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

    videoInfoIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512'><path d='M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z'></path></svg>",

    shareToggleIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 448 512'><path d='M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zM304 296c-14.562 0-27.823 5.561-37.783 14.671l-67.958-40.775a56.339 56.339 0 0 0 0-27.793l67.958-40.775C276.177 210.439 289.438 216 304 216c30.928 0 56-25.072 56-56s-25.072-56-56-56-56 25.072-56 56c0 4.797.605 9.453 1.74 13.897l-67.958 40.775C171.823 205.561 158.562 200 144 200c-30.928 0-56 25.072-56 56s25.072 56 56 56c14.562 0 27.823-5.561 37.783-14.671l67.958 40.775a56.088 56.088 0 0 0-1.74 13.897c0 30.928 25.072 56 56 56s56-25.072 56-56C360 321.072 334.928 296 304 296z'></path></svg>",

    embedToggleIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512'><path d='M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z'></path></svg>",

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

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

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

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

    playIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 373.008 373.008'><path d='M61.792,2.588C64.771,0.864,68.105,0,71.444,0c3.33,0,6.663,0.864,9.655,2.588l230.116,167.2 c5.963,3.445,9.656,9.823,9.656,16.719c0,6.895-3.683,13.272-9.656,16.713L81.099,370.427c-5.972,3.441-13.334,3.441-19.302,0 c-5.973-3.453-9.66-9.833-9.66-16.724V19.305C52.137,12.413,55.818,6.036,61.792,2.588z'/></svg>",

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

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

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

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

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

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

    transcriptIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 384 512'><path d='M224 0H0V512H384V160H224V0zm32 0V128H384L256 0zM112 256H272h16v32H272 112 96V256h16zm0 64H272h16v32H272 112 96V320h16zm0 64H272h16v32H272 112 96V384h16z'/></svg>",

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

    prevChapterIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 448 512'><path d='M34.5 239L228.9 44.7c9.4-9.4 24.6-9.4 33.9 0l22.7 22.7c9.4 9.4 9.4 24.5 0 33.9L131.5 256l154 154.7c9.3 9.4 9.3 24.5 0 33.9l-22.7 22.7c-9.4 9.4-24.6 9.4-33.9 0L34.5 273c-9.3-9.4-9.3-24.6 0-34zm192 34l194.3 194.3c9.4 9.4 24.6 9.4 33.9 0l22.7-22.7c9.4-9.4 9.4-24.5 0-33.9L323.5 256l154-154.7c9.3-9.4 9.3-24.5 0-33.9l-22.7-22.7c-9.4-9.4-24.6-9.4-33.9 0L226.5 239c-9.3 9.4-9.3 24.6 0 34z'></path></svg>",

    nextChapterIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512' ><path d='M477.5 273L283.1 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.7-22.7c-9.4-9.4-9.4-24.5 0-33.9l154-154.7-154-154.7c-9.3-9.4-9.3-24.5 0-33.9l22.7-22.7c9.4-9.4 24.6-9.4 33.9 0L477.5 239c9.3 9.4 9.3 24.6 0 34zm-192-34L91.1 44.7c-9.4-9.4-24.6-9.4-33.9 0L34.5 67.4c-9.4 9.4-9.4 24.5 0 33.9l154 154.7-154 154.7c-9.3 9.4-9.3 24.5 0 33.9l22.7 22.7c9.4 9.4 24.6 9.4 33.9 0L285.5 273c9.3-9.4 9.3-24.6 0-34z'></path></svg>",

    chapterToggleIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 512 512'><path d='M464 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zM128 120c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zm0 96c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zm0 96c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zm288-136v-32c0-6.627-5.373-12-12-12H204c-6.627 0-12 5.373-12 12v32c0 6.627 5.373 12 12 12h200c6.627 0 12-5.373 12-12zm0 96v-32c0-6.627-5.373-12-12-12H204c-6.627 0-12 5.373-12 12v32c0 6.627 5.373 12 12 12h200c6.627 0 12-5.373 12-12zm0 96v-32c0-6.627-5.373-12-12-12H204c-6.627 0-12 5.373-12 12v32c0 6.627 5.373 12 12 12h200c6.627 0 12-5.373 12-12z'></path></svg>",

    chapterShareIcon: "<svg viewBox='0 0 512 512'><path d='M152 184h271.5l-127.2-109.8c-10.03-8.656-11.12-23.81-2.469-33.84c8.688-10.06 23.85-11.21 33.85-2.487l176 151.1C508.1 194.4 512 201 512 208c0 6.968-3.029 13.58-8.31 18.14l-176 151.1c-4.531 3.937-10.13 5.847-15.69 5.847c-6.719 0-13.41-2.812-18.16-8.312c-8.656-10.03-7.562-25.19 2.469-33.84l127.2-109.8H152c-57.34 0-104 46.65-104 103.1v119.1C48 469.3 37.25 480 24 480S0 469.3 0 456v-119.1C0 252.2 68.19 184 152 184z'/></svg>",

    chapterRepeatIcon: "<svg viewBox='0 0 512 512'><path d='M176 128h143.1l-.0065 56c0 9.703 5.846 18.45 14.82 22.17s19.28 1.656 26.16-5.203l80.01-80c9.373-9.371 9.373-24.57 0-33.94l-80.01-80c-6.877-6.859-17.19-8.922-26.16-5.203S319.1 14.3 319.1 24V80H176C78.95 80 0 158.1 0 256c0 13.25 10.75 24 24 24S48 269.3 48 256C48 185.4 105.4 128 176 128zM488 232c-13.25 0-24 10.75-24 24c0 70.59-57.42 128-128 128H192l.0114-56c0-9.703-5.846-18.45-14.82-22.17S157.9 304.2 151 311l-80.01 80c-9.373 9.371-9.373 24.57 0 33.94l80.01 80c6.877 6.859 17.19 8.922 26.16 5.203S192 497.7 192 488L192 432H336c97.05 0 176-78.97 176-176C512 242.8 501.3 232 488 232z'/></svg>",

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

    castOffIcon: "<svg height='17' viewBox='0 0 512 512'><path d='M447.8,64H64c-23.6,0-42.7,19.1-42.7,42.7v63.9H64v-63.9h383.8v298.6H298.6V448H448c23.6,0,42.7-19.1,42.7-42.7V106.7 C490.7,83.1,471.4,64,447.8,64z M21.3,383.6L21.3,383.6l0,63.9h63.9C85.2,412.2,56.6,383.6,21.3,383.6L21.3,383.6z M21.3,298.6V341 c58.9,0,106.6,48.1,106.6,107h42.7C170.7,365.6,103.7,298.7,21.3,298.6z M213.4,448h42.7c-0.5-129.5-105.3-234.3-234.8-234.6l0,42.4 C127.3,255.6,213.3,342,213.4,448z'></path></svg>",

    castOnIcon: "<svg viewBox='0 0 48 48'><path d='M0 0h48v48h-48z' fill='none' opacity='.1'/><path d='M0 0h48v48h-48z' fill='none'/><path d='M2 36v6h6c0-3.31-2.69-6-6-6zm0-8v4c5.52 0 10 4.48 10 10h4c0-7.73-6.27-14-14-14zm36-14h-28v3.27c7.92 2.56 14.17 8.81 16.73 16.73h11.27v-20zm-36 6v4c9.94 0 18 8.06 18 18h4c0-12.15-9.85-22-22-22zm40-14h-36c-2.21 0-4 1.79-4 4v6h4v-6h36v28h-14v4h14c2.21 0 4-1.79 4-4v-28c0-2.21-1.79-4-4-4z'/></svg>",

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

    bigPlayIcon: "<svg aria-hidden='true' focusable='false' role='img' viewBox='0 0 373.008 373.008' role='img' aria-label='Play'><path d='M61.792,2.588C64.771,0.864,68.105,0,71.444,0c3.33,0,6.663,0.864,9.655,2.588l230.116,167.2 c5.963,3.445,9.656,9.823,9.656,16.719c0,6.895-3.683,13.272-9.656,16.713L81.099,370.427c-5.972,3.441-13.334,3.441-19.302,0 c-5.973-3.453-9.66-9.833-9.66-16.724V19.305C52.137,12.413,55.818,6.036,61.792,2.588z'/></svg>",

This section explains how to load a playlist on start. Videos can be added to player using HTML markup or object notation.

Adding videos using HTML markup

HTML5 video example, you need to have this in page BODY:

<div id="mvp-playlist-list">
     <div class="playlist-video1">
         <div class="mvp-playlist-item" data-type="video" data-path="VIDEO_URL1" data-title="This is first video"></div>
         <div class="mvp-playlist-item" data-type="video" data-path="VIDEO_URL2" data-title="This is second video"></div>
     </div>
 </div>

To load this playlist on start use following settings:

playlistList: "#mvp-playlist-list",
activePlaylist:".playlist-video1",



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

<div id="mvp-playlist-list">
     <div class="playlist-youtube1">
         <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 following settings:

playlistList: "#mvp-playlist-list",
activePlaylist:".playlist-youtube1",

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




Adding videos using object notation

HTML5 video example, use following settings:

media:[
    {
        type:'video',
        path:'VIDEO_URL1',
        title:'This is first video',
        thumb:'video-thumb-url',
    },
    {
        type:'video',
        path:'VIDEO_URL2',
        title:'This is second video',
        thumb:'video-thumb-url',
        poster:'optional-poster-here'
    },
]



Youtube playlist example, use following settings:

media:[
    {
        type:'youtube_playlist',
        path:'PLFgquLnL59alCl_2TQvOiD5Vgm1hCaGSI',
        limit:50,//how many items to show at start
    },
]

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

Adding videos to player

This section shows how to create videos. Videos can be added using HTML markup or object notation.

Example (HTML markup):

<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
data-is360 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. Deprecated
data-link Url link to open when you click on video area. (Not valid for 360 videos and images)
data-target Url link target (_blank, _parent..)
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

data-path can also be used like this (simple):

<div class="mvp-playlist-item" data-type="video" data-path="media/video/01.mp4" 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>


Example (object notation):

{
    type:'video',
    path:[
        {   
            quality: 'HD',
            mp4: 'media/video/01_hd.mp4',
           
        },
        {   
            quality: 'SD',
            mp4: 'media/video/01.mp4',
            
        },
        {   
            quality: '720p',
            mp4: 'media/video/01.mp4',
        }
    ],
    quality:'720p',//default quality desktop
    qualityMobile:'SD', //default quality mobile
    
    previewSeek: 'auto',//show video preview when seeking video

    thumb:'media/video/thumb/01.jpg',//thumbnail for playlist

    poster:'media/video/poster/01.jpg',//video poster
    posterFrameTime:5,//poster alternative (show video at time seconds on start)

    download:'media/video/01.mp4',//download url

    title:'Self hosted video here',

    description:'Duis egestas, quam faucibus interdum <a href="http://codecanyon.net/user/Tean" target="_blank">this is a link</a>, enim sem tincidunt tellus, sed condimentum tellus. Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante.',

    date:'3/23/2020', show date in playlist items (MM/DD/YEAR)
    
    playCount:43254,//show play count in playlist items

    duration:74,//show duration in playlist items (seconds)

    hoverPreview:"data/hover/01.gif",//show video preview in playlist items (gif or video)

    subtitles:[
        {   
            label: 'English',
            src: 'data/subtitles/sintel-en.vtt',
            default:true//only if rememeberCaptionState is false
        },
        {
            label: 'German',
            src: 'data/subtitles/sintel-de.vtt'
        },
        {
            label: 'Spanish',
            src: 'data/subtitles/sintel-es.vtt'
        }
    ],

    chapters:"data/chapters/01.vtt",//show chapters

    start:10,//start at seconds

    end:35,//end at seconds

    playbackRate:2,//playback rate

    link:'https://google.com',//go to url on video pause 
    target:'_blank',

    endLink:'https://google.com',//go to url on video end 
    endTarget:'_self',

    pwd:'202cb962ac59075b964b07152d234b70',//enter password to view video, password = 123

    //vast url
    vast:'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=',

}

path can also be used like this (simple):

{
    type:'video',
    path:'media/video/01_hd.mp4'
}

This is also a minimum required for video to be added. Other parameters are optional.



Preserve video quality across different videos?

If your videos have multiple qualities and you want to preserve video quality across different videos, use following settings:

rememberVideoQuality:true

Player supports playing virtual reality video and image panorama.

Example mp4 video (HTML markup):

<div class="mvp-playlist-item" data-type="video" data-is360="1" data-path='[{"quality": "default", "mp4": "media/360_video/03.mp4"}]' data-poster="media/360_video/03.jpg" data-title="360 video title goes here"></div>   

Example hls video:

<div class="mvp-playlist-item" data-type="hls" data-is360="1" data-path="https://bitmovin.com/player-content/playhouse-vr/m3u8s/105560.m3u8" data-thumb="THUMB_URL" data-title="HLS Video title goes here" ></div>

Note: IOS currently does not support HLS (m3u8) format so you need a backup mp4 video url if you want it to be played on IOS.
https://github.com/video-dev/hls.js#compatibility

VR video can be monoscopic (single screen) which is default or it can be stereoscopic (double screen). If you video is stereoscopic, add data-vr-mode="stereoscopic" attribute:

<div class="mvp-playlist-item" data-type="video" data-is360="1" data-vr-mode="stereoscopic" data-path='[{"quality": "default", "mp4": "media/360_video/03.mp4"}]' data-poster="media/360_video/03.jpg" data-title="360 video title goes here"></div>   

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

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


Example (object notation):

{
    type:'video',
    path:'media/360_video/03.mp4',
    poster:'media/360_video/03.jpg',
    thumb:'media/360_video/thumb/03.jpg',
    title:'Self hosted 360 video monoscopic',
    is360:true,
    vrMode: 'monoscopic'//monoscopic, stereoscopic
},




Example virtual reality 360 image:

<div class="mvp-playlist-item" data-type="image" data-is360="1" 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 for 360 video and images:

Parameter Required Value
data-type yes video / image
data-is360 is 360 video / image panorama. Choose this if content is 360 virtual reality video or image panorama.
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-link Url link to open when you click on video area. (Not valid for 360 videos and images)
data-target Url link target (_blank, _parent..)
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



Available settings for panorama images:

Parameters:

Parameter Value Description
autoRotatePanorama 1 = true / 0 = false Auto rotate panorama images (like rotating camera)
autoRotateSpeed number Speed of auto rotation (default 0.5). Positive number rotates in the left direction. If you want to rotate in the right direction enter negative number (-0.5)


Example (object notation):

{
    type:'image',
    path:'media/360_image/01.jpg',
    is360:true,
    thumb:'media/360_image/thumb/01.jpg',
    title:'This is image 360 panorama'
},

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>

Note: IOS currently does not support hls (m3u8) format so you need a backup mp4 video url if you want it to be playback on ios.
https://github.com/video-dev/hls.js#compatibility


Example (object notation):

{
    type:'hls',
    path: 'https://bitmovin-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
    title:'Addaptive streaming HLS',
    description:'Support for Apple HLS M3U8 and MPEG DASH live streaming, adaptive bitrate with subtitles and multilanguage audio support.',

},

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>


Example (object notation):

{
    type:'dash',
    path: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
    title:'Addaptive streaming DASH',
    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.'

},

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-link Url link to open when you click on video area. (Not valid for 360 videos and images)
data-target Url link target (_blank, _parent..)
data-end-link Url link to open on media end (when media finishes).
data-end-target Url link target (_blank, _parent..)





Additional settings
Hls

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

hlsConfig:{...}

For example:

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

Dash

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

dashConfig:{...}

For example:

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





Stream offline?

Check Offline image section if you want to display image when your stream is offline.

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-link Url link to open when you click on video area. (Not valid for 360 videos and images)
data-target Url link target (_blank, _parent..)
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 (object notation):

{
    type:'audio',
    path:'media/audio/02.mp3',
    poster:'media/audio/poster/01.jpg',
    //slideshowImages:['media/audio/slideshow/01.jpg','media/audio/slideshow/02.jpg','media/audio/slideshow/03.jpg','media/audio/slideshow/04.jpg','media/audio/slideshow/05.jpg'],//alternative to poster
    thumb:'media/audio/thumb/02.jpg',
    title:'Audio title goes here',
    
},



Visual content while audio plays?

While audio plays there are several options to show in the player area:

1. Show image poster (using data-poster)

<div class="mvp-playlist-item" data-type="audio" data-path='[{"quality": "128kbps", "mp3": "media/audio/02.mp3"}]' data-quality="320kbps" data-poster="media/audio/poster/01.jpg"></div>

2. Play image slideshow, example:

<div class="mvp-playlist-item" data-type="audio" data-path='[{"quality": "128kbps", "mp3": "media/audio/02.mp3"}]' data-quality="320kbps" data-slideshow-images="media/audio/slideshow/01.jpg,media/audio/slideshow/02.jpg,media/audio/slideshow/03.jpg,media/audio/slideshow/04.jpg,media/audio/slideshow/05.jpg"></div>

Parameters:

Parameter Required Value
data-slideshow-images yes url to images to play in slideshow separated by comma

Available settings:

Parameters:

Parameter Value Description
slideshowDuration seconds duration in seconds between new image appear
slideshowRandom 1 = true / 0 = false Wheater to randomize slideshow images
slideshowPauseWithAudio 1 = true / 0 = false Wheater to pause slideshow while audio is paused


3. Use audio visualizer

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 (object notation):

{
    type:'image',
    path:'media/image/01.jpg',
    thumb:'media/image/thumb/01.jpg',
    title:'This is image'
},

Example virtual reality 360 image:

<div class="mvp-playlist-item" data-type="image" data-is360="1" 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
data-is360 for 360 images. Choose this if content is 360 virtual reality video or image panorama.
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-link Url link to open when you click on video area. (Not valid for 360 videos and images)
data-target Url link target (_blank, _parent..)
data-end-link Url link to open on media end (when media finishes).
data-end-target Url link target (_blank, _parent..)


Example (object notation):

{
    type:'image',
    path:'media/360_image/01.jpg',
    is360:true,
    thumb:'media/360_image/thumb/01.jpg',
    title:'This is image 360 panorama'
},





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: Get youtube api key

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>


Example (object notation):

{
    type:'youtube_single',
    path:'pSOoXLRBDuk',
}



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>


Example (object notation):

{
    type:'youtube_single',
    path:'pSOoXLRBDuk',
    title:'Giorgio Armanis boudoir fashion commercial 10',
    description:'Russo supe Sasha Pivovarova è universalmente celebrata per il suo look unico, quello di uno straniero in possesso proveniente da un pianeta ghiacciato e possibilmente incrociato con un husky. Così Mert Alas e Marcus Piggott la decisione di lanciare il suo, insieme a maschio supe Diego Fragoso, nel loro futuristico, fashion film ultraterrena per la raccolta di caduta di Giorgio Armani, Boudoir, è stato un gioco da ragazzi. Nel suo elemento ghiaccio, non ha mai guardato meglio.',
    thumb:'https://i.ytimg.com/vi/pSOoXLRBDuk/mqdefault.jpg',
    poster:'https://i.ytimg.com/vi/pSOoXLRBDuk/maxresdefault.jpg',
    noApi:true
}


Youtube live stream video:

<div class="mvp-playlist-item" data-type="youtube_single" data-path="Lic2fD18wnw" data-noapi title="Youtube video example live stream"></div>

Example (object notation):

{
    type:'youtube_single',
    path:'Lic2fD18wnw',
    title:'Youtube video example live stream',
    description:'some video description here',
    noApi:true,
}

Additional settings:

liveStreamLocale: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', hourCycle: 'h12'} - default formatting of video scheduled time (for upcoming videos)



One or more Youtube single videos without api but getting video details (include global playlist data option data-get-embed-details):

 <div class="playlist-youtube-1">

    <div class="mvp-global-playlist-data" data-get-embed-details="1"></div>

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

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


Example (object notation):

{
    type:'youtube_single_list',
    path:'jXSxzMTrKq0,5zYArkwq2PQ,M4z90wlwYs8',
}



Youtube playlist:

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


Example (object notation):

{
    type:'youtube_playlist',
    path:'PLj8xiTIFL1M0VkXq7GGEK5FHNQfKACcWj',
    limit:50,//how many to show at start
    //excludeId:'ZH7V2tU3iFc,GE2W93FBdo8',//video ids to exclude
    //hl:'en',//language code (use localized title and description)
}



Youtube channel:

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


Example (object notation):

{
    type:'youtube_channel',
    path:'UC8k_GMy6W-EG14A6jawiTnQ',
    limit:50,
}

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 50)
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. Choose this if content is 360 virtual reality video or image panorama.
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).
data-exclude exclude certain videos from showing in the feed (valid for channel, playlist.. not single video ids). Enter one or more video ids separated by comma, example: data-exclude="Bu0UhBrzd8k,LyXsRz2SeCI"
data-hl language code Use Localized title and description in your own language
data-cc-lang-pref subtitle language If your videos have multiple subtitles languages, you can force to show chosen language this attribute.




Hide Youtube shorts

To hide Youtube shorts videos from showing add following in settings:

 hideShortsFromShowing:60

Hide youtube short videos in seconds. All videos below this value will be hidden.




Localized title and description

If your videos have localized title and description, you can show them in your chosen language using data-hl:

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

Use language code (BCP-47) for data-hl value:

https://en.wikipedia.org/wiki/IETF_language_tag#:~:text=An%20IETF%20BCP%2047%20language,the%20IANA%20Language%20Subtag%20Registry.


How to translate title and description for your Youtube videos:

https://support.google.com/youtube/answer/6289575


Show default subtitle language on start

If your videos have multiple subtitles languages, you can force to show chosen language using cc_lang_pref parameter.

Example, use French subtitles:

Youtube playlist:

<div class="mvp-playlist-item" data-type="youtube_playlist" data-path="PLpjK416fmKwQocODJPc1D7PQSoy25VluA" data-cc-lang-pref="fr" ></div>

Example (object notation):

{
    type:'youtube_playlist',
    path:'PLpjK416fmKwQocODJPc1D7PQSoy25VluA',
    cc_lang_pref: "fr"
}

Use language code for cc_lang_pref value:

https://www.loc.gov/standards/iso639-2/php/code_list.php

Note that the list above is not correct in all cases, for example using Chinese requires following codes:

zh-Hans (Chinese Simplified)
zh-Hant (Chinese Traditional)

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>


Example (object notation):

{
    type:'vimeo_single',
    path:'22669590',
}



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>


Example (object notation):

{
    type:'vimeo_single',
    path:'22669590',
    title:'This is Vimeo video',
    description:'OTBMIAMI Presents High Fashion with We The Fresh clothing. Interesting video.',
    thumb:'https://i.vimeocdn.com/video/461423991_295x166.jpg',
    poster:'https://i.vimeocdn.com/video/461423991_1280x720.jpg',
    noApi:true
}

One or more Vimeo single videos without api but getting video details (include global playlist data option data-get-embed-details):

 <div class="playlist-vimeo-1">

    <div class="mvp-global-playlist-data" data-get-embed-details="1"></div>

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

</div>



Vimeo single unlisted video:

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

Vimeo single private video:

<div class="mvp-playlist-item" data-type="vimeo_single" data-path="571485098" data-vpwd="PASSWORD"></div>

data-vpwd = based64 encode your password on the link https://www.base64encode.org/


Example (object notation):

{
    type:'vimeo_single',
    path:'571485098',
    title:'Vimeo single private video',
    vpwd:'PASSWORD'
}



Multiple Vimeo single videos: (add multiple single videos spearated by comma)

<div class="mvp-playlist-item" data-type="vimeo_single_list" data-path="22669590,34267586,6829621"></div>


Example (object notation):

{
    type:'vimeo_single_list',
    path:'22669590,34267586,6829621',
}



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

Example (object notation):

{
    type:'vimeo_group',
    path:'artinfx',
    sort:'date',
    sortDirection:"asc",
    limit:50,//number of videos to show at start
}





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

Example (object notation):

{
    type:'vimeo_channel',
    path:'mtb',
    sort:'added',
    sortDirection:"desc",
    limit:50,
}





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

Example (object notation):

{
    type:'vimeo_user_album',
    path:'4439714',
    user_id:"filmevondraussen",
    sort:'added',
    sortDirection:"desc",
    limit:50,
}





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>


Example (object notation):

{
    type:'vimeo_user_videos',
    user_id:"gopro",
}





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

Example (object notation):

{
    type:'vimeo_ondemand',
    path:'loyisogola',
    sort:'date',
    sortDirection:"asc",
    limit:50,

}





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

Example (object notation):

{
    type:'vimeo_folder',
    path:'1444068',
    user_id:'user5482434',
    sort:'date',
    sortDirection:"asc",
    limit:50,
}





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 50)
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 Choose this if content is 360 virtual reality video or image panorama.
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)
data-exclude exclude certain videos from showing in the feed (valid for channel, playlist.. not single video ids). Enter one or more video ids separated by comma, example: data-exclude="225974870,230396573"

Reading video files from folders

Example:

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


Example (object notation):

{
    type:'folder_video',
    path:'../media/video/',
    sort:'filename-asc'
}

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-is360 Choose this if you want to load whole folder of 360 videos, which means all videos in a folder are 360!
data-limit number of results to retrieve (default 50)
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 needs to look like this:

video folder
    -- video1.mp4
    -- video2.mp4
    -- video3.mp4

    poster folder (optional)
        -- video1.jpg
        -- video2.jpg
        -- video3.jpg

    thumb folder (optional)
        -- video1.jpg
        -- video2.jpg
        -- video3.jpg

    subtitles folder (optional)     
        video1 folder //folder named the same as the video to which subtitles belong to!
            -- English.vtt //subtitle file
            -- German.vtt

        video2 folder
            -- English.vtt
            -- German.vtt

        video3 folder
            -- English.vtt
            -- German.vtt    

We have main folder (called "video" in our example, this can be called anyhow). Inside "video" folder are videos, poster, thumb, subtitles folder. "poster", "thumb", "subtitles" folders are optional. Inside "poster" directory poster files are located, inside "thumb" directory thumbnails for the playlist are located. Inside "subtitles" folder, we have subtitles for each video.

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


Subtitles

Each of subtitles directory can contain any number of subtitles in vtt or srt format. Subtitle name (without extension is what will be seen in subtitle menu in the player (thats why we used English.vtt, German.vtt etc...)



If you want to use any of these aditional features except videos (poster, thumbnails, subtitles), use following options in player. This way player will assume you have set your directory configuration as described above.

requirePosterFromFolder:true,
requireThumbnailsFromFolder:true,
requireSubtitlesFromFolder:true,

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>


Example (object notation):

{
    type:'folder_audio',
    path:'../media/audio/',
    sort:'filename-asc',
    id3:true
}

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 50)
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 needs to look like this:

audio folder
    -- audio1.mp4
    -- audio2.mp4
    -- audio3.mp4

    poster folder (optional)
        -- audio1.jpg
        -- audio2.jpg
        -- audio3.jpg

    thumb folder (optional)
        -- audio1.jpg
        -- audio2.jpg
        -- audio3.jpg   

    subtitles folder (optional)     
        audio1 folder //folder named the same as the audio to which subtitles belong to!
            -- English.vtt //subtitle file
            -- German.vtt

        audio2 folder
            -- English.vtt
            -- German.vtt

        audio3 folder
            -- English.vtt
            -- German.vtt        

We have main folder (called "audio" in our example, this can be called anyhow). Inside "audio" folder are audio files, poster, thumb, subtitles folder. "poster", "thumb", "subtitles" folders are optional. Inside "poster" directory poster files are located, inside "thumb" directory thumbnails for the playlist are located. Inside "subtitles" folder, we have subtitles for each audio.

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

If you want to use any of these aditional features (poster, thumbnails, subtitles), use following options in player. This way player will assume you have set your directory configuration as described above.

requirePosterFromFolder:true,
requireThumbnailsFromFolder:true,
requireSubtitlesFromFolder:true,

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>


Example (object notation):

{
    type:'folder_image',
    path:'../media/image/',
    sort:'filename-asc',
    duration:5
}

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 50)
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 needs to look like this:

image folder
    -- image1.jpg
    -- image2.jpg
    -- image3.jpg

    thumb folder (optional)
        -- audio1.jpg
        -- audio2.jpg
        -- audio3.jpg   

Rules:

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


Google Drive requires API key, go to: https://console.developers.google.com and create New project.

After creating project, go to Enable APIs and Services

Search for Google Drive API and Enable Google Drive API

Go to Credentials, Create credentials, create API key

Add key in Player settings (gDriveAppId)

var settings = {
    gDriveAppId: YOUR_API_KEY
}





Loading videos from Google Drive

You can load folder of files from Google Drive or single files.

How to load folder of videos from Google Drive?

<div class="mvp-playlist-item" data-type="gdrive_folder" data-path="GOOGLE DRIVE FOLDER ID"></div>


Example (object notation):

{
    type:'gdrive_folder',
    path:'1362Yx-DHvPOKgndzBtwtKCqoe0gY3YBF',
    sort:'filename-asc',
}

Parameters:

Parameter Required Value
data-type yes gdrive_folder
data-path yes google drive folder ID (example: 1362Yx-DHvPOKgndzBtwtKCqoe0gY3YBF )
data-is360 Choose this if you want to load whole folder of 360 videos, which means all videos in a folder are 360!
data-download custom download path
data-link playlist item url link
data-target blank/parent, http://www.w3schools.com/tags/att_a_target.asp
data-start media start time in seconds
data-end media end time in seconds
data-sort sort method:
filename-asc - file name ascending
filename-desc - file name descending



Required folder organization

Place videos in your Google drive folder. You can also place poster images for each video (optional).

So you end up with this structure in your folder:

    video1.mp4
    video1.jpg//optional poster image
    video2.mp4
    video2.jpg//optional poster image
    ...

This is an example of google drive folder: https://drive.google.com/drive/folders/1362Yx-DHvPOKgndzBtwtKCqoe0gY3YBF

Make sure you enable access to folder on Google Drive:






How to load single video from Google Drive?

If you want to use single files from Google Drive, use the following method:

Go to Disc – My drive:

https://drive.google.com/drive/my-drive
right click on audio, Get shareable link and you get something like this:

https://drive.google.com/open?id=0ByzcNpNrQNpWZUlJVjZQVHoxWnM

use that audio ID to create google drive video URL:

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

This is final URL how google drive audio URL should look:

https://www.googleapis.com/drive/v3/files/0ByzcNpNrQNpWZUlJVjZQVHoxWnM?alt=media – use this link in player as type video and data-path url:

 <div class="mvp-playlist-item" data-type="audio" data-path="https://www.googleapis.com/drive/v3/files/0ByzcNpNrQNpWZUlJVjZQVHoxWnM?alt=media"></div>

You can append you Google Drive api key as well if you are trying to play large files:

https://www.googleapis.com/drive/v3/files/0ByzcNpNrQNpWZUlJVjZQVHoxWnM?alt=media&key=YOUR_API_KEY

You can load folder of files from One Drive or single files.

How to load folder of videos from One Drive?

<div class="mvp-playlist-item" data-type="onedrive_folder" data-path="ONE DRIVE SHARE URL" data-sort="filename-asc"></div>


Example (object notation):

{
    type:'onedrive_folder',
    path:'https://1drv.ms/u/s!Av88sx97IzeiaR3CCQxJcw7WvqI',
    sort:'filename-desc',
}

Parameters:

Parameter Required Value
data-type yes onedrive_folder
data-path yes One Drive share url, right click on the folder, choose copy link (example: https://1drv.ms/u/s!Av88sx97IzeiaR3CCQxJcw7WvqI ). If share url has some additional in the url '?xxxx' you can remove this.
data-is360 Choose this if you want to load whole folder of 360 videos, which means all videos in a folder are 360!
data-download custom download path
data-link playlist item url link
data-target blank/parent, http://www.w3schools.com/tags/att_a_target.asp
data-start media start time in seconds
data-end media end time 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
created-date-asc - created date ascending
created-date-desc - created date descending



Required folder organization

Place videos in your One Drive folder. You can also place poster images for each video (optional).

So you end up with this structure in your folder:

    video1.mp4
    video1.jpg//optional poster image
    video2.mp4
    video2.jpg//optional poster image
    ...

This is an example of One Drive folder: https://1drv.ms/u/s!Av88sx97Izeibn9rbYCJknd4Mek






How to load single video from One Drive?

If you want to use single files from One Drive, use the following method:

Right click on the file - Embed and copy link, you will get something like this:

<iframe src="https://onedrive.live.com/embed?cid=A237237B1FB33CFF&resid=A237237B1FB33CFF%21108&authkey=AB0A6YtJz9Bn7BA" width="320" height="133" frameborder="0" scrolling="no" allowfullscreen></iframe>

Use just the src part:

https://onedrive.live.com/embed?cid=A237237B1FB33CFF&resid=A237237B1FB33CFF%21108&authkey=AB0A6YtJz9Bn7BA

and replace 'embed' with 'download'

so you end up with:

https://onedrive.live.com/download?cid=A237237B1FB33CFF&resid=A237237B1FB33CFF%21108&authkey=AB0A6YtJz9Bn7BA

use this link in player as type video and data-path url:

<div class="mvp-playlist-item" data-type="video" data-path="https://onedrive.live.com/download?cid=A237237B1FB33CFF&resid=A237237B1FB33CFF%21108&authkey=AB0A6YtJz9Bn7BA"></div>

Example:

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


Example (object notation):

{
    type:'xml',
    path:'data/xml/1.xml',
}

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>


Example (object notation):

{
    type:'json',
    path:'data/json/1.txt',
}

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 or percentage for exmaple (30%)
	    },
	    {
	        "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. File needs to be located on same domain.

Example files 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>


Example (object notation):

{
    type:'custom',
    path:'data/custom/fb.txt',
    title:'This is a Facebook video',
    description:'Facebook, Inc. is an American social media and technology company based in Menlo Park, California.',
    thumb:'media/other/fb.jpg',
}

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
data-duration seconds Time to show this type of media. If not specified it will be showed indefinitely.

How to set video on Amazon S3?

Note: if you just want to place your files in public bucket on Amazon S3, you dont need this setup! Then just link to files as usual and use type video (or audio). Example:

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



If you dont use the following setup below, you can delete deploy/includes/aws directory with files.




Supported are public and private buckets. Supported are single video/audio urls and reading a whole bucket with video/audio files inside.

Credentials setup

1. Create IAM user with credentails on the following link:

https://console.aws.amazon.com/iam/home#/home

2. Add username and enable Programmatic access:

3. Enable AmazonS3ReadOnlyAccess policy for user:

4. After user is created copy his credentials (key and secret) and enter then in content\includes\aws\cred.php file:

CORS setup

Add CORS policy to bucket (this is required if you want to use image poster / thumbnails in player which are also located in the bucket):

To add CORS policy, go to permissions tab in the bucket, scroll to CORS section and enter the following:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

Video setup

Supported are single video urls and reading a whole bucket with video files inside (the same is true for audio).

1. Read whole bucket with video files:

Create bucket, and choose AWS region closest to you (s3Region in setting).

Upload video files inside bucket. If you want to host image poster on S3 as well create folder named "poster" inside this bucket and place your image files for poster inside that folder. The same is true for thumbnails (in this case create folder named "thumb") Images for poster and thumbnails need to have the same name as video files!. Example this bucket has video files and poster / thumbnails named the same!

Poster images in example above use .jpg extension. You can set this option in settings:

s3ThumbExtension: 'jpg',
getPosterFromBucket: true,
getThumbFromBucket: true,
s3Region:'us-east-1'

s3ThumbExtension = specify thumb extension that thumbnails / poster images in the bucket will have (all thumbnails are expected to have the same extension)

getPosterFromBucket = read image poster from bucket

getThumbFromBucket = read image thumbnails from bucket

s3Region = Amazon AWS region https://docs.aws.amazon.com/AmazonS3/latest/userguide/UsingBucket.html



Bucket privacy

Bucket can be public or private. If you want a bucket to be private go to Permissions tab inside a bucket and check Block all public access

Other options for S3 include:

s3UrlExpireTime:'+15 seconds'

s3UrlExpireTime = The time at which the URL should expire. This can be a Unix timestamp, a PHP DateTime object, or a string that can be evaluated by strtotime(). https://docs.aws.amazon.com/aws-sdk-php/v3/api/class-Aws.S3.S3Client.html#_createPresignedRequest

Example of playlist
Video example

1. Bucket playlist (read whole bucket and get all video files inside):

<div id="playlist-example">

    <div class="mvp-playlist-item" data-type="s3_bucket_video" data-bucket="my-bucket-name" data-sort="filename-asc"></div>

</div>    

Audio example

1. Bucket playlist (read whole bucket and get all audio files inside):

<div id="playlist-example">

    <div class="mvp-playlist-item" data-type="s3_bucket_audio" data-bucket="my-bucket-name" data-sort="filename-asc"></div>

</div>    


Example (object notation):

{
    type:'s3_bucket_audio',
    bucket:'my-bucket-name',
    sort:'filename-asc',
}

Parameters:

Parameter Value Description
data-type s3_bucket_video / s3_bucket_audio video / audio type
data-bucket bucket name
data-is360 for 360 videos
data-sort filename-asc / filename-desc Alphabetically sort files in bucket


2. Single video urls from bucket playlist:

<div id="playlist-example">

    <div class="mvp-playlist-item" data-type="s3_video" data-bucket="my-bucket-name" data-key="OBJECT_KEY" data-title="Video title here"></div>

</div>    


Example (object notation):

{
    type:'s3_video',
    bucket:'my-bucket-name',
    key:'OBJECT_KEY',
    title:'Amazon S3 video',
    poster:'media/video/poster/01.jpg',
}

2. Single audio urls from bucket playlist:

<div id="playlist-example">

    <div class="mvp-playlist-item" data-type="s3_audio" data-bucket="my-bucket-name" data-key="OBJECT_KEY" data-title="Audio title here"></div>

</div>    

Parameters:

Parameter Value Description
data-type s3_video / s3_audio video / audio type
data-bucket bucket name
data-key This is basically file name in bucket. When you right click on the file in bucket you will get its properties, one of them is key.

data-key (When you right click on the file in bucket you will get its properties, one of them is key.)

You can use the rest available attributes for self hosted video / audio




How to create playlist selector?

Playlist selector contains a list of playlists that can be loaded on runtime.

Playlist list must contain the following attributes on playlist node:

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

    <div class="playlist-youtube-1" data-title="Youtube playlist" data-description="This is playlist of youtube videos" data-thumb="media/playlist_selector/youtube_playlist.jpg">
        <div class="mvp-playlist-item" data-type="youtube_playlist" data-path="PLFgquLnL59alCl_2TQvOiD5Vgm1hCaGSI" data-limit="10"></div>
    </div>

    <div class="playlist-youtube-2" data-title="Youtube channel" data-description="Youtube channel videos" data-thumb="media/playlist_selector/youtube_channel.jpg">
        <div class="mvp-playlist-item" data-type="youtube_channel" data-path="UCqhnX4jA0A5paNd1v-zEysw" data-limit="10" data-sort="date"></div>
    </div>

</div> 

Note the attributes data-title, data-description, data-thumb. This is what is displayed inside playlist selector list:

Available settings

Parameter Value Description
makePlaylistSelector true / false Create playlist selector from available playlists.
autoOpenPlaylistSelector true / false Auto open playlist selector on start
autoAdvanceToNextPlaylist true / false Auto advance to next playlist. If this is true, loopingOn is false and next playlist is auto loaded when last video finishes playing in current playlist.

Check playlist_selector.html demo for more info.

There are following adverts supported in the player:

Normal adverts

Normal 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 which will play before main media starts (mvp-ad-pre). 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="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="media/video/ad_01.mp4" data-skip-enable="10"></div>

        <div class="mvp-ad mvp-ad-pre" data-type="video" data-path="media/video/ad_02.mp4" data-skip-enable="20"></div>
    </div>    

</div>

Example (object notation):

{
    type:'video',
    path:'media/video/04.mp4',
    poster:'media/video/poster/04.jpg',
    title:'Video title here',
    thumb:'media/video/thumb/04.jpg',
    adPre: [
        {
            type: "video",
            path: [
                {
                    "quality": "SD",
                    "mp4": "media/video/ad_01.mp4"
                }
            ],
            skipEnable: 3,
            link: "http://www.google.com",
            target: "_blank"
        },
        {
            type: "youtube",
            path: "jXSxzMTrKq0",
            skipEnable: 4
        }
    ]
}



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

<div class="mvp-playlist-item" data-type="video" data-path="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="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="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>

Example (object notation):

{
    type:'video',
    path:'media/video/04.mp4',
    poster:'media/video/poster/04.jpg',
    title:'Video title here',
    thumb:'media/video/thumb/04.jpg',
    adMid: [
        {
            type: "video",
            path: [
                {
                    "quality": "SD",
                    "mp4": "media/video/ad_02.mp4"
                }
            ],
            skipEnable: 3,
            begin: 8,
            link:'https://google.com',
            target:'_blank',
        },
        {
            type: "vimeo",
            path: "22669590",
            skipEnable: 3,
            begin: 15
        }
    ]
}



Add endroll advert which will play after main media ends (mvp-ad-end). 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="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="media/video/ad_03.mp4" data-skip-enable="7"></div>

        <div class="mvp-ad mvp-ad-end" data-type="video" data-path="media/video/ad_04.mp4" data-skip-enable="0"></div>
    </div>    

</div>

Example (object notation):

{
    type:'video',
    path:'media/video/04.mp4',
    poster:'media/video/poster/04.jpg',
    title:'Video title here',
    thumb:'media/video/thumb/04.jpg',
    adEnd: [
        {
            type: "video",
            path: [
                {
                    "quality": "SD",
                    "mp4": "media/video/ad_03.mp4"
                }
            ],
            skipEnable: 7
        },
        {
            type: "youtube",
            path: "3XJh9n8K3XU"
        }
    ]
}




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="media/video/ad_01.mp4" data-skip-enable="10"></div>

                <div class="mvp-ad mvp-ad-pre" data-type="video" data-path="media/video/ad_02.mp4" data-skip-enable="20"></div>

                <div class="mvp-ad mvp-ad-mid" data-type="video" data-path="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="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="media/video/ad_04.mp4" data-skip-enable="0"></div>

            </div>  

        </div>

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

    </div>
            
</div>                

Note that when you create mvp-ad-section in mvp-global-playlist-data , if you have mvp-ad-section inside the individual videos, they will still be used instead of mvp-global-playlist-data.




Example adverts is global playlist data (object notation):

globalPlaylistData:{
    //ads
    adPre: [
        {
            type: "video",
            path: [
                {
                    "quality": "SD",
                    "mp4": "media/video/ad_01.mp4"
                }
            ],
            skipEnable: 3,
            link: "http://www.google.com",
            target: "_blank"
        },
        {
            type: "youtube",
            path: "jXSxzMTrKq0",
            skipEnable: 4
        }
    ],
    adMid: [
        {
            type: "video",
            path: [
                {
                    "quality": "SD",
                    "mp4": "media/video/ad_02.mp4"
                }
            ],
            skipEnable: 3,
            begin: 8,
            link:'https://google.com',
            target:'_blank',
        },
        {
            type: "vimeo",
            path: "22669590",
            skipEnable: 3,
            begin: 15
        }
    ],
    adEnd: [
        {
            type: "video",
            path: [
                {
                    "quality": "SD",
                    "mp4": "media/video/ad_03.mp4"
                }
            ],
            skipEnable: 7
        },
        {
            type: "youtube",
            path: "3XJh9n8K3XU"
        }
    ]
}

Parameters:

Parameter Required Value
data-type yes video, audio, image, youtube_single, vimeo_single
data-path yes url to video, audio, image, youtube_single, vimeo_single
data-skip-enable When to show skip advert button, in seconds or percentage for example (30%). If emmited, no skip button will be shown. Setting this value to 0 will show skip button immediatelly.
data-begin yes for midroll When to start midroll, in seconds or percentage for example (30%).
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-rel Url rel attribute
data-ad-id optional parameter to track ads with ad callbacks

Vast adverts supported in the player are VAST / VMAP / IMA / VPAID, SIMID ...etc

There are 2 ways to use Vast adverts in the player:

1. Using Google IMA SDK https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side

2. Parsing Vast files manually

Both of these methods have their weakness and strength points. Choose what is better suited for your needs:

1. Using Google IMA SDK

Will provide more support for different vast formats like VPAID, SIMID ...etc. 

You can only use it with type video or audio in the player (No Youtube, Vimeo etc...). 

Some functionality might be limited on mobile because its not possible to fully control playback of Vast video with Google IMA SDK.

Its not possible to combine normal adverts with Vast adverts in the player.

2. Parsing Vast files manually

Support for some specific vast formats like VPAID, SIMID ...etc might not work!

Parsing Vast files manually means you can use Vast with any media type (video, audio, Youtube, Vimeo..). 

Playback on mobile should be handled better than when using Google IMA SDK.

You can combine normal adverts with Vast adverts in the player (for example add Vast preroll advert and self hosted video midroll advert together in the same video).



1. Using Google IMA SDK

Available settings:

Parameter Required Value
useImaLoader true / false Use IMA SDK loader
hideImaAdTimer true / false This will hide IMA official ad loader time over vast video which sometimes can be visible on mobile.
forceAdMutedOnIos true / false This is some fix for IOS (safari / chrome) to try to play vast video muted because playing it with sound may not work and vast will be automatically skipped. Recommended to set true.

Example of vast (data-vast attribute):

<div class="mvp-playlist-item" data-type="video" data-path="media/video/01.mp4" data-vast="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator="></div>

Example (object notation):

{
    type:'video',
    path:'media/video/01.mp4',
    vast:'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator='
}


Note that vast url comes in a form of:

https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=

You cannot use XML files with IMA SDK loader like (for example here XML file is located locally):

<div class="mvp-playlist-item" data-type="video" data-path="media/video/01.mp4" data-vast="data/vast/xml/Single-inline-linear.xml"></div>

If such data-vast url is set, vast file will be parsed manually!

Here IMA SDK offers many vast examples for testing:

https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/tags#single-vpaid-2.0-linear



2. Parsing Vast files manually

Example of vast with video (data-vast attribute):

<div class="mvp-playlist-item" data-type="video" data-path="media/video/01.mp4" data-vast="data/vast/xml/Single-inline-linear.xml"></div>

Example (object notation):

{
    type:'video',
    path:'media/video/01.mp4',
    vast:'data/vast/xml/Single-inline-linear.xml'
}


Example of vast with audio:

<div class="mvp-playlist-item" data-type="audio" data-path="media/audio/02.mp3" data-vast="data/vast/xml/Single-inline-linear.xml"></div>

Example of vast with Youtube:

<div class="mvp-playlist-item" data-type="youtube_single" data-path="79qr0uMpAf4" data-vast="data/vast/xml/Single-inline-linear.xml"></div>

You can combine normal adverts with Vast adverts in the player. For example add Vast preroll advert and self hosted video midroll advert together in the same video:

<div class="mvp-playlist-item" data-type="video" data-path="media/video/01.mp4" data-vast="data/vast/xml/Single-inline-linear.xml">

    <div class="mvp-ad-section">
        <div class="mvp-ad mvp-ad-mid" data-type="video" data-path="media/video/ad_01.mp4" data-skip-enable="10"></div>
    </div>  

</div>

Just make sure start times do not collide (for example having vast midroll start time the same as normal ad midroll start time) or you might get unexpected results.





How to use multiple vast urls for single video?

Following applies when parsing Vast files manually.

One vast url can be added for each video with data-vast attribute. If you want to use multiple vast for one video, you can use VMAP. VMAP is playlist of VAST files, meaning it can contain multple vast files, each having its own start time.

Example: https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=132132

Start time if defined with timeOffset attribute. Possible values include:

<vmap:AdBreak timeOffset="start">    - pre-roll
<vmap:AdBreak timeOffset="00:01:05"> - mid-roll
<vmap:AdBreak timeOffset="50%">      - mid-roll (percent values)
<vmap:AdBreak timeOffset="end">      - end-roll





You can also apply timeOffset to standard VAST file, adding timeOffset attribute to Ad node:

Example: https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=25345434

<Ad timeOffset="start">    - pre-roll
<Ad timeOffset="00:01:05"> - mid-roll
<Ad timeOffset="50%">      - mid-roll (percent values)
<Ad timeOffset="end">      - end-roll





VAST files can be skippable. This is set using skipoffset attribute on Linear node in format hh:mm:ss or percent values 50%

<Linear>                          - not skippable (default)
<Linear skipoffset="00:00:05">    - skippable
<Linear skipoffset="50%">         - skippable





How to apply one vast url for all videos?

You can also ad vast url inside global playlist data and then this vast url will be aplied to every video in the playlist. Example:

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

    <div class="playlist-test">

        <div class="mvp-global-playlist-data" data-vast="data/vast/xml/Single-inline-linear.xml"></div>

        <div class="mvp-playlist-item" data-type="video" data-path="media/video/01.mp4" title="First video"></div>

        <div class="mvp-playlist-item" data-type="video" data-path="media/video/02.mp4" title="Second video"></div>

        <div class="mvp-playlist-item" data-type="video" data-path="media/video/03.mp4" title="Third video"></div>

    </div>
            
</div>             

Example vast in global playlist data (object notation):

globalPlaylistData:{
    vast:'data/vast/xml/Single-inline-linear.xml'
}





Looping vast files

Its possible to loop VAST files with pre adverts (without playing main video).

How to use (add data-vast-loop attribute):

<div class="mvp-playlist-item" data-type="video" data-path="media/blank.mp4" data-vast="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=" data-vast-loop></div>  

Notes:

This only works with VAST file containing pre adverts (adverts that play before main video).

This only works using ima loader (useImaLoader:true) in settings.

You can use included blank.mp4 video file (with zero size) because its not necessary to use real video since it will not be shown.

There is a small break with a black screen between each vast loop. This is unavoidable because vast needs to reload on Google side, there is no function to actually loop vast.

This black screen can be adjust in css:

.mvp-ima-holder-loop{
    background-color: #111!important;
}

Check demo vast_loop.html for this example.

Inline ads appear in timed intervals while video plays. Advert needs to finish before the video can continue. Its not possible to skip inline adverts.

Available settings:

Parameter Required Value
showInlineAds true / false Show inline ads
inlineAdsCountdown seconds Number of seconds to countdown
inlineAdsOccurence miliseconds How often inline ads appear
inlineAdsContinueInText Continue in inline Ads Continue In Text
inlineAdsUpgradeText Upgrade to Pro membership to hide these ads inline Ads Upgrade Text

Demo which has this implemented is inline_ads.html

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.



Annotation examples:

Example of HTML annotation:

<div class="mvp-playlist-item" data-type="video" data-path="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="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="yes" 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="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>



Annotations defined with object notation

Example (object notation):

{
    type:'video',
    path:'media/video/04.mp4',
    poster:'media/video/poster/04.jpg',
    title:'Video title here',
    thumb:'media/video/thumb/04.jpg',
    annotationSection: document.getElementById('mvp-annotation-section1')//target element in page holding annotations
}

Add element to page holding annonations

<!-- annotation demo -->
<div id="mvp-annotation-section1">

    <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>
        <button type="button" class="mvp-annotation-close mvp-annotation-close-br mvp-btn-reset" 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>
        </button>
    </div> 

    <div id="an2" class="mvp-annotation" data-show="5" data-hide="35">
        <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> 
        <button type="button" class="mvp-annotation-close mvp-annotation-close-tr mvp-btn-reset" 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>
        </button>
    </div> 

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

</div>



Annotations defined in global playlist data

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>             

Note that when you create mvp-annotation-section in mvp-global-playlist-data , if you have mvp-annotation-section inside the individual videos, they will still be used instead of mvp-global-playlist-data.


Example (object notation):

globalPlaylistData:{
    annotationSection: document.getElementById('mvp-annotation-section1')//target element in page holding annotations
}

Add element to page holding annonations

<!-- annotation demo -->
<div id="mvp-annotation-section1">

    <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>
        <button type="button" class="mvp-annotation-close mvp-annotation-close-br mvp-btn-reset" 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>
        </button>
    </div> 

    <div id="an2" class="mvp-annotation" data-show="5" data-hide="35">
        <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> 
        <button type="button" class="mvp-annotation-close mvp-annotation-close-tr mvp-btn-reset" 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>
        </button>
    </div> 

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



Additional settings for annotations

Parameter Required Value
hideAnnotationOnMobile true / false Hide annotations on mobile.
showAnnotationsOnlyOnce true / false Show annotations only once per video.

Popups are similar to annotations but with a few key differences.

Main purpose of popups is to display ads while video is paused (of any kind since popups accept any HTML).

Annotations are strickly timed based. Popups can appear on video pause and on specific times (for example show popup when video reaches 10 seconds).

Video is always paused when popup appears, while annotations play regardless of video. Its not possible to resume video while popup is opened.

Only single popup can be shown at a time, while multiple annotations can be shown at once.

Layout is slightly different for popups. Popups are always centered and accept content larger then video area so content can be scrolled vertically.

Popups can be useful for large data display, when focus is mainly on popup since video is paused. You can use it to display for example some iframes over video, or some user forms. Popups can also be used for displaying simple images (additionally linked to url on click).

Its possible to display one or more popups which are shown on video pause (if multiple popups exist every time video is paused new popup is going to be shown).

Its possible to display timed popups (show one popup when video reaches 10 seconds, second popup when video reaches 20 second etc..)

Its possible to mix both popups on pause and timed popups together.

Careful not to mix annotations and popups together at the same time since popup opens above everything and its not possible to access other video area when popup is shown.

Note if you have showPosterOnPause defined, it will overwrite popop (and show poster instead) so make sure you turn if off.

Note timed popups can be skipped if user seeks beyond time in which popup should appear. If you want to prevent this you can use disableVideoSkip option.




How to use popups?

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

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



Example of image popup:

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

    <div class="mvp-annotation-section">
        
        <div class="mvp-popup" data-show="pause">

            <img class="mvp-popup-img" src="media/annotation/big.jpg" alt=""/>

            <button type="button" class="mvp-popup-close mvp-btn-reset" title="Close">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path 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>
            </button>

        </div> 

    </div>    

</div>

You can choose to use close button (mvp-popup-close) or not. Note that video cannot continue if popup is not closed! Option to close popup using api exist.



Example of iframe popup:

Notice:

1.
mvp-popup has also class mvp-popup-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="media/video/01.mp4"> 

    <div class="mvp-annotation-section">
        
        <div class="mvp-popup mvp-popup-iframe" data-show="pause">

            <iframe src="about:blank" data-src="https://en.wikipedia.org/wiki/HTML5" frameborder="0" scrolling="yes" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

            <button type="button" class="mvp-popup-close mvp-btn-reset" 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>
            </button>
        </div>

    </div>    

</div>



Example of form popup (form inside the popup):

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

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

        <form id="my-form" action="#" onsubmit="return false;">
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="firstname" placeholder="Your name..">

            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lastname" placeholder="Your last name..">

            <label for="country">Country</label>
            <select id="country" name="country">
              <option value="australia">Australia</option>
              <option value="canada">Canada</option>
              <option value="usa">USA</option>
              <option value="not">Not listed</option>
            </select>
          
            <input type="submit" value="Submit">
        </form>

        <button type="button" class="mvp-popup-close mvp-btn-reset" 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>
        </button>   

    </div>     

</div>



Popups defined with object notation

{
    type:'video',
    path:'media/video/04.mp4',
    poster:'media/video/poster/04.jpg',
    title:'Video title here',
    thumb:'media/video/thumb/04.jpg',
    annotationSection: document.getElementById('mvp-popup-section1')//target element in page holding popups
}

Add element to page holding popups

<!-- popups demo -->
<div id="mvp-popup-section1">

    <!-- image with text popup -->
    <div class="mvp-popup" data-show="pause">
    
        <div id="image-with-text">

            <img class="mvp-popup-img" src="media/annotation/banner-1.jpg" alt=""/>

            <p>Show popup advertisements on pause. Any content supported (image, HTML, iframe...) Optional close button.</p> 

        </div>
    </div> 

    <!-- iframe popup -->
    <div class="mvp-popup mvp-popup-iframe" data-show="pause">

        <iframe src="about:blank" data-src="https://en.wikipedia.org/wiki/HTML5" frameborder="0" scrolling="yes" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

    </div>
    
    <!-- form popup -->
    <div class="mvp-popup" data-show="pause">

        <form id="my-form" action="#" onsubmit="customCallback();return false;">
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="firstname" placeholder="Your name.." required="">

            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lastname" placeholder="Your last name.." required="">

            <label for="country">Country</label>
            <select id="country" name="country">
              <option value="australia">Australia</option>
              <option value="canada">Canada</option>
              <option value="usa">USA</option>
              <option value="not">Not listed</option>
            </select>
          
            <input type="submit" value="Submit">
        </form>

    </div>

    <!-- iframe with text popup -->
    <div id="iframe-with-text" class="mvp-popup mvp-popup-iframe" data-show="pause">

        <p>This is an iframe</p> 

        <iframe src="about:blank" data-src="https://de.wikipedia.org/wiki/Envato" frameborder="0" scrolling="yes" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

    </div> 

</div> 



You can see more examples in popups.html demo page.



Popups defined in global playlist data

Example of popups defined inside global playlist data as global popups (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 class="mvp-popup" data-show="pause">

                    <img class="mvp-popup-img" src="media/annotation/big.jpg" alt=""/>

                    <button type="button" class="mvp-popup-close mvp-btn-reset" title="Close">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path 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>
                    </button>

                </div> 

                <div class="mvp-popup mvp-popup-iframe" data-show="pause">

                    <iframe src="about:blank" data-src="https://en.wikipedia.org/wiki/HTML5" frameborder="0" scrolling="yes" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

                    <button type="button" class="mvp-popup-close mvp-btn-reset" 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>
                    </button>
                </div>


            </div>  

        </div>

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

    </div>
            
</div>             

Note that when you create mvp-annotation-section in mvp-global-playlist-data , if you have mvp-annotation-section inside the individual videos, they will still be used instead of mvp-global-playlist-data.


Example (object notation):

globalPlaylistData:{
    annotationSection: document.getElementById('mvp-popup-section1')//target element in page holding popups
}

Add element to page holding popups

<div id="mvp-popup-section1">

    <div class="mvp-popup" data-show="pause">

        <img class="mvp-popup-img" src="media/annotation/big.jpg" alt=""/>

        <button type="button" class="mvp-popup-close mvp-btn-reset" title="Close">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path 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>
        </button>

    </div> 

    <div class="mvp-popup mvp-popup-iframe" data-show="pause">

        <iframe src="about:blank" data-src="https://en.wikipedia.org/wiki/HTML5" frameborder="0" scrolling="yes" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

        <button type="button" class="mvp-popup-close mvp-btn-reset" 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>
        </button>
    </div>

</div>  




Anatomy of an popup:

<div class="mvp-popup" data-show="pause">

    <img class="mvp-popup-img" src="media/annotation/big.jpg" alt=""/>

    <button type="button" class="mvp-popup-close mvp-btn-reset" 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>
    </button>

</div> 

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

Other parameters:

Parameter Required Value
data-show yes When to show popup. Popup can be show on pause or in specific times in video, in seconds.



Global popup close button

If you dont want to add close popup button to each popup, you can use global popup close button with following setting:

useGlobalPopupCloseBtn:true

This will automatically create a close button





Example show popup on pause: (data-show="pause")

<div class="mvp-popup" data-show="pause">

    <img class="mvp-popup-img" src="media/annotation/big.jpg" alt=""/>

    <button type="button" class="mvp-popup-close mvp-btn-reset" 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>
    </button>

</div> 



Example show popup when video reaches 10 seconds: (data-show="10")

<div class="mvp-popup" data-show="10">

    <img class="mvp-popup-img" src="media/annotation/big.jpg" alt=""/>

    <button type="button" class="mvp-popup-close mvp-btn-reset" 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>
    </button>

</div> 



Showing multiple timed popups in a row

If you have multiple timed popups and you want to show them one after another, you can defined same show time like (data-show="3"):

<!-- only image popup -->
<div class="mep-popup" data-show="3">

    <a href="http://google.com" target="_blank">
        <img class="mvp-popup-img" src="media/annotation/big.jpg" alt=""/>
    </a>

    <button type="button" class="mvp-popup-close mvp-btn-reset" 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>
    </button>

</div> 

<!-- image with text popup -->
<div class="mvp-popup" data-show="3">

    <div id="image-with-text">

        <img class="mvp-popup-img" src="media/annotation/banner-1.jpg" alt=""/>

        <p>Show popup advertisements on pause. Any content supported (image, HTML, iframe...) Optional close button.</p> 
      
        <button type="button" class="mvp-popup-close mvp-btn-reset" 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>
        </button>

    </div>
</div> 



Attach url to popup

You can attach url so when popup is clicked it will open url. To do that just wrap some part if popup in href, example image is wrapped in url:

<div class="mvp-popup" data-show="3">

<a href="http://google.com" target="_blank">
    <img class="mvp-popup-img" src="media/annotation/big.jpg" alt=""/>
</a>

<button type="button" class="mvp-popup-close mvp-btn-reset" 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>
</button>

</div> 



API method to close popup

Popup can be closed on demand using player api methods closePopup

player.closePopup()



Additional settings for popups:

Parameter Required Value
hidePopupsOnMobile true / false Hide popups on mobile.
showPopupsOnlyOnce true / false Show popups only once per video. Meaning once popup is closed it will not appear again if user seeks backward into video.
randomizePausePopups true / false If you have multiple pause popups, they can be randomized on video start.
resumeMediaAfterPopupClose true / false Video is paused once popup appears and user needs to close popup for video to continue automatically. Default true.

Possible actions to apply when video ends.

Play next video when current ends

Use following settings:

    mediaEndAction:'next'

Loop current video when it ends

Use following settings:

    mediaEndAction:'loop'

Rewind current video to beginning when it ends

Use following settings:

    mediaEndAction:'rewind'

Show poster when current video ends

Use following settings:

    mediaEndAction:'poster'

Requires poster to be set on video (data-poster):

<div class="mvp-playlist-item" data-type="video" data-path="media/video/03.mp4" data-poster="media/video/poster/03.jpg"></div>

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',
    comingnextTime:10

Parameters:

Parameter Value Description
comingnextTime seconds How long is coming next screen shown before next video (seconds). This is for comingnext mediaEndAction action.

To utilize this feature fully, its advised to have video poster defined for next video, because this poster is shown in the coming next video screen. If poster is not available, next video thumbnail will be used, if available.

Show custom image on video end.

This feature can be used to quickly implement watch limit.

Use following settings:

mediaEndAction: "image",
mediaEndImage: "media/watch_limit.jpg",
mediaEndImageUrl: "http://www.google.com",
mediaEndImageUrlTarget: "_blank", 

Parameters:

Parameter Value Description
mediaEndImage image url Image to show on video end
mediaEndImageUrl web url Link image to web url (optional)
mediaEndImageUrlTarget web url target _blank, _parent...

Show custom content on video end.

Use following settings (set mediaEndAction and add your custom HTML to be shown in mediaEndActionCustom):

This demo is from media_end_custom.html

    mediaEndAction:'custom',

    mediaEndActionCustom: <div class="mvp-custom-wrap">
        <div class="mvp-custom-content">
        <div class="mvp-custom-message">This is a custom end screen. Set your own custom end screen by proving HTML and CSS yourself. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="mvp-custom-link-wrap" title="Your Company Title">
        <svg viewBox="0 0 512 512"><path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 21 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"/></svg>
        <a class="mvp-custom-link" href="http://www.google.com" target="_blank">Visit Us</a>
        </div>
        </div>
    </div>

Then style this section as you like with CSS (example):

.mvp-custom-wrap{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background: rgba(0,0,0,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
}

.mvp-custom-content{
    max-width: 70%;
    font-size: 1em;
    overflow-y: auto;
    max-height: 90%;
}

@media (max-width: 400px){ 
    .mvp-custom-content{
        max-width: 90%;
    } 
}

.mvp-custom-message{
    color: #ccc;
}

.mvp-custom-link-wrap{
    margin-top: 10px;
    display: flex;
    align-items: center;
    color: #ffeb3b;
}

.mvp-custom-link-wrap:hover{
    color: #eee;
    transition: all .1s ease-out;
}

.mvp-custom-link-wrap svg{
    margin-right: 10px;
    fill:currentColor;
    color: inherit;
    height: 30px;
}

.mvp-custom-link{
    color: inherit;
}

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


document.querySelectorAll('#some-element').addEventListener('click', function(){

    var settings = {
        ... 
    }

    settings.selectorInit = true;
    player = new mvp(document.getElementById('wrapper'), settings);
});  

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

If player is placed in some element which is hidden on page load (with CSS display none like a tab for example) then player might have an issue to resize itself correctly on start. Use following option to make player monitor when parent becomes visible so it can correctly resize itself.

activateWhenParentVisible

activateWhenParentVisible: true