Code

Modern Video Player

Modern Video 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..

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

Features and options:

  • Destop, mobile and tablet support
  • Responsive layouts
  • Highly customizable with HTML and CSS
  • Font-awesome icons
  • Supported content sources:
    • Self hosted video, audio, images
    • Self hosted virtual reality 360 video
    • Self hosted image panorama 360
    • HTTP Live Streaming (HLS) audio and video
    • 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
  • Support for multiple instances in the same page
  • Option to mix different media types in the same playlist
  • Playback options:
    • random playback
    • loop playlist
    • playback speed
    • start / end time
    • multiple playback qualities
    • load more on demand
  • 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)
  • API methods available
    • Play media
    • Pause media
    • Toggle playback
    • Next media
    • Previous media
    • Set volume
    • Toggle mute
    • Seek
    • Seek forward / backward
    • Get current time
    • Get duration
    • Get load progress
    • Toggle playlist
    • Toggle embed
    • Toggle description
    • Toggle random
    • Toggle loop
    • Toggle fullscreen
    • Set subtitle
    • Set playback quality
    • Set playback rate
    • Destroy media
    • Destroy playlist
    • Load media / playlist
  • Callbacks available
    • Setup done
    • Playlist start load
    • Playlist end load
    • Playlist item enabled
    • Playlist item disabled
    • Playlist item click
    • Media request
    • Media start
    • Media play
    • Media pause
    • Media end
    • Volume change
    • Fullscreen enter
    • Fullscreen exit


tags: video player, youtube video, social feed, image gallery, 360 video, panorama


Note:

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


Updates / Changelog

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