Code

Modern Video Gallery Player

Modern Video Gallery Player

Modern Video Player is highly customizable jQuery gallery plugin with lots of adjustable features. It can display video, audio and image files from many external content sources.

It support self hosted video, audio and image files, 360 reality video and image panorama, Youtube and Vimeo content. Also provides ability to display any custom iframe like Wistia video, Dailymotion, Google Maps to name a few etc..

Support for adverts (pre-roll, mid-roll, end-roll) and annotations during playback.

All DEMO examples included in the download package for quick and easy setup.

Features and options:

  • Destop, mobile and tablet support (fully responsive)
  • jQuery 1.7.x – jQuery 2.+ / 3.+ Compatible
  • Conditional script loading (improves usability and performance)
  • Responsive layouts
  • Highly customizable with HTML and CSS
  • Font-awesome and svg icons
  • Password protected content
  • Only one video format required for all browsers and devices
  • Supported content sources:
    • Self hosted video, audio, images
    • Self hosted virtual reality 360 video
    • Self hosted image panorama 360
    • Live Streaming with multiple audio and subtitles support
    • Youtube content:
      • Single video
      • Playlist
      • Channel
      • Video query (search)
      • 360 video
    • Vimeo content:
      • Single video
      • Album
      • Group
      • Channel
      • Video query (search)
      • 360 video
    • Folder playlist (video, audio and images)
    • Custom iframe (show any iframe into the player: Daily Motion, Wista, Google Maps…etc)
    • XML playlist
  • optional poster image for Youtube and Vimeo
  • option to display poster image on mobile to preserve bandwidth
  • Subtitles support for any media (video, audio, Youtube, Vimeo) (vtt / srt)
  • Google Analytics tracking
  • Adverts support (pre-roll, mid-roll, end-roll). Play video, audio or image file on demand. Global adverts per playlist or individual per media.
  • Annotation support (show / hide HTML elements including iframes over video area during playback). Global annotations per playlist or individual per media.
  • AdSense support in player (monetize your video content!)
  • active item and timestamp parameters in url
  • Video Chapters support (seek to specific time with presented seekbar and title).
  • Remember playback position on page reload.
  • Protect media and video urls with url encryption from source page.
  • Support for multiple instances in the same page
  • Option to mix different media types in the same playlist
  • Floated video on page scroll
  • Up next video feature
  • Playlist options:
    • Scroll
    • Buttons
    • Mouse move
    • Wall / Grid layouts
    • None
  • Playback options:
    • random playback
    • loop playlist
    • playback speed
    • start / end time
    • multiple playback qualities
    • load more videos on page scroll (Youtube, Vimeo)
    • mobile autoplay under certain conditions
    • autoplay when in viewport
    • on media end navigate to url
    • swipe video
  • Elements visibility (hide specific buttons on small screens)
  • Vertical or horizontal playlist
  • Show player as lightbox option
  • Media aspect ratio (original / fit-inside / fit-outside)
  • Media end action (next, loop, rewind)
  • Keyboard navigation
  • Social sharing (facebook, twitter, tumblr, google plus)


tags: video player, youtube video, social feed, image gallery, 360 video, panorama, live streaming, google analytics


Note:

Similar wordpress video player version available here: http://codecanyon.net/item/modern-video-player-for-wordpress/21571689


Updates / Changelog

VERSION 8.1 [4.10.2018]

 - [ADD] new playlist positions (vertical left, horizontal top)
 - [ADD] new sharing sites (reddit, pinterest, digg, linkedin)
 - [ADD] optional published date in playlist items for Youtube and Vimeo (with title and description)
 - [FIX] wrong tooltip position in lightbox mode
 - [FIX] wrong grid gutter calculation
 - [FIX] pre roll advert preventing annotations to show on main media 

VERSION 8.0 [26.9.2018]

 
 - [ADD] password protected content (global per playlist or individual)
 - [ADD] option to set image alt text
 - [ADD] automatically generate Vimeo download links
 - [ADD] AdSense support in player 
 - [ADD] option to limit large description text
 - [ADD] active item and timestamp parameters in url 
 - [ADD] optional poster image for Youtube and Vimeo
 - [ADD] option to display poster image on mobile to preserve bandwidth 
 - [ADD] WhatsApp share button
 - [UPDATE] improvements on Minimize player on scroll option
 - [UPDATE] added optional scrollbar for description and embed area instead of browser default one
 - [UPDATE] improved subtitle styling
 - [UPDATE] improved iframe loading in annotations
 - [FIX] small bug fixes

VERSION 7.62 [6.8.2018]

 - [ADD] Google Analytics tracking
 - [ADD] option to swipe the video

VERSION 7.6 [2.8.2018]

 - [CHANGE] new controls style
 - [UPDATE] improved vimeo playback (vimeo playlist can now contain both default and chromeless videos)

VERSION 7.55 [23.7.2018]

 - [UPDATE] improved chapters on mobile
 - [ADD] CSS shadow effects on player
 - [ADD] option to remember playback position on page reload
 - [ADD] new ad events to track ads (callbacks)
 - [FIX] mouse wheel on button navigation

