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.

• codecanyon.net/user/Tean

Register the plugin at the following link

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

Access control panel here

Registration made to make sure customers use the license on a single project (as per Envato rules) and to help customers owning many licenses easily track on which server licenses are being used.

How to install?

Include scripts and styles in HEAD section of the page:

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

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

    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:

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

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

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

Translation settings:

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

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

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

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

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

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

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

Available settings for panorama images:

Parameters:

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:

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

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:

Available settings:

Parameters:

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

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

Example (object notation):

{
    type:'youtube_playlist',
    path:'PLj8xiTIFL1M0VkXq7GGEK5FHNQfKACcWj',
    //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"></div>

Example (object notation):

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

Parameters:

Hide Youtube shorts

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

 hideShortsFromShowing:true

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-hl="de"></div>

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

How to translate title and description for your Youtube videos:

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:

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

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

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-sort="date"></div>

Example (object notation):

{
    type:'vimeo_group',
    path:'artinfx',
    sort:'date',
    sortDirection:"asc",
}

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

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

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

Example (object notation):

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

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-sort="date" data-sort-direction="desc"></div>

Example (object notation):

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

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-sort="date" data-sort-direction="desc"></div>

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-sort="date" data-sort-direction="desc"></div>

Example (object notation):

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

}

Get folder videos (requires vimeo username and folder ID)

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

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

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

Example (object notation):

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

Parameters:

Reading video files from folders

Example:

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

Example (object notation):

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

Parameters:

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

Example (object notation):

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

Parameters:

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

Example (object notation):

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

Parameters:

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.

Reading HLS or DASH files from folders

Example:

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

Example (object notation):

{
    type:'folder_hls',
    path:'../media/hls/',
    sort:'filename-asc'
}

Parameters:

Required folder organization needs to look like this:

Following is an example of 3 hls videos in folder:

hls folder

    01 folder
        01.m3u8
        ts files..
        poster folder (optional)
            01.jpg
        thumb folder (optional)
            01.jpg

    02 folder
        02.m3u8
        ts files..
        poster folder (optional)
            02.jpg
        thumb folder (optional)
            02.jpg

    03 folder
        03.m3u8
        ts files..
        poster folder (optional)
            03.jpg
        thumb folder (optional)
            03.jpg

We have main folder (called "hls" in our example, this can be called anyhow). Inside "hls" folder are folders, each folder is a hls video and it contains M3U8 file and all the TS files, and poster, thumb folder. "poster", "thumb", folders are optional. Inside "poster" directory poster file are located, inside "thumb" directory thumbnail for the playlist are located.

Notes: this 01, 02 etc in our example is just the name of the videos. This can be named anyhow, for example:

hls folder

    super_video folder
        super_video.m3u8
        ts files..
        poster folder (optional)
            super_video.jpg
        thumb folder (optional)
            super_video.jpg

    summer_vacation folder
        summer_vacation.m3u8
        ts files..
        poster folder (optional)
            summer_vacation.jpg
        thumb folder (optional)
            summer_vacation.jpg

    my_sister_wedding folder
        my_sister_wedding.m3u8
        ts files..
        poster folder (optional)
            my_sister_wedding.jpg
        thumb folder (optional)
            my_sister_wedding.jpg

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,

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:

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:

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:

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

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:

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

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:

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:

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:

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:

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

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

Additional settings for annotations

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:

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:

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:

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 few videos from any playlist on video end (aka "related videos"). Can show videos from multiple playlists as once. Click on related video will load new playlist (from which playlist these videos come from) into the player and play that video. Videos are picked randonly from each related playlist. Related videos are always shuffled before show.

This example is from related.html demo.

Related videos setup, in settings:

var settings = {
    activePlaylist:"#playlist-youtube-fashion",//this playlist is loaded on start into the player
    playlistList:"#mvp-playlist-list",
    mediaEndAction:"rel"
    ...
}

