Modern Video Player
jQuery
Thank you for purchase. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form on the link.
Installation
Include the css and javascript code into HEAD section of the page:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.4/css/all.css"/><!-- font icons -->
<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css" media="all"/><!-- playlist scroll -->
<link rel="stylesheet" type="text/css" href="css/mvp.css"/><!-- main plugin css -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/new.js"></script><!-- main plugin js -->
Copy player HTML markup in BODY section of the page:
<div id="mvp-wrapper" class="LAYOUT CLASSES GO HERE">
...
</div>
mvp-wrapper classes define player layout:
Layout: mvp-vrb - playlist vertical right bottom mvp-vlb - playlist vertical left bottom mvp-vb - playlist vertical bottom mvp-ht - playlist horizontal top mvp-bt - playlist horizontal bottom outer - playlist outer (outside of player, free floting) wall - playlist wall (grid) mvp-layout-100 - wrapper fullscreen fixed layout (100% of the page) mvp-no-playlist - dont use visible playlist (also do remove mvp-playlist-toggle button from HTML markup which is used to open/close playlist) Navigation type: mvp-nt-scroll - navigation type scroll mvp-nt-buttons - navigation type buttons mvp-nt-hover - navigation type hover (mouse move) Playlist item description: (for mvp-vrb, mvp-vr, mvp-vlb, mvp-vl, mvp-vb, mvp-ht, mvp-bt) mvp-ps-dot - playlist item description over thumbnail mvp-ps-drot - playlist item description right of thumbnail (for outer, wall) mvp-ps-gdot - playlist item description over thumbnail mvp-ps-gdbt - playlist item description below Playlist info animation on mouse over (for mvp-ps-dot, mvp-ps-gdot): mvp-pia1 - slide from left mvp-pia2 - slide from bottom mvp-pia3 - opacity mvp-pia4 - slide from bottom both info and thumbnail Skins: mvp-skin-dark-flat mvp-skin-light-flat mvp-skin-gray-flat mvp-skin-transparent-flatNotes: Navigation type buttons requires these elements in HTML (mvp-nav-backward, mvp-nav-forward). Navigation type scroll does not use them so they are not part of wrapper markup by default.
<div class="mvp-playlist-holder">
<div class="mvp-playlist-inner">
<div class="mvp-playlist-content"></div>
<div class="mvp-nav-backward"><i class="fa fa-caret-left" aria-hidden="true"></i></div>
<div class="mvp-nav-forward"><i class="fa fa-caret-right" aria-hidden="true"></i></div>
</div>
</div>
Initialize the plugin with settings (see configuration):
<script type="text/javascript">
jQuery(document).ready(function($) {
var settings = {
...
};
mvpjq("#mvp-wrapper").mvp(settings);
});
</script>
mvpjq is a reference to jQuery.
Check also Working with playlist section.
Configuration
All player options that can be set when initalizing plugin:
<script type="text/javascript">
var settings = {
...
};
</script>
Parameters:
| Parameter | Value | description |
|---|---|---|
| instanceName | Name of the player instance (String), can be used for api (no spacing or special chars) | |
| sourcePath | Path to plugin root | |
| activePlaylist | #id | Active playlist on player start (playlist id attribute from mvp-playlist-list element). Leave empty for none. |
| activeItem | Number | Active media to start with on player load (-1 = none, 0 = first, 1 = second...) |
| volume | 0-1 | Media volume |
| autoPlay | true / false | Auto play media. Defaults to false on mobile. |
| autoPlayAfterFirst | true / false | Auto play media after first media has been manually started. Useful if you want to start autoplaying after first media has been manually started. |
| autoPlayInViewport | true / false | Start playing media when player is visible on the page. Disabled on mobile. |
| forceMutedAutoplay | true / false | Force muted autoplay for video. This can overcome some browser recent changes (like Chrome) which prevents autoplay. Will auto mute the video which is required for this feature to work. |
| aspectRatio | 0 / 1 / 2 | Applicable for video, images, Youtube or Vimeo chromeless players (requires custom width and height set). Set how media displays in player; possible values: 0 = original, 1 = fit-inside, 2 = fit-outside |
| preload | auto/metadata/none | Set video preload attribute. |
| randomPlay | true / false | Randomize playlist playback |
| loopingOn | true / false | Loop on playlist end backwards to begining. |
| mediaEndAction | String (next / loop / rewind) | Media end action |
| youtubeAppId | Youtube API key. Go here for the API key: https://console.developers.google.com and create new project, enable YouTube Data API, go to Credentials, create Browser key and enter API key. | |
| youtubePlayerType | chromeless / default | Youtube player type. Default is chromeless (custom controls). |
| youtubePlayerColor | red / white | This parameter specifies the color that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen. |
| youtubeNoCookie | true / false | Serve Youtube videos from No Cookie domain. |
| vimeoPlayerType | chromeless / default | Vimeo player type. Chromeless is only available for videos hosted by a Plus account or higher! If you set chromeless type and video is not hosted by plus account or higher, default vimeo player will be used in that case. Same playlist can contain both vimeo default and chromeless videos. Its not possible to have chromeless player with data-noapi feature! |
| vimeoPlayerColor | hex | Vimeo player color. |
| facebookAppId | Facebook Application ID for social sharing | |
| clickOnBackgroundClosesLightbox | true / false | With lightbox, click on background around lightbox will close lightbox and player. |
| playlistScrollTheme | Scroll theme for navigationType type scroll: http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html | |
| useKeyboardNavigationForPlayback | true / false | Use keyboard navigation for playback (left arrow = seek backward, right arrow = seek forward, page up = previous media, page down = next media, spacebar = pause, m = toggle mute) |
| playlistOpened | true / false | Playlist opened on start |
| blockYoutubeEvents | true / false | Place transparent div over video to prevent clicking on youtube video. |
| rightClickContextMenu | browser / custom / disabled | Right click context menu. Use browser default, custom or disable right click (disable works for self hosted media and Youtube and Vimeo chromeless players). |
| hideQualityMenuOnSingleQuality | true / false | Hide quality menu in controls when there is only single quality available |
| truncatePlaylistDescription | true / false | Shorten playlist item description text and apply (...) on the end. |
| truncateWatch | true / false | if truncatePlaylistDescription is true, keep watching text on window resize and resize if necessary. If your playlist is hidden on start (playlistOpened:false) and you want truncatePlaylistDescription:true, you need to set truncateWatch:true |
| sortableTracks | true / false | Sortable playlist tracks by dragging action. |
| togglePlaybackOnMultipleInstances | true / false | Pause one player if other is playing when multiple instances in same page. |
| embedWidth | 1000px | Embed code iframe width. For example 1000px or '100%' |
| embedHeight | 560px | Embed code iframe height. |
| embedSrc | "Place your embed code here" | Embed code iframe source. Default is window.location.href |
| hidePlaylistOnFullscreenEnter | true / false | Hide playlist on fullscreen enter. |
| focusVideoOnActive | true / false | Scroll y to video on new media selected. Disabled on mobile. |
| verticalBottomSepearator | number | The limit for when vertical playlist drops below player on narrow screens. |
| playlistBottomHeight | number | Playlist height in playlistPosition left_bottom / right_bottom. Default is 300. |
| playlistSideWidth | number | Vertical playlist width in playlistPosition left_bottom / left / right_bottom / right. Default is 290. |
| playerRatio | number | Aspect ratio of video area. Set video area ratio to fit your videos, for example 1.333333 = 4/3. Default is 16/9 (1.777777) |
| lightboxMaxWidth | number | Max width of lightbox (height is auto calculated based on ratio). Default is 920. |
| calculateGrid | true / false | Layouts with playlistPosition "outer" can have thumbnail grid auto calculated based on breakpoints supplied instead of css media queries, example demos (navigation_outer.html, lightbox.html) |
| breakPoints | Javascript breakpoints on "wrapper" element on which grid is calculated, example: breakPointArr:[ {width:0, column:1, gutter:0}, {width:500, column:2, gutter:0}, {width:700, column:3, gutter:10}, {width:1100, column:4, gutter:10}, {width:1600, column:5, gutter:10} ] Below 500px, use 1 column, 0 spacing between grid boxes below 700px use 2 columns, 0 spacing between grid boxes below 1100px use 3 columns, 10 spacing between grid boxes etc... |
|
| subtitleOffText | Subtitle Off menu item text. Default "Disabled". | |
| playAdsOnlyOnce | true / false | Play ads only once per main media. |
| showAnnotationsOnlyOnce | true / false | Show annotations only once per main media. |
| showInterfaceOnMediaStart | true / false | Show player controls when media starts. Default true. |
| rememberPlaybackPosition | true / false | Remember playback position on new page load (volume, active item, current time). |
| playbackPositionKey | string (no spacing or special characters) | Unique string identifier for Remember playback position feature (for example: 'mvp-playback-position') |
| useMobileNativePlayer | true / false | Use mobile native player on IOS. Note: if true, this will loose ability to play in browser and have any of the custom elements above the media like subtitles, annotations... etc |
| useGa | true / false | Use Google Analytics |
| gaTrackingId | string 'UA-XXXXX-Y' | Google Analytics tracking ID. Get tracking ID here |
| useSwipeNavigation | true / false | Use swipe navigation on touch sensitive devices to move to next or previous media. Note: Works with self hosted audio, video or images, Youtube or Vimeo chromeless players. It does not work with 360 images or videos! |
| limitDescriptionText | number | Limit number of characters in description text. Enter number for example 100. |
| minimizeOnScroll | true / false | Minimize on page scroll when player gets out of visible area. Example demo minimize_on_scroll.html |
| minimizeClass | class name | Add class which will be attached to player on minimize. |
| displayPosterOnMobile | true / false | Display poster on mobile instead of playing media to preserve bandwidth. Note: each media in playlist needs to have poster defined for this to work. |
| playlistItemContent | Select content to show in playlist items. Default is: 'title,description' (Possible values are 'title,date,description', order can be changed) | |
| dynamicSubtitleSize | true / false | Change subtitle size based on player width. |
| showStreamVideoBitrateMenu | true / false | Create bitrate menu for hls, dash streaming. |
| showStreamAudioBitrateMenu | true / false | Create bitrate menu for hls, dash streaming. |
| seekTime | number | Seek time value for seek backward / seek forward commands |
Working with playlist
This section explains how to load a playlist on start.
There are 2 ways to load a playlist on start:
1. By placing playlist items directly inside div class="mvp-playlist-content" element (aka "witout processing").
This can be self hosted media (video, audio, images) or Youtube single and Vimeo single videos with data-noapi attribute (data-noapi means do not use Youtube or Vimeo api to retrieve video thumbnails and description, in which case you are expected to provide your own instead, if you need them). This will make for faster load of Youtube and Vimeo single videos on start.
When using this make sure activePlaylist in settings in empty:
activePlaylist:"",/* active playlist on player start. Leave empty for none. */
Usage example (mp4 video and youtube single video):
<div class="mvp-playlist-content">
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}' data-poster="media/video/poster/01.jpg">
<div class="mvp-playlist-thumb">
<img class="mvp-thumbimg" src="media/video/thumb/01.jpg" alt="">
</div>
<div class="mvp-playlist-info">
<span class="mvp-playlist-title">Video title goes here</span>
<span class="mvp-playlist-description">Self hosted video. Commodo vitae, tempor eu, urna eu mi hendrerit. Maecenas eu erat condimentum.</span>
</div>
</div>
<div class="mvp-playlist-item" data-type="youtube_single" data-path="az_TlQMRaMI" data-noapi data-poster="media/yt/01.jpg">
<div class="mvp-playlist-thumb">
<img class="mvp-thumbimg" src="https://i.ytimg.com/vi/az_TlQMRaMI/mqdefault.jpg" alt="">
</div>
<div class="mvp-playlist-info">
<span class="mvp-playlist-title">Youtube video goes here 1</span>
<span class="mvp-playlist-description">This Fashion Commercial is style Preview of our Resort wear 2016 and Spring Summer 2016 Collection.</span>
</div>
</div>
</div>
Typical playlist item markup looks like this:
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-poster="media/video/poster/01.jpg">
<div class="mvp-playlist-thumb">
<img class="mvp-thumbimg" src="media/video/thumb/01.jpg" alt="">
</div>
<div class="mvp-playlist-info">
<span class="mvp-playlist-title">Video title goes here</span>
<span class="mvp-playlist-description">Self hosted video. Commodo vitae, tempor eu, urna eu mi hendrerit. Maecenas eu erat condimentum.</span>
</div>
</div>
The same markup can be applied for Youtube or Vimeo single videos (you can supply video description and thumbnails manually):
<div class="mvp-playlist-item" data-type="youtube_single" data-path="az_TlQMRaMI" data-noapi>
<div class="mvp-playlist-thumb">
<img class="mvp-thumbimg" src="https://i.ytimg.com/vi/az_TlQMRaMI/mqdefault.jpg" alt="">
</div>
<div class="mvp-playlist-info">
<span class="mvp-playlist-title">Youtube video goes here</span>
<span class="mvp-playlist-description">This Fashion Commercial is style Preview of our Resort wear 2016 and Spring Summer 2016 Collection.</span>
</div>
</div>
2. By loading a playlist from div id="mvp-playlist-list" element (aka "wit processing").
When using this make sure activePlaylist in settings in pointing to that element:
activePlaylist:".playlist-youtube-1",/* active playlist on player start. Leave empty for none. */
<div id="mvp-playlist-list">
<div class="playlist-youtube-1">
<div class="mvp-playlist-item" data-type="youtube_playlist" data-path="PLFgquLnL59alCl_2TQvOiD5Vgm1hCaGSI" data-limit="10"></div>
</div>
</div>
api.html demo contains all possible examples.
Self hosted video
Example:
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}, {"quality": "1280p", "mp4": "media/video/01_1280p.mp4"}, {"quality": "720p", "mp4": "media/video/01_720p.mp4"}]' data-quality="1280p" data-poster="media/video/poster/01.jpg" data-download="media/video/01.mp4" data-share="http://www.google.com">
<div class="mvp-playlist-thumb">
<img class="mvp-thumbimg" src="media/video/thumb/01.jpg" alt="">
</div>
<div class="mvp-playlist-info">
<span class="mvp-playlist-title">Video title goes here</span>
<span class="mvp-playlist-description">Self hosted video. Commodo vitae, tempor eu, urna eu mi hendrerit. Maecenas eu erat condimentum.</span>
</div>
<div class="mvp-subtitles">
<div data-label="English" data-src="data/subtitles/sintel-en.vtt" data-default></div>
<div data-label="German" data-src="data/subtitles/sintel-de.vtt"></div>
<div data-label="Spanish" data-src="data/subtitles/sintel-es.vtt"></div>
</div>
</div>
Parameters:
| Parameter | Required | Value |
|---|---|---|
| data-type | yes | video / video_360 (for 360 videos) |
| data-path | yes | path to video quality menu title / video file url (mp4 is supported format) (multiple qualities can be supplied) |
| data-quality | default quality on start | |
| data-poster | video poster | |
| data-poster-frame-time | seconds | set any video frame time as poster for self hosted video. For example, set 2 to display frame at 2 seconds into the video as poster (can be decimal value for example: 2.3). Requires autoPlay:false in settings. Do not set data-poster if you want this feature. |
| mvp-subtitles | List of subtitles. | |
| data-download | download path | |
| data-share | share url link | |
| data-start | media start time in seconds | |
| data-end | media end time in seconds | |
| data-playback-rate | media playback speed: http://www.w3schools.com/tags/av_prop_playbackrate.asp | |
| data-aspect-ratio | overwite aspect ratio from settings. Set how media displays in player; possible values: 0 = original, 1 = fit-inside, 2 = fit-outside | |
| data-end-link | Url link to open on media end (when media finishes). | |
| data-end-target | Url link target (_blank, _parent..) |
Live Streaming
Supported are Apple HLS (example: https://bitmovin-a.akamaihd.net/content/sintel/hls/playlist.m3u8 ) or MPEG DASH live streams (example: https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd ).
Example:
<div class="mvp-playlist-item" data-type="hls" data-path="https://bitmovin-a.akamaihd.net/content/sintel/hls/playlist.m3u8">
<div class="mvp-playlist-thumb">
<img class="mvp-thumbimg" src="media/video/thumb/01.jpg" alt="">
</div>
<div class="mvp-playlist-info">
<span class="mvp-playlist-title">Video title goes here</span>
<span class="mvp-playlist-description">Self hosted video. Commodo vitae, tempor eu, urna eu mi hendrerit. Maecenas eu erat condimentum.</span>
</div>
</div>
Parameters:
| Parameter | Required | Value |
|---|---|---|
| data-type | yes | hls / dash |
| data-path | yes | for hls: path to m3u8 HLS live stream for dash: path to dash manifest live stream |
| data-mp4 | You can add url to mp4 video as a backup for browsers that do not support live streaming. (ios mpeg-dash, ..?) | |
| data-poster | video poster | |
| data-download | download path | |
| data-share | share url link | |
| data-playback-rate | media playback speed: http://www.w3schools.com/tags/av_prop_playbackrate.asp | |
| data-aspect-ratio | overwite aspect ratio from settings. Set how media displays in player; possible values: 0 = original, 1 = fit-inside, 2 = fit-outside | |
| data-end-link | Url link to open on media end (when media finishes). | |
| data-end-target | Url link target (_blank, _parent..) |
Self hosted audio
Example:
<div class="mvp-playlist-item" data-type="audio" data-path='[{"quality": "default", "mp3": "media/audio/02.mp3", "wav": "media/audio/wav/01.wav"},{"quality": "320kbps", "mp3": "media/audio/02_320kbps.mp3"}]' data-quality="320kbps" data-poster="media/audio/poster/01.jpg" data-download="media/audio/01.mp3" data-share="http://www.google.com">
<div class="mvp-playlist-thumb">
<img class="mvp-thumbimg" src="media/audio/thumb/01.jpg" alt="">
</div>
<div class="mvp-playlist-info">
<span class="mvp-playlist-title">Audio title goes here</span>
<span class="mvp-playlist-description">Self hosted audio. Commodo vitae, tempor eu, urna eu mi hendrerit. Maecenas eu erat condimentum.</span>
</div>
<div class="mvp-subtitles">
<div data-label="English" data-src="data/subtitles/sintel-en.vtt" data-default></div>
<div data-label="German" data-src="data/subtitles/sintel-de.vtt"></div>
<div data-label="Spanish" data-src="data/subtitles/sintel-es.vtt"></div>
</div>
</div>
Parameters:
| Parameter | Required | Value |
|---|---|---|
| data-type | yes | audio |
| data-path | yes | path to audio quality menu title / audio file url (mp3, wav are supported formats, wav takes priority over mp3 if supplied and supported by browser) (multiple qualities can be supplied). Mp3 format is supported in all browsers. |
| data-quality | default quality on start | |
| data-poster | audio poster | |
| mvp-subtitles | List of subtitles. | |
| data-download | download path | |
| data-share | share url link | |
| data-start | media start time in seconds | |
| data-end | media end time in seconds | |
| data-playback-rate | media playback speed: http://www.w3schools.com/tags/av_prop_playbackrate.asp | |
| data-end-link | Url link to open on media end (when media finishes). | |
| data-end-target | Url link target (_blank, _parent..) |
Self hosted images
Example:
<div class="mvp-playlist-item" data-type="image" data-path='[{"quality": "default", "image": "media/image/01.jpg"}' data-download="media/image/01.jpg" data-share="http://www.google.com" data-duration="5">
<div class="mvp-playlist-thumb">
<img class="mvp-thumbimg" src="media/image/thumb/01.jpg" alt="">
</div>
<div class="mvp-playlist-info">
<span class="mvp-playlist-title">Image title goes here</span>
<span class="mvp-playlist-description">Custom description. Commodo vitae, tempor eu, urna eu mi hendrerit. Maecenas eu erat condimentum.</span>
</div>
</div>
Parameters:
| Parameter | Required | Value |
|---|---|---|
| data-type | yes | image / image_360 (for 360 images) |
| data-path | yes | path to image quality menu title / image file url (multiple qualities can be supplied) |
| data-quality | default quality on start | |
| data-download | download path | |
| data-share | share url link | |
| data-duration | duration (how long to show the image, in seconds) | |
| data-aspect-ratio | overwite aspect ratio from settings. Set how media displays in player; possible values: 0 = original, 1 = fit-inside, 2 = fit-outside | |
| data-end-link | Url link to open on media end (when media finishes). | |
| data-end-target | Url link target (_blank, _parent..) |
Youtube
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 Browser key and enter API key.
Tutorial on how to create Youtube API key: https://www.youtube.com/watch?v=pJSkp719HeE
Note:
Youtube player type: default / chromeless. This can be adjusted in configuration
Youtube player can use Youtube "default" controls or custom controls as "chromeless" player.
Examples:
Youtube single video:
<div class="mvp-playlist-item" data-type="youtube_single" data-path="5zYArkwq2PQ"></div>
You can also add Youtube single video directly to playlist without processing it with API using data-noapi attribute (and set your own custom thumbnail, title and description):
<div class="mvp-playlist-item" data-type="youtube_single" data-path="az_TlQMRaMI" data-noapi>
<div class="mvp-playlist-thumb">
<img class="mvp-thumbimg" src="https://i.ytimg.com/vi/az_TlQMRaMI/mqdefault.jpg" alt="">
</div>
<div class="mvp-playlist-info">
<span class="mvp-playlist-title">Youtube video goes here</span>
<span class="mvp-playlist-description">This Fashion Commercial is style Preview of our Resort wear 2016 and Spring Summer 2016 Collection.</span>
</div>
</div>
Youtube single video list (multiple videos spearated by comma):
<div class="mvp-playlist-item" data-type="youtube_single_list" data-path="5zYArkwq2PQ,M4z90wlwYs8,89s2DVcsoyk"></div>
Youtube playlist:
<div class="mvp-playlist-item" data-type="youtube_playlist" data-path="PLijk13kqreIe83BAajgYNGpsx57keRRNz" data-limit="10"></div>
Youtube video query (search term):
<div class="mvp-playlist-item" data-type="youtube_video_query" data-path="sport" data-limit="12" data-sort="relevance"></div>
Youtube channel:
<div class="mvp-playlist-item" data-type="youtube_channel" data-path="UCNL1ZadSjHpjm4q9j2sVtOA" data-limit="22"></div>
Parameters:
| Parameter | Required | Value |
|---|---|---|
| data-type | yes | youtube_single / youtube_single_list / youtube_playlist / youtube_video_query / youtube_channel |
| data-path | yes | single video id / playlist id / channel id |
| data-limit | number of results to retrieve (default all) | |
| data-load-more | Load more videos on total scroll when used with Navigation type scroll or buttons.
Works with Youtube media (playlist, channel, video search) or Vimeo (album, group, channel, video search). Works in conjuntion with data-limit playlist option (for example, set data-limit="10" which will show 10 videos in playlist on start, then on total scroll, it will load another 10, and so on.. (max data-limit for this option when Vimeo is used is 100). | |
| mvp-subtitles | List of subtitles. | |
| data-download | custom download path | |
| data-share | custom share url link | |
| data-start | media start time in seconds | |
| data-end | media end time in seconds | |
| data-playback-rate | media playback speed: http://www.w3schools.com/tags/av_prop_playbackrate.asp | |
| data-quality | set playback quality on start: https://developers.google.com/youtube/iframe_api_reference#Playback_quality | |
| data-aspect-ratio | overwite aspect ratio from settings. Set how media displays in player; possible values: 0 = original, 1 = fit-inside, 2 = fit-outside | |
| data-width / data-height | If you want to get rid of black bars (which sometimes appear above / below of the video) for Youtube or Vimeo video (using fit-outside with aspectRatio:2 in settings), its necessary to supply video dimensions. For example data-width="640" data-height="360". Tip: use data-width="16" data-height="9" to achieve 16/9 video ratio. Only for Youtube or Vimeo chromeless player. | |
| data-thumb | custom thumbnail url | |
| data-poster | video poster | |
| data-title | custom title | |
| data-description | custom description | |
| data-is360 | Add this attribute if you use youtube single 360 videos with data-noapi feature, so 360 videos can be detected. | |
| data-end-link | Url link to open on media end (when media finishes). | |
| data-end-target | Url link target (_blank, _parent..) | |
| data-alt | string | thumbnail alt text, default is title. |
Vimeo
Vimeo requires API key, you need to register new application: https://developer.vimeo.com/apps/new and from Authentication tab get:
Generate Access Token with Public and Private scope. To get video download links you need Video Files scope as well.
Client Identifier (key), Client Secret and Access Token and enter them in the following file: includes / vimeo / vimeo_api.php
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="84503186"></div>
You can also add Vimeo single video directly to playlist without processing it with API using data-noapi attribute (and set your own custom thumbnail, title and description):
<div class="mvp-playlist-item" data-type="vimeo_single" data-path="84503186" data-noapi>
<div class="mvp-playlist-thumb">
<img class="mvp-thumbimg" src="https://i.vimeocdn.com/video/default-caution_130x73.jpg" alt="">
</div>
<div class="mvp-playlist-info">
<span class="mvp-playlist-title">Vimeo video goes here</span>
<span class="mvp-playlist-description">OTBMIAMI Presents High Fashion with We The Fresh clothing. Music: Platinum Kush clouds @AIMISMIA</span>
</div>
</div>
Search for videos: https://developer.vimeo.com/api/playground/videos
<div class="mvp-playlist-item" data-type="vimeo_video_query" data-path="mercedes" data-limit="20" data-sort="relevant"></div>
Get a list of the videos in an group: https://developer.vimeo.com/api/playground/groups/{group_id}/videos
<div class="mvp-playlist-item" data-type="vimeo_group" data-path="artinfx" data-limit="30" data-sort="date"></div>
Get a list of the videos in an channel: https://developer.vimeo.com/api/playground/channels/{channel_id}/videos
<div class="mvp-playlist-item" data-type="vimeo_channel" data-path="mtb" data-limit="11" data-sort="date"></div>
Get a list of the videos in an album: https://developer.vimeo.com/api/playground/users/{user_id}/albums/{album_id}/videos
<div class="mvp-playlist-item" data-type="vimeo_user_album" data-user-id="filmevondraussen" data-path="4439714" data-limit="21" data-sort="date" data-sort-direction="desc"></div>
Parameters:
| Parameter | Required | Value |
|---|---|---|
| data-type | yes | vimeo_single / vimeo_video_query / vimeo_group / vimeo_channel / vimeo_user_album |
| data-path | yes | |
| data-user-id | yes (for vimeo_user_album) | user id |
| data-limit | number of results to retrieve (default all) | |
| data-load-more | Load more videos on total scroll when used with Navigation type scroll or buttons.
Works with Youtube media (playlist, channel, video search) or Vimeo (album, group, channel, video search). Works in conjuntion with data-limit playlist option (for example, set data-limit="10" which will show 10 videos in playlist on start, then on total scroll, it will load another 10, and so on.. (max data-limit for this option when Vimeo is used is 100). | |
| data-start | media start time in seconds | |
| data-end | media end time in seconds | |
| data-playback-rate | media playback speed: http://www.w3schools.com/tags/av_prop_playbackrate.asp | |
| data-width / data-height | If you want for vimeo video to cover whole screen (fit-outside with aspectRatio:2 in settings), its necessary to supply video dimensions. For example data-width="640" data-height="360". Tip: use data-width="16" data-height="9" to achieve 16/9 video ratio. Only for Vimeo chromeless player. | |
| data-thumb | custom thumbnail url | |
| data-poster | video poster | |
| data-title | custom title | |
| data-description | custom description | |
| data-is360 | Add this attribute if video is 360. | |
| data-end-link | Url link to open on media end (when media finishes). | |
| data-end-target | Url link target (_blank, _parent..) | |
| data-alt | string | thumbnail alt text, default is title. |
Iframe
Load any iframe inside the player.
Examples that need to be processed (supply path to iframe inside data-path attribute):
ustream.tv:
<div class="mvp-playlist-item" data-type="iframe" data-path="https://www.dailymotion.com/embed/video/x2hixvz?autoplay=true&related=0" data-thumb="THUMB_HERE" data-title="Daily Motion Video here" data-description="DESCRIPTION_HERE"></div>
You can also add iframe directly to playlist without processing it with API using data-noapi attribute (and set your own custom thumbnail, title and description):
Examples:
Wistia:
<div class="mvp-playlist-item" data-type="iframe" data-path="https://fast.wistia.net/embed/iframe/lyci2n3zo6?autoplay=false" data-noapi>
<div class="mvp-playlist-thumb">
<img class="mvp-thumbimg" src="media/other/wistia.jpg" alt="">
</div>
<div class="mvp-playlist-info">
<span class="mvp-playlist-title">Wistia Video here</span>
<span class="mvp-playlist-description">Wistia provides simple software for creating, managing, and sharing videos for business.</span>
</div>
</div>
Google maps:
<div class="mvp-playlist-item" data-type="iframe" data-path="https://maps.google.com/maps?q=university of san francisco&t=&z=13&ie=UTF8&iwloc=&output=embed" data-noapi>
<div class="mvp-playlist-thumb">
<img class="mvp-thumbimg" src="media/other/maps.jpg" alt="">
</div>
<div class="mvp-playlist-info">
<span class="mvp-playlist-title">Google Maps embed here</span>
<span class="mvp-playlist-description">The Google Maps Embed API lets you place an interactive map, or Street View panorama in your website.</span>
</div>
</div>
Ustream.tv:
<div class="mvp-playlist-item" data-type="iframe" data-path="https://www.dailymotion.com/embed/video/x2hixvz?autoplay=true&related=0" data-noapi>
<div class="mvp-playlist-thumb">
<img class="mvp-thumbimg" src="THUMB_HERE" alt="">
</div>
<div class="mvp-playlist-info">
<span class="mvp-playlist-title">Daily Motion Video here</span>
<span class="mvp-playlist-description">GIGI for GUESS Backstage ADV Campaign Spring 2015 by Fashion Channel</span>
</div>
</div>
Parameters:
| Parameter | Required | Value |
|---|---|---|
| data-type | yes | iframe |
| data-path | yes | iframe url |
| data-thumb | custom thumbnail url | |
| data-title | custom title | |
| data-description | custom description |
Reading files from folders
Reading video files from folders
Example:
<div class="mvp-playlist-item" data-type="folder_video" data-path="../media/video/" data-limit="5"></div>
Parameters:
| Parameter | Required | Value |
|---|---|---|
| data-type | yes | folder_video |
| data-path | yes | relative folder path to the plugin "includes" directory (where folder_parser.php file is located) |
| data-limit | number of results to retrieve (default all) | |
| data-download | custom download path | |
| data-share | custom share url link | |
| data-start | media start time in seconds | |
| data-end | media end time in seconds | |
| data-playback-rate | media playback speed: http://www.w3schools.com/tags/av_prop_playbackrate.asp |
Required folder organization
You need to have following organization when loading files from folders, example:
<div class="mvp-playlist-item" data-type="folder_video" data-path="../media/video/"></div>
Inside 'video' directory, we have 2 folders: 'poster' (where poster files are located) and 'thumb' (where thumbnails for the playlist are located)
Equivalent video and poster/thumbnail file names need to be the same!
So you end up with this structure in your folder:
video directory
video1.mp4//video file
video2.mp4
...
poster directory
video1.jpg//poster file
video2.jpg
...
thumb directory
video1.jpg//thumb file
video2.jpg
...
Rules:
Multiple qualities are not allowed when reading folders! So you cannot have for example (video1.mp4, video1_HD.mp4 inside a folder), this will simply be processed as different video, not different quality.
Required extension for video files is mp4. Required extension for poster and image thumbnails is jpg.
Reading audio files from folders
Example:
<div class="mvp-playlist-item" data-type="folder_audio" data-path="../media/audio/" data-limit="5"></div>
Parameters:
| Parameter | Required | Value |
|---|---|---|
| data-type | yes | folder_audio |
| data-path | yes | relative folder path to the plugin "includes" directory (where folder_parser.php file is located) |
| data-limit | number of results to retrieve (default all) | |
| data-download | custom download path | |
| data-share | custom share url link | |
| data-start | media start time in seconds | |
| data-end | media end time in seconds | |
| data-playback-rate | media playback speed: http://www.w3schools.com/tags/av_prop_playbackrate.asp |
Required folder organization
You need to have following organization when loading files from folders, example:
<div class="mvp-playlist-item" data-type="folder_audio" data-path="../media/audio/"></div>
Inside 'audio' directory, we have 2 folders: 'poster' (where poster files are located) and 'thumb' (where thumbnails for the playlist are located)
Equivalent audio and poster/thumbnail file names need to be the same!
So you end up with this structure in your folder:
audio directory
audio1.mp3//audio file
audio2.mp3
...
poster directory
audio1.jpg//poster file
audio2.jpg
...
thumb directory
audio1.jpg//thumb file
audio2.jpg
...
Rules:
Multiple qualities are not allowed when reading folders! So you cannot have for example (audio1.mp3, audio1_320kbps.mp3 inside a folder), this will simply be processed as different audio, not different quality.
Required extension for audio files is mp3, wav. Required extension for poster and image thumbnails is jpg.
Reading image files from folders
Example:
<div class="mvp-playlist-item" data-type="folder_image" data-path="../media/image/" data-limit="5"></div>
Parameters:
| Parameter | Required | Value |
|---|---|---|
| data-type | yes | folder_image |
| data-path | yes | relative folder path to the plugin "includes" directory (where folder_parser.php file is located) |
| data-limit | number of results to retrieve (default all) | |
| data-download | custom download path | |
| data-share | custom share url link | |
| data-duration | duration (how long to show the image, in seconds) |
Required folder organization
You need to have following organization when loading files from folders, example:
<div class="mvp-playlist-item" data-type="folder_image" data-path="../media/image/"></div>
Inside 'image' directory, we have 1 folder: 'thumb' (where thumbnails for the playlist are located)
Equivalent image and thumbnail file names need to be the same!
So you end up with this structure in your folder:
image directory
image1.jpg//large file
image2.jpg
...
thumb directory
image1.jpg//thumb file
image2.jpg
...
Rules:
Multiple qualities are not allowed when reading folders! So you cannot have for example (image1.jpg, image1_highres.jpg inside a folder), this will simply be processed as different image, not different quality.
Required extension for image files is jpg, jpeg, png, gif.
XML
Example:
<div class="playlist-xml" class="mvp-playlist-item" data-type="xml" data-path="data/xml/example.xml"></div>
Only important rule is that XML playlist markup is exactly the same as the playlist markup in HTML!
XML examples are provided inside package data/xml directory.
Parameters:
| Parameter | Required | Value |
|---|---|---|
| data-type | yes | xml |
| data-path | yes | xml url |
Encryption
You can encrypt self hosted media paths (video, audio, images) and subtitles with base64 to hide real url from page source.
To do so preprend the following string 'ebsfm:' before encrypted file path in data-path attribute.
Example normal:
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]'>
<div class="mvp-playlist-thumb">
<img class="mvp-thumbimg" src="media/video/thumb/01.jpg" alt="">
</div>
<div class="mvp-playlist-info">
<span class="mvp-playlist-title">Video title goes here</span>
<span class="mvp-playlist-description">Self hosted video. Commodo vitae, tempor eu, urna eu mi hendrerit. Maecenas eu erat condimentum.</span>
</div>
</div>
Example encrypted:
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "ebsfm:bWVkaWEvdmlkZW8vMDEubXA0"}]'>
<div class="mvp-playlist-thumb">
<img class="mvp-thumbimg" src="media/video/thumb/01.jpg" alt="">
</div>
<div class="mvp-playlist-info">
<span class="mvp-playlist-title">Video title goes here</span>
<span class="mvp-playlist-description">Self hosted video. Commodo vitae, tempor eu, urna eu mi hendrerit. Maecenas eu erat condimentum.</span>
</div>
</div>
Password protected content
To set password to view specific media add data-pwd attribute to playlist item:
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-pwd="5ebe2294ecd0e0f08eab7690d2a6ee69"></div>
To make password use md5 Hash Generator:
http://www.miraclesalad.com/webtools/md5.phpEnter your password and use hash in data-pwd attribute.
Password can be defined as mvp-global-playlist-data attribute (apply for every item in playlist).
Google Analytics
Requires Google analytics tracking ID which looks like 'UA-XXXXX-Y'
Settings to activate Google analytics:
<script type="text/javascript">
var settings = {
...
useGa:true,
gaTrackingId:'UA-XXXXX-Y'
};
});
</script>
Demo page with Google analytics implemented is ga.html
Adverts
Adverts can be video, audio, 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 mvp-global-playlist-data as global adverts (apply for every item in playlist).
Add preroll advert will play before main media starts. Only one is allowed.
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-poster="media/video/poster/01.jpg">
<div class="mvp-playlist-thumb">
<img class="mvp-thumbimg" src="media/video/thumb/01.jpg" alt="">
</div>
<div class="mvp-playlist-info">
<span class="mvp-playlist-title">Video title goes here</span>
<span class="mvp-playlist-description">Self hosted video. Commodo vitae, tempor eu, urna eu mi hendrerit. Maecenas eu erat condimentum.</span>
</div>
<div class="mvp-ad-section">
<div class="mvp-ad mvp-ad-pre" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/ad_01.mp4"}]' data-skip-enable="10"></div>
</div>
</div>
Add midroll advert will play during main media. Unlimited number can be set.
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-poster="media/video/poster/01.jpg">
<div class="mvp-playlist-thumb">
<img class="mvp-thumbimg" src="media/video/thumb/01.jpg" alt="">
</div>
<div class="mvp-playlist-info">
<span class="mvp-playlist-title">Video title goes here</span>
<span class="mvp-playlist-description">Self hosted video. Commodo vitae, tempor eu, urna eu mi hendrerit. Maecenas eu erat condimentum.</span>
</div>
<div class="mvp-ad-section">
<div class="mvp-ad mvp-ad-mid" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/ad_02.mp4"}]' data-skip-enable="7" data-begin="10"></div>
<div class="mvp-ad mvp-ad-mid" data-type="audio" data-path='[{"quality": "default", "mp3": "media/audio/01.mp3"}]', data-skip-enable="7" data-begin="20" data-poster="media/audio/poster/01.jpg"></div>
<div class="mvp-ad mvp-ad-mid" data-type="youtube_single" data-path="3XJh9n8K3XU" data-skip-enable="3" data-begin="30"></div>
<div class="mvp-ad mvp-ad-mid" data-type="image" data-path='[{"quality": "default", "image": "media/image/01.jpg"}' data-duration="5" data-skip-enable="2" data-begin="40"></div>
</div>
</div>
Add endroll advert will play after main media ends. Only one is allowed.
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-poster="media/video/poster/01.jpg">
<div class="mvp-playlist-thumb">
<img class="mvp-thumbimg" src="media/video/thumb/01.jpg" alt="">
</div>
<div class="mvp-playlist-info">
<span class="mvp-playlist-title">Video title goes here</span>
<span class="mvp-playlist-description">Self hosted video. Commodo vitae, tempor eu, urna eu mi hendrerit. Maecenas eu erat condimentum.</span>
</div>
<div class="mvp-ad-section">
<div class="mvp-ad mvp-ad-end" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/ad_02.mp4"}]' data-skip-enable="7"></div>
</div>
</div>
Adverts can be defined inside mvp-global-playlist-data as global adverts (apply for every item in playlist).
<div id="mvp-playlist-list">
<div class="playlist-test">
<div class="mvp-global-playlist-data">
<div class="mvp-ad-section">
<div class="mvp-ad mvp-ad-pre" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/ad_01.mp4"}]' data-skip-enable="10"></div>
<div class="mvp-ad mvp-ad-mid" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/ad_02.mp4"}]' data-skip-enable="7" data-begin="10"></div>
<div class="mvp-ad mvp-ad-mid" data-type="vimeo_single" data-path="279267531" data-skip-enable="4" data-begin="15"></div>
<div class="mvp-ad mvp-ad-mid" data-type="audio" data-path='[{"quality": "default", "mp3": "media/audio/01.mp3"}]', data-skip-enable="7" data-begin="20" data-poster="media/audio/poster/01.jpg"></div>
<div class="mvp-ad mvp-ad-end" data-type="youtube_single" data-path="pSOoXLRBDuk" data-skip-enable="7"></div>
</div>
</div>
<div class="mvp-playlist-item"...
</div>
</div>
Parameters:
| Parameter | Required | Value |
|---|---|---|
| data-type | yes | video, audio, image, youtube_single, vimeo_single |
| data-path | yes | path video, audio, image, youtube_single, vimeo_single |
| data-skip-enable | When to show skip advert button, in seconds. If emmited, no skip button will be shown. | |
| data-begin | yes for midroll | When to start midroll, in seconds. |
| data-poster | Used with advert type audio. Poster is shown in video area while audio plays. | |
| data-duration | yes for advert type image | How long to show the image, in seconds. |
| data-link | Url link to open when ad is paused. | |
| data-target | Url link target (_blank, _parent..) | |
| data-ad-id | optional parameter to track ads with ad callbacks |
Annotations
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 mvp-global-playlist-data as global annotations (apply for every item in playlist). Additional "id" attribute is added to div class="mvp-annotation-section" and then this can be targeted with CSS.
Annotations can be any HTML, iframe, or AdSense.
Example of HTML annotation:
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-poster="media/video/poster/01.jpg">
<div class="mvp-annotation-section">
<div id="an1" class="mvp-annotation" data-show data-hide>
<span>This is a popup text visible through the whole video. Lorem ipsum dolor sit amet. Link <a href="http://www.google.com" target="_blank">here</a></span>
<div class="mvp-annotation-close" title="Close">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"></path></svg>
</div>
</div>
<div id="an2" class="mvp-annotation" data-show="5" data-hide="15">
<div class="an2-wrap">
<a href="http://www.google.com" target="_blank"><img src="data/ad-placeholder.jpg" alt=""/></a>
<div class="an2-title">Unlimited space</div>
<div class="an2-desc">Your advertizing space goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div>
</div>
<div class="mvp-annotation-close" title="Close">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"></path></svg>
</div>
</div>
<div id="an3" class="mvp-annotation" data-show="20" data-hide="30">
<a href="http://www.google.com" target="_blank"><span>This popup is a link and cannot be closed.</span></a>
</div>
</div>
</div>
Example of iframe annotation:
Notice:
1.
mvp-annotation has also class mvp-iframe
2.
iframe src is about:blank and iframe data-src attribute is actual iframe src! This is so its not loaded until is actually shown in the player.
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-poster="media/video/poster/01.jpg">
<div class="mvp-annotation-section">
<div id="an1" class="mvp-annotation mvp-iframe" data-show data-hide>
<p>This is an iframe</p>
<iframe src="about:blank" data-src="https://www.weather.gov/" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<div class="mvp-annotation-close" title="Close">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"></path></svg>
</div>
</div>
</div>
</div>
Example of AdSense annotation:
Notice:
1.
mvp-annotation has also class mvp-adsense-detail or mvp-adsense-code
2.
AdSense code can be added in 2 ways:
a)
Provide AdSense details (client, slot, width and height, all required attributes):
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-poster="media/video/poster/01.jpg">
<div class="mvp-annotation-section">
<div id="an4" class="mvp-annotation mvp-adsense-detail" data-ad-client="ca-pub-xxxxxxxxxxxxx" data-ad-slot="xxxxxx" data-width="728" data-height="90" data-show data-hide></div>
</div>
</div>
b)
Enter AdSense full code (only ins tag), do not enter script tag here. If you have AdSense CSS, enter it in CSS file.
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-poster="media/video/poster/01.jpg">
<div class="mvp-annotation-section">
<div id="an4" class="mvp-annotation mvp-adsense-code" data-show data-hide>
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-xxxxxxxxxxxxx"
data-ad-slot="xxxxxx"></ins>
</div>
</div>
</div>
Example of annotations defined inside mvp-global-playlist-data as global annotations (apply for every item in playlist):
<div id="mvp-playlist-list">
<div class="playlist-test">
<div class="mvp-global-playlist-data">
<div class="mvp-annotation-section">
<div id="an1" class="mvp-annotation" data-show data-hide>
<span>This is a popup text visible through the whole video. Lorem ipsum dolor sit amet. Link <a href="http://www.google.com" target="_blank">here</a></span>
<div class="mvp-annotation-close mvp-ctl" title="Close"></div>
</div>
<div id="an2" class="mvp-annotation" data-show="5" data-hide="15">
<div class="an2-wrap">
<a href="http://www.google.com" target="_blank"><img src="data/ad-placeholder.jpg" alt=""/></a>
<div class="an2-title">Unlimited space</div>
<div class="an2-desc">Your advertizing space goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div>
</div>
<div class="mvp-annotation-close mvp-ctl" title="Close"></div>
</div>
<div id="an3" class="mvp-annotation" data-show="20" data-hide="30">
<a href="http://www.google.com" target="_blank"><span>This popup is a link and cannot be closed.</span></a>
</div>
</div>
</div>
<div class="mvp-playlist-item"...
</div>
</div>
Anatomy of an annotation:
<div id="an1" class="mvp-annotation" data-show data-hide>
<span>This is a popup text visible through the whole video. Lorem ipsum dolor sit amet. Link <a href="http://www.google.com" target="_blank">here</a></span>
<div class="mvp-annotation-close mvp-annotation-close-tr" title="Close"></div>
</div>
Each annotation element requires class="mvp-annotation" on top level. This element is going to be copied over player video area. Inside any HTML could be added.
Other parameters:
| Parameter | Required | Value |
|---|---|---|
| data-show | yes | Time to show annotations, in seconds. Empty attribute means show on start. |
| data-hide | yes | Time to hide annotations, in seconds. Empty attribute means show till the end. |
Grids
Layouts with playlistPosition "outer" can have thumbnail grid auto calculated based on breakpoints supplied instead of css media queries, example (navigation_outer.html, lightbox.html...)
<script type="text/javascript">
var settings = {
...
calculateGrid:true,
breakPoints:[
{width:0, column:1, gutter:0},
{width:500, column:2, gutter:0},
{width:700, column:3, gutter:10},
{width:1100, column:4, gutter:10},
{width:1600, column:5, gutter:10}
]
};
});
</script>
Below 500px, use 1 column, 0 spacing between grid boxesbelow 700px use 2 columns, 0 spacing between grid boxes
etc...
Seekbar preview thumbnail
Showing preview thumbnails when hovering over seekbar.
Requires sprite of images and vtt file with time/image data for video.
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-preview-seek="data/seek/01.vtt"></div>
Parameters:
| Parameter | Required | Value |
|---|---|---|
| data-preview-seek | yes | Path to vtt file |
Example which already has this implemented is preview_seek.html
Thumbnail hover preview
Show preview when hovering over playlist item thumbnail.
Requires gif image (same size as thumbnail) which will be shown on hover.
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]' data-hover-preview="data/hover/01.gif"></div>
Parameters:
| Parameter | Required | Value |
|---|---|---|
| data-hover-preview | yes | Path to gif file |
Example which already has this implemented is hover_preview.html
Chapters
Requires vtt file with chapter data for video.
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/03.mp4"}]' data-poster="media/video/poster/03.jpg" data-chapters="data/chapters/1.vtt"></div>
Example which already has this implemented is chapters.html
Shorten playlist description
If there is too much text in playlist description, this can be automatically truncated to produce three dots on the end of description like this:
Requires following options in settings:
<script type="text/javascript">
var settings = {
truncatePlaylistDescription:true
...
};
});
</script>
Plugin used: http://dotdotdot.frebsite.nl/
Subtitles
Subtitles can be set for self hosted video, audio and Youtube or Vimeo chromeless players.
Subtitle examples are provided inside package data/subtitles directory.
Example:
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "default", "mp4": "media/video/01.mp4"}]'>
<div class="mvp-subtitles">
<div data-label="English" data-src="data/subtitles/sintel-en.vtt" data-default></div>
<div data-label="German" data-src="data/subtitles/sintel-de.vtt" ></div>
<div data-label="Spanish" data-src="data/subtitles/sintel-es.vtt" ></div>
</div>
</div>
You can also add subtitiles for playlist items that need processing, example:
Youtube single video:
<div class="mvp-playlist-item" data-type="youtube_single" data-path="5zYArkwq2PQ">
<div class="mvp-subtitles">
<div data-label="English" data-src="data/subtitles/sintel-en.vtt" data-default></div>
<div data-label="German" data-src="data/subtitles/sintel-de.vtt" ></div>
<div data-label="Spanish" data-src="data/subtitles/sintel-es.vtt" ></div>
</div>
</div>
Parameters:
| Parameter | Required | Value |
|---|---|---|
| data-label | yes | Subtitle menu name |
| data-src | yes | url to subtitle file (srt / vtt format). Examples provided in data/subtitles directory. |
| data-default | will make subtitle active on start. |
Elements visibility
You can hide certain control buttons / elements on narrow screens.
Example, when wrapper is below 400px show: 'controls', 'play', 'seekbar', 'fullscreen', 'share'
var settings = {
elementsVisibilityArr:[
{width:400, elements:['controls', 'play', 'seekbar', 'fullscreen', 'share']}
};
Example with 2 values, when wrapper is below 600px show: 'controls', 'play', 'seekbar', 'fullscreen', 'share', 'info', 'volume', 'next', 'previous', 'playback_rate', 'pip', when wrapper is below 400px show: 'controls', 'play', 'seekbar', 'fullscreen', 'share'
var settings = {
elementsVisibilityArr:[
{width:600, elements:['controls', 'play', 'seekbar', 'fullscreen', 'share', 'info', 'volume', 'next', 'previous', 'playback_rate', 'pip']},
{width:400, elements:['controls', 'play', 'seekbar', 'fullscreen', 'share']}
]
}
Parameters:
| Parameter | Required | Value |
|---|---|---|
| size | yes | When wrapper element width is below this number. |
| elements | yes | array of elements to show on narrow screen. Possible values: controls (whole controls), seekbar, play (small play button), time, download, share, info, embed, next, previous, seek_backward, seek_forward, rewind, fullscreen, volume, playlist, quality, subtitles (hides subtitle button and subtitles), annotations (hides annotations in player), playback_rate, audio_language (for live streaming), settings (menu controls layout which contains subtitles, playback_rate, audio_language, quality), upnext (up next thumbnail), pip (picture in picture) |
Note that you always need to have 'controls' as value in array because without that it will hide whole controls.
Up Next
Adding data-upnext attribute to playlist data will auto create thumbnail and title for the next media and show it upnext time seconds before media finishes. Applies for the whole playlist.
<div id="mvp-playlist-list">
<div class="playlist-test">
<div class="mvp-global-playlist-data" data-upnext data-upnext-time="20"></div>
<div class="mvp-playlist-item"...
</div>
</div>
Parameters:
| Parameter | Required | Value |
|---|---|---|
| data-upnext | activate up next feature | |
| data-upnext-time | yes | time before media ends to show up next screen. |
Query parameters
URL Parameters available, that can be appended as query string.
| Parameter | Value | description |
|---|---|---|
| media_id | number | Active media to start with on player load (-1 = none, 0 = first, 1 = second...) For example: www.your-domain.com/some-page?media_id=3 (load 4th video) |
| t | number (seconds) | Time in seconds to start playback For example: www.your-domain.com/some-page?t=22 (start playing video at 22 seconds) |
Custom content in playlist items
To add any kind of HTML in playlist items (that are created dynamically) place your HTML in div class="mvp-custom-playlist-item-content":
Example: (div class="foo" will be copied to all playlist items)
<div class="playlist-youtube-3">
<div class="mvp-playlist-item" data-type="youtube_playlist" data-path="PLFgquLnL59alCl_2TQvOiD5Vgm1hCaGSI" data-limit="10">
<div class="mvp-custom-playlist-item-content">
<div class="foo">This div will be copied!</div>
</div>
</div>
</div>
Callbacks / Events
Following callbacks are supported:
player = mvpjq("#mvp-wrapper").mvp(settings).on("setupDone", function(e, data){
//called when plugin has been instantiated and is ready to use api, returns (instance, instanceName)
//console.log(data.instance, data.instanceName);
}).on("mediaRequest", function(e, data){
//called when new media has been requested, returns (instance, instanceName, counter)
}).on("mediaStart", function(e, data){
//called on media start, returns (instance, instanceName, counter)
}).on("mediaPlay", function(e, data){
//called on media play, returns (instance, instanceName, counter)
}).on("mediaPause", function(e, data){
//called on media pause, returns (instance, instanceName, counter)
}).on("mediaEnd", function(e, data){
//called on media end, returns (instance, instanceName, counter)
}).on("playlistStartLoad", function(e, data){
//called on playlist start load, returns (instance, instanceName)
}).on("playlistEndLoad", function(e, data){
//called on playlist end load, returns (instance, instanceName)
}).on("clickPlaylistItem", function(e, data){
//called on playlist item click, returns (instance, instanceName, counter)
}).on("playlistItemDisabled", function(e, data){
//called on playlist item disable, returns (instance, instanceName, item)
}).on("playlistItemEnabled", function(e, data){
//called on playlist item enable, returns (instance, instanceName, item)
}).on("volumeChange", function(e, data){
//called on volume change, returns (instance, instanceName, volume)
}).on("fullscreenBeforeEnter", function(e, data){
//called before fullscreen enter, returns (instance, instanceName)
}).on("fullscreenEnter", function(e, data){
//called on fullscreen enter, returns (instance, instanceName)
}).on("fullscreenExit", function(e, data){
//called on fullscreen exit, returns (instance, instanceName)
}).on("mediaDownload", function(e, data){
//called on media download, returns (instance, instanceName, counter)
//only with google analytics active!
});
Ad callbacks (will trigger when "ad" is playing instead of "normal" media):
player = mvpjq("#mvp-wrapper").mvp(settings).on("adRequest", function(e, data){
//called when new ad has been requested, returns (instance, instanceName, adId)
console.log(data.instance, data.instanceName, data.adId)
}).on("adStart", function(e, data){
//called on ad start, returns (instance, instanceName, adId)
}).on("adPlay", function(e, data){
//called on ad play, returns (instance, instanceName, adId)
}).on("adPause", function(e, data){
//called on ad pause (when ad is clicked), returns (instance, instanceName, adId)
}).on("adEnd", function(e, data){
//called on ad end, returns (instance, instanceName, adId)
}).on("adSkip", function(e, data){
//called when ad is skipped, returns (instance, instanceName, adId)
});
How to use returned parameters:
player.on('mediaStart', function(e, data){
//called on media start, returns (instance, instanceName, counter)
console.log(data.instanceName);
console.log(data.counter);//active item
//get media current time
data.instance.getCurrentTime();
//get media duration
data.instance.getDuration();
});
API methods
Following api methods are included:
player.playMedia(); //Play current media
player.pauseMedia(); //Pause current media
player.togglePlayback(); //Toggle current media (pause/play)
player.nextMedia(); //Play next media
player.previousMedia(); //Play previous media
/* set volume (0-1) */
----------------------------------
player.setVolume(0); //Set volume (0)
player.setVolume(0.5); //Set volume (0.5)
player.setVolume(1); //Set volume (1)
player.toggleMute(); //Toggle mute
player.toggleRandom(); //Set random playlist playback (true/false/toggle)
player.toggleLoop(); //Set playlist loop (when playlist reaches end) (true/false/toggle)
player.toggleInfo(); //Toggle description panel (true/false/toggle)
player.toggleShare(); //Toggle share panel (true/false/toggle)
player.togglePlaylist(); //Toggle playlist (true/false/toggle)
player.toggleFullscreen(); //Toggle fullscreen
/* set playback rate */
--------------------------
player.setPlaybackRate(0.5); //Set playback rate (0.5)
player.setPlaybackRate(1); //Set playback rate (1)
player.setPlaybackRate(2); //Set playback rate (2)
(valid for media type: video, audio, youtube, vimeo)
/* set playback quality */
--------------------------
/* self hosted video */
Example contains 2 qualities (720p, 1080p).
Active quality on start is specified by optional data-quality="720p".
Quality is any string name set by yourself.
Note: if you do not set data-quality, player will look for the first quality to load on start.
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "720p", "mp4": "media/video/01.mp4"}, {"quality": "1280p", "mp4": "media/video/01_1280p.mp4"}]' data-quality="720p"></div>
player.setPlaybackQuality('720p'); //Set quality video (720p)
player.setPlaybackQuality('1280p'); //Set quality video (1280p)
/* self hosted image */
Example contains 2 qualities in data-path (1200px, 580px)
Active quality on start is specified by optional data-quality="default".
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="image" data-path='[{"quality": "580px", "image": "media/360_image/01.jpg"}, {"quality": "1500px", "image": "media/360_image/01.jpg"}]' data-quality="580px"></div>
player.setPlaybackQuality('1500px'); //Set quality image (1500px)
player.setPlaybackQuality('3000px'); //Set quality image (3000px)
/* youtube */
For youtube, qualities are automatically created on video start.
https://developers.google.com/youtube/iframe_api_reference#Playback_quality
Default quality on start is specified by data-quality="hd720"
Suggested quality may not be accepted by youtube in certain cases, because their api decides which quality to use in the end, depending on playback size, device playback is running on, bandwidth etc...
<div class="mvp-playlist-item" data-type="youtube_single" data-path="5zYArkwq2PQ" data-quality="hd720"></div>
player.setPlaybackQuality('small'); //Set quality youtube (small)
player.setPlaybackQuality('hd720'); //Set quality youtube (hd720)
player.setPlaybackQuality('hd1080'); //Set quality youtube (hd1080)
/* 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.seek(0); //seek (0)
player.seek(5); //seek (5)
player.seek(15); //seek (15)
player.seekBackward();//seek 5 seconds backwards
player.seekBackward(value); //seek {value} seconds backwards (default 10)
player.seekForward(value); //seek {value} seconds forward (default 10)
player.seekForward();//seek 10 seconds forward
/* load media from playlist on demand */
--------------------------
//Load media by number (counting start from zero, 0 = first media, 1 = second media...)
player.loadMedia(0); //Load first media in playlist
player.loadMedia(2); //Load third media
//Load media from playlist by title
player.loadMedia('Video title number 1'); //Load media 'Video title number 1'
player.loadMedia('Video title number 2'); //Load media 'Video title number 2'
/* load playlist on demand */
--------------------------
player.loadPlaylist('.playlist-test'); //Load 'playlist-test'
player.loadPlaylist('.playlist-youtube-1'); //Load 'playlist-youtube-1'
/* add track(s) to playlist */
Add track to currently active playlist (if active playlist doesnt exist it will be created).
--------------------------
//add track in data format (format, track, play_it, position)
var track = {
type: 'video',
path: [
{quality: 'default', ext: 'mp4', src: '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: 'default', ext: 'mp4', src: 'media/video/01.mp4'},
{quality: '1280p', ext: 'mp4', src: 'media/video/01_1280p.mp4'},
{quality: '720p', ext: 'mp4', src: 'media/video/01_720p.mp4'}
],
defaultQuality:'720p',
poster:'media/video/poster/01.jpg',
thumb: 'media/video/thumb/01.jpg',
title: 'Video title goes here',
description:'Custom description. Tiam justo commodo nec vivamus dolor.',
download: 'media/video/02.mp4',
share: 'http://www.google.com',
subtitles: [
{label: 'English', src: 'data/subtitles/sintel-en.vtt', default: true},
{label: 'German', src: 'data/subtitles/sintel-de.vtt'},
{label: 'Spanish', src: 'data/subtitles/sintel-es.vtt'}
]
},
{
type: 'video',
path: [
{quality: 'default', ext: 'mp4', src: '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(0); //remove first tracks
player.removeTrack(2); //remove third tracks
player.removeTrack(player.getPlaylistLength()-1); //remove last tracks in playlist
player.destroyPlaylist(); //remove all tracks
//remove track by title
player.removeTrack('Video title number 1'); //remove media 'Video title number 1'
player.removeTrack('Video title number 2'); //remove media 'Video title number 2'
/* destroy current playing media / playlist */
--------------------------
player.destroyMedia(); //Destroy current playing media
player.destroyPlaylist(); //Destroy current playlist
player.setAutoPlay(true/false); //Set autoplay
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
Changing Icons
How to change icons in player?
If you would like to use svg icons for example, instead of font-awesome, just change all icons in HTML area.
For example, toggle playlist icon, just replace <i class="fa fa-list-ul"></i> part:
<div class="mvp-playlist-toggle mvp-contr-btn" data-tooltip="Playlist"><i class="fa fa-list-ul"></i></div>
For icons that come in multiple versions, for example fullscreen or volume, do the same for each icon:
<div class="mvp-fullscreen-toggle mvp-contr-btn">
<div class="mvp-btn mvp-btn-fullscreen" data-tooltip="Fullscreen"><i class="fa fa-expand" aria-hidden="true"></i></div>
<div class="mvp-btn mvp-btn-normal" data-tooltip="Normal"><i class="fa fa-compress" aria-hidden="true"></i></div>
</div>
SVG version:
<div class="mvp-fullscreen-toggle mvp-contr-btn">
<div class="mvp-btn mvp-btn-fullscreen" data-tooltip="Fullscreen">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"></path></svg>
</div>
<div class="mvp-btn mvp-btn-normal" data-tooltip="Normal">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z"></path></svg>
</div>
</div>
Troubleshooting
Self hosted video mp4 doesnt play
If you have trouble playing video on your server in some browsers, and you get an errors in browser developer console similar to these:
Specified "type" of "video/mp4" is not supported. Load of media resource ... failed.
This is a mime type problem. You need to add following lines in your .htaccess file on your server:
AddType video/mp4 .mp4 .m4v
More details: http://voice.firefallpro.com/2012/03/html5-audio-video-mime-types.html
Self hosted audio mp3 doesnt play
If you have trouble playing audio on your server in some browsers, and you get an errors in browser developer console similar to these:
HTTP "Content-Type" of "audio/mpeg" is not supported. Load of media resource ... failed.
This is a mime type problem. You need to add following lines in your .htaccess file on your server:
AddType audio/mpeg .mp1 .mp2 .mp3 .mpg .mpeg
More details: http://voice.firefallpro.com/2012/03/html5-audio-video-mime-types.html
Autoplay on mobile
Autoplay is automatically set to false on mobile.
This means when you set autoPlay:true in settings, it will be true on desktop, but on mobile it will be false.
Autoplay doesnt work on IOS, and possibly some other mobile OS out there: User Control of Downloads Over Cellular Networks
Volume on mobile
You cannot control the volume on IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript
Chrome browser on Mac OS
If using 360 video and images doesnt work on Chrome browser on Mac, make sure you have Override software rendering list enabled (hardware acceleration).
Enter chrome://flags/ in browser url and press enter.
https://stackoverflow.com/a/26365131/1009466
https://apple.stackexchange.com/questions/150212/hardware-acceleration-for-flash-videos-in-google-chrome
https://www.lifewire.com/hardware-acceleration-in-chrome-4125122