VERSION 7.51 [19.7.2018]

 - [FIX] chapters not working on Android
 - [FIX] big play button appearing over Vimeo default player

VERSION 7.5 [15.7.2018]

 - [ADD] conditional script loading (improves usability and performance)
 - [ADD] added video chapters option
 - [ADD] pre roll, mid roll, end roll adverts, individual per video / global per playlist (adverts can be self hosted videos, audio, images, youtube single video, vimeo single video)
 - [ADD] on screen popup annotations, individual per video / global per playlist (show/hide HTML elements on screen during playback)
 - [ADD] optional protected media and video urls (url encryption)
 - [ADD] optional custom html content in playlist items 
 - [ADD] vimeo chromeless player 
 - [ADD] video redirect feature (on video end go to url)
 - [FIX] some issues with 360 playback
 - [FIX] video start time
 - [CHANGE] loadMoreOnTotalScroll moved from settings to data-load-more attribute on playlist item
 - [UPDATE] elements visibility (hide subtitles, annotations, upnext on mobile)
 - [UPDATE] overall code improvements

VERSION 6.99 [11.6.2018]

 - [UPDATE] updates to lightbox layouts
 - [ADD] optional up next video feature
 - [ADD] option to hide certain buttons on mobile 
 - [ADD] new transparent controls layout
 - [ADD] Live Streaming Multiple Audio Tracks and Subtitles support 
 - [FIX] remember playback rate speed on quality change
 - [FIX] playback quality change for youtube reloading video instead of quality

VERSION 6.97 [31.5.2018]

 - [ADD] Youtube playback option without cookies
 - [FIX] navigation type buttons sometimes showing with no more items to load on load more option
 - [ADD] New 100% window size layouts
 - [ADD] optional grid calculations for playlistPosition outer (grid, wall layouts)

VERSION 6.95 [25.5.2018]

 - [UPDATE] forceMobileAutoplay changed to forceMutedAutoplay
 - [ADD] add optional thumbnail preview when seeking video (requires sprite of images for each video + vtt)
 - [ADD] option to minimize and fix player anywhere on the page when scrolling (limited to one player in page)
 - [ADD] another demo with svg icons

VERSION 6.91 [14.5.2018]

 - [UPDATE] update for Chrome autoplay

VERSION 6.9 [9.5.2018]

 - [ADD] new option to autoplay videos after first video has been manually started
 - [ADD] new option to start playing video when player is visible on the page
 - [ADD] new demos with pagination and lightbox
 - [ADD] option to have youtube default player controls
 - [FIX] some bug fixes and code improvements

VERSION 6.75 [25.4.2018]

 - [ADD] now you can set player ratio for video area (for example 4/3, 16/9 etc..) 
 - [CHANGE] playlist width and heigth is set with javascript.
 - [UPDATE] load more button is now automatically removed when there is no more data to load 
 - [FIX] video not resizing if autoplay is false and poster was used  
 - [FIX] lightbox mode fullscreen

VERSION 6.7 [20.4.2018]

 - [ADD] new view player as lightbox option
 - [UPDATE] some layout improvements (player keep 16/9 ratio on playlist toggle, improved button scrolling customizability)
 - [FIX] fadding only newly added thumbs on load more
 - [UPDATE] new demos and layouts

VERSION 6.52 [5.4.2018]

 - [FIX] bugfix incorrect horizontal playlist width calculation due to margins (for buttons or hover navigation)
 - [FIX] youtube video not resizing with custom data-width, data-height attributes
 - [FIX] fullscreen icon not switching 

VERSION 6.51 [5.4.2018]

 - [FIX] bugfix with hover navigation

VERSION 6.5 [2.4.2018]

 - [UPDATE] new playlist scroll options (buttons and hover)
 - [UPDATE] new demos and layouts

VERSION 6.12 [21.3.2018]

 - [FIX] youtube api initialization with multiple players in same page

VERSION 6.01 [8.3.2018]

 - [UPDATE] added mobile autoplay

VERSION 6.0 [5.3.2018]

 - [FIX] fade in thumbs
 - [FIX] some playback improvements
 - [FIX] improved autoplay
 - [FIX] improved multiple instances 
 - [FIX] other bug fixes
 - [UPDATE] new way of handling image and font icons in player
 - [CHANGE] controls animation changed to fade (easier to change skin and move buttons to different position of the player)
 - [ADD] support for playing audio files (mp3/wav/HLS Live Streaming)
 - [ADD] support for playing Vimeo video ( Vimeo default player or chromeless player with custom controls for Pro members; Support for Vimeo album, channel, group, search videos, single video )
 - [ADD] support for custom iframe (show any iframe into the player: Daily Motion, Wista, Google Maps...etc)
 - [ADD] optional image duration in miliseconds (show time on screen)
 - [ADD] optional sortable playlist items
 - [ADD] new API methods (add track to player, remove track from player)
 - [REMOVE] image zoom

VERSION 5.28 [22.2.2018]

 - [FIX] update css for youtube RTL

VERSION 5.27 [22.2.2018]

 - [FIX] bug fix with active playback rate menu item