In html:

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

    <div id="playlist-youtube-fashion" class="mvp-rel-playlist mvp-playlist-1" data-playlist-id="1" data-rel-num="3">

        <div class="mvp-playlist-item" data-type="youtube_single" data-path="79qr0uMpAf4" data-thumb="media/video/rel/1.jpg" data-title="Introducing #MYCALVINS IRL | CALVIN KLEIN" data-media-id="1"></div>

        <div class="mvp-playlist-item" data-type="youtube_single" data-path="QnXDAFhABgM" data-thumb="media/video/rel/2.jpg" data-title="Coming Soon: Our Spring/Summer 2019 CALVIN KLEIN Watches + Jewelry Campaign" data-media-id="2"></div>
        
        <div class="mvp-playlist-item" data-type="youtube_single" data-path="hfq6MqKZYXs" data-thumb="media/video/rel/3.jpg" data-title="Fall 2013 Calvin Klein Underwear - Featuring Christy Turlington" data-media-id="3"></div>

        <div class="mvp-playlist-item" data-type="youtube_single" data-path="F3X807nde1Q" data-thumb="media/video/rel/4.jpg" data-title="Calvin Klein Fall 2013" data-media-id="4"></div>

        <div class="mvp-playlist-item" data-type="youtube_single" data-path="fBhaPsGmx_Y" data-thumb="media/video/rel/5.jpg" data-title="I David Blaine in #mycalvins – Calvin Klein Fall 2016 Global Campaign" data-media-id="5"></div>

    </div>

    <div id="playlist-climb" class="mvp-rel-playlist mvp-playlist-2" data-playlist-id="2" data-rel-num="3">

        <div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/ad_01.mp4"}]' data-thumb="media/thumb/ad_01.jpg" data-title="Lorem ipsum dolor sit amet" data-media-id="1"></div>

        <div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/ad_02.mp4"}]' data-thumb="media/thumb/ad_02.jpg" data-title="Vestibulum accumsan enim nec ipsum" data-media-id="2"></div>

        <div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/ad_03.mp4"}]' data-thumb="media/thumb/ad_03.jpg" data-title="Nullam eros ipsum, rutrum ut" data-media-id="3"></div>

        <div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/ad_04.mp4"}]' data-thumb="media/thumb/ad_04.jpg" data-title="Integer vel ante" data-media-id="4"></div>

    </div>

    <div id="playlist-demo" class="mvp-rel-playlist mvp-playlist-3" data-playlist-id="3" data-rel-num="3">

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

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

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

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

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

    </div> 

</div> 

Notes:

class mvp-rel-playlist Means this will be related playlist. Take 3 random videos from that playlist to be related videos (3 = data-rel-num, number of video to make related).

Each related playlist needs to have unique mvp-playlist-x" data-playlist-id="x" (mvp-playlist-1" data-playlist-id="1")

<div id="playlist-youtube-fashion" class="mvp-rel-playlist mvp-playlist-1" data-playlist-id="1" data-rel-num="3">

data-media-id Each video requires unique data-media-id attribute. This is required so click on video will load that video in playlist.

<div class="mvp-playlist-item" data-type="youtube_single" data-path="79qr0uMpAf4" data-thumb="media/video/rel/1.jpg" data-title="Introducing #MYCALVINS IRL | CALVIN KLEIN" data-media-id="1"></div>

Playlist loaded on start can also be related playlist. Click on related video from that playlist will just play this video in the player, since this playlist is already loaded in the player.

Related videos need to have thumbnails defined!

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:

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

Lightbox mode is supported for following layouts: vrb, vb, hb, no-playlist. Player can open in lightbox by clicking on any html element in page or automatically. Everything else is the same as for normal player.

Typically you can use the following code for opening lightbox: (first time clicking on some-element player will open lightbox). Additionally you can also specify video to open (using data-media-id attribute which you can add to mvp-playlist -item for your videos)

Following example shows 3 links in page, each one will open player in lightbox and play diferent video:

var player;
document.querySelector('#some-element').addEventListener('click', function(e){
    var id = e.target.getAttribute("data-media-id");//video to load, optional

    if(!player){//init player first time

        settings.mediaId = id;
        settings.selectorInit = true;//will try to autoplay with sound

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

    }else{//reopen lightbox 
        player.openLightbox(id);
    }

    return false;
   
});  