VERSION 5.26 [19.2.2018]

 - [FIX] description not showing in some cases

VERSION 5.25 [15.2.2018]

 - [UPDATE] some css updates and improvements
 - [FIX] some javascript bug fixes and improvements

VERSION 5.2 [10.2.2018]

 - [UPDATE] unified media paths. All paths in HTML are now defined as data-path="..." 
 - [UPDATE] updated documentation on subject

VERSION 5.1 [29.1.2018]

 - [UPDATE] simplified inner code, removed all references to playlistDataArr, playlist data is now read directly from playlist items
 - [FIX] bug fix, video holder hidden on quality change

VERSION 5.05 [28.1.2018]

 - [FIX] fixed xml examples in data/xml folder
 - [FIX] small bug fixes
 - [UPDATE] updated help documentation

VERSION 5.0 [15.1.2018]

 - [UPDATE] Completely new player designed and coded from scratch, with new features

UPDATE 4.8 [9.12.2017]

  • [UPDATE] update to jQuery 3.2.1

UPDATE 4.65 [12.6.2017]

  • [UPDATE] bug fixes
  • [UPDATE] some code improvements
  • [UPDATE] Youtube api improvements

UPDATE 4.6 [10.4.2017]

  • [UPDATE] some code improvements

UPDATE 4.5 [7.3.2017]

  • [UPDATE] some code improvements

UPDATE 4.4 [18.12.2016]

  • [ADD] added inline video playback on iphone

UPDATE 4.3 [27.9.2016]

  • [UPDATE] update compatibility with jquery 3

26.10.2015

version 4.25
  • updated folder parsing for mp4 videos

1.5.2015

version 4.2
  • some tooltip updates

16.3.2015

version 4.15
  • fixed deeplink active item (start video)

17.2.2015

version 4.1
  • updated subtitles to srt / vtt format
  • updated big play btn over video area
  • updated youtube suggested quality

27.1.2015

version 4.0
  • only mp4 video format required for all browsers
  • update to Youtube api V3
  • updated live playlist layout

17.12.2014

version 3.65
  • only mp4 video format required for all browsers

13.8.2014

version 3.63
  • updated youtube for http and https

25.7.2014

version 3.62
  • fixed some bugs with ios (_youtubeStarted, mediaPath+=”?rand=” + (Math.random() * 99999999);)

23.6.2014

version 3.61
  • Updated captions to load single xml file
  • added HTML5 fullscreen for IE11

15.6.2014

version 3.6
  • subtitles / captions now available for html5 video and youtube
  • added optional right click context menu
  • many overall improvements

31.5.2014

version 3.51

23.5.2014

version 3.5
  • added optional video download (specify your own path)
  • added youtube video search option
  • added video quality option (for youtube grabs all available qualities automatically, for mp4/ogv/webm videos any number of qualities can be set)
  • added optional pre roll video adds with skip advance (video advert)
  • added optional timed html elements over video (mid roll adds)
  • added optional chapters through video (specify video time and chapter caption)
  • new improved API methods
  • new callbacks
  • new demos
  • improved wall HTML markup
  • lightbox changed to fancybox2 in wall layout
  • added database playlist option (+ examples included)
  • added media_id identifier in settings for multiple players (automatically pause/play multiple players in same page)
  • added button tooltips
  • multiple players in same page supported (example included)
  • updated flash embedding for multiple players
  • fixed caption menu position
  • fixed safari jquery address back from first item issue
  • many small improvements

9.3.2014

version 3.12

8.2.2014

version 3.1
  • added HTML5 captions support
  • redesigned player controls (+ font awesome icons)
  • added timer for hiding player controls in fullscreen
  • added social icons
  • updated youtube mobile playback
  • fixed webm support query

22.12.2013

version 3.03
  • changed autoplay to on after first play
  • added click touch on video

3.10.2013

version 3.02
  • update to jquery 1.10.2

15.8.2013

version 3.01
  • fixed youtube tooltip value
  • playlist reordering and process important fix for mixed playlists

8.8.2013

version 3.0
  • whole layouts made completely responsive
  • other minor overall code imporvements
10.7.2013 version 2.3
  • added XML playlist
  • added folder playlist (automatically load videos from folders)
  • added option to choose between ogv and webm video format

30.4.2013

version 2.21
  • added youtube fullscreen button in all browsers
  • added youtube option to play highest video quality available

17.2.2013

version 2.2
  • update to jquery 1.9.1
  • update jquery address (for deeplinking) for jquery 1.9.1
  • update prettyphoto for jquery 1.9.1
  • removed mini toggle button (w_toggle) in widget example (was causing unwanted problems on mobile with video)

29.12.2012

version 2.1
  • improved youtube filtering (private, deleted, restricted videos)
  • video paths separated in index files (mp4, ogv, webm)
  • local video fullscreen improved
  • video updated for IOS 6
  • improved flash backup for older browsers
  • optional playlist
  • new layouts included (no playlist example, widget example, video wall examples with optional Prettyphoto)
  • overall bug fixes and code improvements
by
by
by
by
by
by