<a href="#" class="some-element" id="first-video" data-media-id="1">open second video</a>
<a href="#" class="some-element" id="second-video" data-media-id="2">open third video</a>
<a href="#" class="some-element" id="third-video" data-media-id="3">open fourth video</a>

Check lightbox.html demo for more details.

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

To open the player automatically in lightbox, simply call this code above manually, for example by with triggering click on some element.

document.querySelector('#first-video').click();

In this case, if you want to auto play, remove settings.selectorInit = true;

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-auto-play=true&mvp-active-item=1&mvp-media-end-action=loop&mvp-playlist-item-content=title,thumb&mvp-skip-poster=true&mvp-use-resume-screen=false&mvp-random-play=true&mvp-playlist-opened=false

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=video&mvp-path=VIDEO_URL&mvp-path=QUALITY_MENU_TITLE&mvp-thumb=THUMB_URL&mvp-title=VIDEO_TITLE&mvp-poster=VIDEO_POSTER&mvp-subtitle=SUBTITLE_LABEL&mvp-subtitle=SUBTITLE_URL

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=video&mvp-path=media/video/01.mp4&mvp-path=720p&mvp-thumb=media/video/thumb/01.jpg&mvp-title=Video+title+one&mvp-poster=media/video/poster/01.jpg&mvp-subtitle=English,German,Spanish&mvp-subtitle=data/subtitles/sintel-en.vtt,data/subtitles/sintel-de.vtt,data/subtitles/sintel-es.vtt

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

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=video&mvp-path=media/video/01.mp4&mvp-path=720p&mvp-thumb=media/video/thumb/01.jpg&mvp-title=Video+title+one&mvp-poster=media/video/poster/01.jpg&mvp-start=12

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-active-item=3&mvp-playback-position-time=12

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

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=video,video&mvp-path=media/video/01.mp4,media/video/01_hd.mp4&mvp-path=720p,1080p&mvp-path-1-mp4=media/video/02.mp4,media/video/02_hd.mp4&mvp-path-1-quality=SD,HD&mvp-thumb=media/video/thumb/01.jpg,media/video/thumb/02.jpg&mvp-title=Video+ 1,Video+title+two&mvp-poster=media/video/poster/01.jpg,media/video/poster/02.jpg&mvp-subtitle=English,German,Spanish&mvp-subtitle=data/subtitles/sintel-en.vtt,data/subtitles/sintel-de.vtt,data/subtitles/sintel-es.vtt&mvp-subtitle-1-label=German,Spanish&mvp-subtitle-1-src=data/subtitles/tumblr-de.vtt,data/subtitles/tumblr-es.vtt

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

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

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=youtube_single&mvp-path=VIDEO_ID&mvp-thumb=THUMB_URL&mvp-title=VIDEO_TITLE&mvp-description=VIDEO_DESCRIPTION&mvp-poster=VIDEO_POSTER&mvp-noapi=true

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=youtube_single&mvp-path=pSOoXLRBDuk&mvp-thumb=https://i.ytimg.com/vi/pSOoXLRBDuk/mqdefault.jpg&mvp-title=Giorgio+Armanis+boudoir+fashion+commercial&mvp-description=Russo+supe+Sasha+Pivovarova+e+universalmente+celebrata+per+il+suo+look+unico;+quello+di+uno+straniero+in+possesso+proveniente+da+un+pianeta+ghiacciato+e+possibilmente+incrociato+con+un+husky.&mvp-poster=https://i.ytimg.com/vi/pSOoXLRBDuk/maxresdefault.jpg&mvp-noapi=true

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

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

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

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

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

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

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

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

www.domain.com/some-page?mvp-query-instance=instanceName&mvp-type=vimeo_single&mvp-path=VIDEO_ID&mvp-thumb=THUMB_URL&mvp-title=VIDEO_TITLE&mvp-description=VIDEO_DESCRIPTION&mvp-poster=VIDEO_POSTER&mvp-noapi=true

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

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

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

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

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

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

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

useBlob:true

useCasting:true

Header set Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers: "Content-Type"

textTrackStyle: {
    fontScale: 1.0,
    foregroundColor: '#FFFFFFFF',
    backgroundColor: '#00000000',
    edgeColor: '#00000066',
    edgeType: 'DROP_SHADOW',
    fontStyle: 'NORMAL',
    fontFamily: 'Serif',
    fontGenericFamily: 'CURSIVE'
}

useAirPlay:true

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

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

streamCamera:true,

autoStartStream,:false//start streaming automatically if camera is connected

offlineImage:'image-url'//optional, set image which will display when camera is not running

player.startStream(options)//start camera

- options (optional parameter), default is: {audio: true, video:true}

player.stopStream()//stop camera



player.startRecord(options)//start record camera video

- options (optional parameter), default is: {
                    mimeType: "video/webm"
                };

See mediaRecorder options: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder

timeslice (additional option) - The number of milliseconds to record into each Blob. If this parameter isn't included, the entire media duration is recorded into a single Blob unless the requestData() method is called to obtain the Blob and trigger the creation of a new Blob into which the media continues to be recorded.

Example:
options.timeslice = 2000



player.stopRecord()//stop record camera video

player.getRecorderData()//returns blob array of recording video data




player.makeSnapshot(canvas)//creates snapshot of current video to camera to canvas, pass your own canvas element or player will create its own.



player.downloadStream()//download recorded stream



player.setOfflineImage(url)//set image which will display when camera is not running 

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

playerRatio:1,
combinePlayerRatio:false

.mvp-player {
    position: absolute!important;
    height: 100%!important;
}

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

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

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

WEBVTT

00:00:00.000 --> 00:00:05.000
data/seek/01_seek.png#xywh=0,0,120,68

00:00:05.000 --> 00:00:10.000
data/seek/01_seek.png#xywh=120,0,120,68

00:00:10.000 --> 00:00:15.000
data/seek/01_seek.png#xywh=0,68,120,68

00:00:15.000 --> 00:00:20.000
data/seek/01_seek.png#xywh=120,68,120,68

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

    <div class="mvp-cuepoints">
        <div data-start="15" data-callback="myFirstCue"></div>  
        <div data-start="30" data-eval="alert('callback at 30 seconds')"></div>
    </div>

</div>

media:[
{
    type:'video',
    mp4:'media/video/01.mp4',

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

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

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

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

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

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

var settings = {
    rememberPlaybackPosition:'1',
    ...
}

1 - Remember only last video time


all - Remember all video times (in specific playlist)

<button type="button" class="mvp-unmute-toggle mvp-btn-reset" aria-label="Unmute"></button>

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

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

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

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

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

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

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

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

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

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

})

useMobileListMenu:true

useMobileChapterMenu:true

useMobileCompactPlaylist:true

transcript
chapter window
playlist selector

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

        <div class="mvp-global-playlist-data" data-add-more-on-total-scroll="1" data-add-more-num-results="12" data-add-more-limit="8"></div>


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

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

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

        <div class="mvp-playlist-item" data-type="video" data-path="media/video/04.mp4" data-thumb="media/video/thumb/04.jpg" data-title="Video 4"></div>

        <div class="mvp-playlist-item" data-type="video" data-path="media/video/05.mp4" data-thumb="media/video/thumb/05.jpg" data-title="Video 5"></div>

        <div class="mvp-playlist-item" data-type="video" data-path="media/video/06.mp4" data-thumb="media/video/thumb/06.jpg" data-title="Video 6"></div>



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

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

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

        <div class="mvp-playlist-item" data-type="video" data-path="media/video/04.mp4" data-thumb="media/video/thumb/04.jpg" data-title="Video 10"></div>

        <div class="mvp-playlist-item" data-type="video" data-path="media/video/05.mp4" data-thumb="media/video/thumb/05.jpg" data-title="Video 11"></div>

        <div class="mvp-playlist-item" data-type="video" data-path="media/video/06.mp4" data-thumb="media/video/thumb/06.jpg" data-title="Video 12"></div>

    </div>
</div>

data-add-more-on-total-scroll - activate this feature
data-add-more-num-results - total number of your videos
data-add-more-limit - number of videos to show on start and each new load

useLoadMoreBtn:true

player.addMore();

0
00:00:00.000 --> 00:00:10.000
This is one very long title indeed#img=data/chapters/thumbs/ch0.png

1
00:00:10.000 --> 00:00:13.500
Guidance#img=data/chapters/thumbs/ch10.png

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

{
    type:'video',
    path:'media/video/03.mp4',
    poster:'media/video/poster/03.jpg',
    chapters:'data/chapters/1.vtt'

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

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

{
    type:'video',
    path:'media/video/03.mp4',
    poster:'media/video/poster/03.jpg',
    chapters:'data/chapters/1.vtt',
    duration:33

useMobileChapterMenu:true

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

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

</div>

{
    type:'video',
    path:'media/video/01.mp4',
    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'
        }
    ],

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

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

</div>

useTranscript:true

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

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

</div>

syncTranscriptWithSubs:true 

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

    <div class="playlist-test">

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

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

    </div>
            
</div>                

globalPlaylistData:{

    start:5,
    end:10,

    playbackRate:2,

    pwd:'202cb962ac59075b964b07152d234b70',//password = 123

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

    //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"
        }
    ]

    //annotations
    annotationSection: document.getElementById('mvp-annotation-section1')

}

<div class="mvp-playlist-item" data-type="video" data-path="video-url" data-playlist-icons='[{"title": "Spotify", "url": "https://spotify.com", "target":"_blank", "icon": "&#xf1bc", "rel": "nofollow"}, {"title": "Youtube", "url": "https://youtube.com", "target":"_blank", "icon": "&#xf167", "rel": "nofollow", "class":"custom-icon-class-here"}]'>
</div>

{
    type:'video',
    path:'video-url',
    playlistIcons: [{"title": "Spotify", "url": "https://spotify.com", "target":"_blank", "icon": "&#xf1bc", "rel": "nofollow"}, {"title": "Youtube", "url": "https://youtube.com", "target":"_blank", "icon": "&#xf167", "rel": "nofollow", "class":"custom-icon-class-here"}],

class - icon custom class 
title - shows on hover 
url - icon url on click 
target - url target  
rel - rel attributte 
icon - SVG, font icon, img tag

<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"/>

useSortButtons:true,
sortButtonsAlign: 'left',//left, right
defaultSort:'newest',// default sort on start: newest, oldest, popular
sortNewestText: 'Newest',
sortOldestText: 'Oldest',
sortPopularText: 'Popular',              

<div id="mvp-playlist-list">
     <div class="playlist-video1">
         <div class="mvp-playlist-item" data-type="video" data-path="VIDEO_URL1" data-date="12/22/2022" data-play-count="13444"></div>
         <div class="mvp-playlist-item" data-type="video" data-path="VIDEO_URL2" data-date="10/01/2023" data-play-count="75413444"></div>
     </div>
 </div>

data-date = MM/DD/YYYY

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

    <div class="playlist-test">

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

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

    </div>
            
</div>                

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

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

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

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

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

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

});

<div class="my-video-playlist">
    <div class="mvp-playlist-item" data-type="video" data-path="VIDEO_URL">
        <div class="mvp-custom-playlist-item-description">
            <div class="my-class">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
    </div>
</div>

<div class="my-video-playlist">
    <div class="mvp-playlist-item" data-type="video" data-path="VIDEO_URL">
        <div class="mvp-custom-playlist-item-content">
            <div class="my-class">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
    </div>
</div>

    var player, player2;

    document.addEventListener("DOMContentLoaded", function(event) { 

        //first player
        var settings = {
            instanceName:"player1",
            activePlaylist:".playlist-video",
            skin:'aviva',
            ... (other player settings)
        }

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


        //second player
        var settings2 = {
            instanceName:"player2",
            activePlaylist:".playlist-video",
            skin:'aviva',
            ... (other player settings)
        }

        player2 = new mvp(document.getElementById("wrapper2"), settings2);

    });

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

<div id="wrapper2"></div>

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

    <div class="playlist-video"> 
        ...
    </div>

</div>

useShare:true / false - use default share (If set to false, sharemanager.js will not be loaded in the player)

useShare: true/false,
useShareFacebook: true,
useShareTwitter: true,
useShareTumblr: true,
useShareWhatsApp: true,
useShareReddit: true,
useShareDigg: true,
useShareLinkedIn: true,
useSharePinterest: true,
useShareEmail: true,
useShareSms: true,

useNativeShare:true / false - use native browser share where available (does not require sharemanager.js). 
nativeShareMedia:true / false - share audio url with native share (same domain restriction applies)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    });

    

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

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

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

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

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

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

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

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

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

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

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

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

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

    });

    

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

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

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

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

    });

    

var player;  
document.addEventListener("DOMContentLoaded", function(event) { 

    var settings = {
        volume:0.5,
        autoPlay:true
        .....
    }

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

}

player.playMedia(); //Play current media

player.playMedia(); //Play current media


player.pauseMedia(); //Pause current media


player.togglePlayback(); //Toggle current media (pause/play)


player.nextMedia(); //Play next media


player.previousMedia(); //Play previous media


/* set volume (0-1) */
----------------------------------
player.setVolume(0); //Set volume (0)
player.setVolume(0.5); //Set volume (0.5)
player.setVolume(1); //Set volume (1)

player.toggleMute(); //Toggle mute



player.toggleRandom(); //Set random playlist playback (true/false/toggle)
player.toggleLoop(); //Set playlist loop (when playlist reaches end) (true/false/toggle)


player.toggleInfo(); //Toggle description panel (true/false/toggle)
player.toggleShare(); //Toggle share panel (true/false/toggle)
player.togglePlaylist(); //Toggle playlist (true/false/toggle)
player.toggleFullscreen(); //Toggle fullscreen



/* set playback rate */
--------------------------
player.setPlaybackRate(0.5); //Set playback rate (0.5)
player.setPlaybackRate(1); //Set playback rate (1)
player.setPlaybackRate(2); //Set playback rate (2)
(valid for media type: video, audio, youtube, vimeo)



/* set playback quality */
--------------------------

/* self hosted video */
Example contains 2 qualities (720p, 1080p).
Active quality on start is specified by optional data-quality="720p".
Quality is any string name set by yourself.

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

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

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






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

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

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

</div>

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





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

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

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




/* chapters */
--------------------------
player.previousChapter(); //load previous chapter
player.nextChapter(); //load next chapter





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

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




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

//Load media (format, value)

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

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

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



/* load playlist on demand */
--------------------------
load playlist from html markup

player.loadPlaylist('.playlist-test'); //Load 'playlist-test'
player.loadPlaylist('.playlist-youtube-1'); //Load 'playlist-youtube-1'



load playlist from object markup 

var playlist = {
    type: 'youtube_playlist', 
    path: 'UCgZM50Ig7STDS0l6f_QnrXw'//playlist ID
}
player.loadPlaylistFromObject(playlist);





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

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




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

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

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

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





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

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




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

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

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

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





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


player.destroyPlaylistOnLightboxClose();//remove all tracks after player type lightbox close

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

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



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


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

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



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

player.destroyPlaylist(); //Destroy current playlist

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




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

player.getPlaylistLength(); //get playlist length

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

player.getMediaPlaying(); //get media playing




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





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





/* popup */
--------------------------
player.closePopup(); //close popup






/* resize */
--------------------------
player.resize(); //resize player so it can get correct size. Are you using this in a tab maybe where the parent container is hidden (css display none)? If so, you need to initialize the player after its being shown in tab or call player.resize() API method so the player can correctly resize itself!






/* offline image */
--------------------------
//if you have offline image in settings and you want to remove it before playing a stream (or new video)

player.setOfflineImage(); //clear offline image (no parameters)

player.setOfflineImage(url); //set offline image (load new offline image)

player.showOfflineImage();//show offline image (if it was previously set using setOfflineImage)

player.hideOfflineImage();//hide offline image








    

video_type
video_name
video_url
current_time
duration

complete 
play
pause
download

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

AddType video/mp4 .mp4 .m4v

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

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