HTML5 Video Gallery with Youtube

HTML5 Video Gallery with a cool ‘Live playlist’ feature could be used as video gallery, video player or any kind of video showcase. All demo examples includedin the download package for easy setup.

Options:

• Only mp4 video format required for all browsers and devices
• Responsive layouts
• Multiple instances in same page supported (example included)
• Youtube API V3
• Single video
• Youtube playlist
• Youtube channel
• Youtube user channels
• Youtube video search
• Playlist types availabile
• HTML markup
• XML playlist (example included)
• Read folder of videos
• Mix together Youtube and MP4 videos to create any kind of playlist
• Optional deeplinking with jquery address
• Optional automatically generated video thumbnails and description for Youtube
• You can use your own thumbnails and video info for Youtube as well.
• Video subtitles, captions support in srt/vtt format for html5 video.
• Wall layout features
• Optional Lightbox attached to videos
• Optional web links attached to videos
• Empty video click actions (run your own actions on video click)
• ‘Live preview’ feature is optional (automatically play video on playlist item rollover)
• Optional right click context menu
• Optional video download (specify your own path)
• Youtube video search option for Youtube
• Optional Youtube suggested video quality
• Video quality option (for youtube grabs all available qualities automatically, for mp4 videos any number of qualities can be set)
• Optional pre roll ads with skip advance and link settings (video adverts)
• Video adverts can have optional quality, subtitles and description as well like the main video
• Video aspect ratio (original, fit inside, fit outside)
• Optional video autoplay
• Optional random play
• Optional video looping
• Optional auto advance to next video
• Optional auto hide controls
• Optional description
• Optional auto open description
• Optional player logo with link
• Public API available
• Play media
• Pause media
• Toggle media
• Next media
• Previous media
• Destroy media
• Destroy playlist
• Seek
• Toggle description
• Get title
• Get description
• Load media or playlist
• Get playlist data
• add Track(s) to playlist
• remove Track(s) from playlist
• Skip Intro
• Callbacks available
• Setup Done
• Playlist End
• Playlist Loaded
• Item Triggered
• Video Start
• Video End
• Play
• Pause
• Playlist Item Enabled
• Playlist Item Disabled
• Playlist Item Rollover
• Playlist Item Rollout
• Playlist Empty
• Fullscreen Enter
• Fullscreen Exit
• Caption (subtitle) change
• Quality change

Updates / Changelog

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

26.7.2014

version 3.62

• fixed some bugs with ios

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

• added social share icons
• added fix for ios chrome popup issue:http://stackoverflow.com/questions/14637937/window-opener-not-set-in-ios-chrome

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

• updated youtube issue http://code.google.com/p/gdata-issues/issues/detail?id=5788

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

Continue Reading…

HTML5 Audio Player with Playlist

ULTIMATE RESPONSIVE HTML5 audio player with HUGE amount of options and possibilities.

Restyle the player with css into pretty much anything! Check the demo examples to get you imagination going.

All demo examples included in the download package for easy setup.

Note: Volume cannot be adjusted with javascript on mobile IOS. This is a restriction from Apple. You need to adjust the volume with physical button the actual phone.

View this on your mobile phone:

Options:

• Playlist options available
• HTML markup
• XML playlist (xml examples included)
• DATABASE playlist (sql examples included)
• Auto create playlist from folder(s) of mp3 files (plus optional reading of ID3 tags)
• Podcasts
• SoundCloud (track set, user tracks, single track, user favorites, user groups)
• Youtube
• Official FM (single track, playlist tracks, project tracks)
• Inline text/image links
• Support for Shoutcast servers that have mp3 streaming.
• FLASH fallback included for older browsers that dont support HTML5 audio.
• Load any type of playlist through XML or HTML markup, or DATABASE
• Mix multiple playlists/songs types together
• Playlists/songs come in a HTML and OBJECT forms
• optional song download (multiple choices, global download vs individual per playlist item)
• download backup for IOS (send download link to email)
• soundcloud results limit, podcast results limit, youtube playlist results limit, oficial.fm results limit
• Uninterrupted audio playback across web pages (popup player is a separate window and browse your website while listening to music without interuptions!
• optional auto open player in popup supported
• switch between player in normal window and in popup window while keeping player settings like current playlist, active item, volume etc..
• load visible / hidden playlist
• add visible / hidden tracks to playlist
• remove visible / hidden tracks from playlist
• Hugely powerful API included.
• Include multiple instances on the same page.
• Multiple instances automatically pause/stop playback when new sound is started.
• Optional playlist scroll is jScrollPane.
• optional sortable and draggable playlist items with optional remove buttons (drag songs from your own container into the playlist/player, drag and sorts songs from multiple players etc… with TOUCH PUNCH)
• Optional playlist item link to url
• Optional playlist item remove button
• Optional song artwork (auto generated audio thumbnails).
• automatically create titles, thumbnails or both in playlist items
• optional vertical volume
• optional autoHide volume
• optional circular progress (with whole new demo examples)
• optional keyboard events for audio navigation
• Public API methods available
• Play audio
• Pause audio
• Toggle audio (play/pause)
• Stop audio (unload)
• Next audio
• Previous audio
• Load audio
• Load playlist
• Add visible/hidden track(s) to current playlist
• Remove visible/hidden track(s) from current playlist
• Input audio (play sound without creating any kind of playlist data)
• Toggle shuffle
• Toggle loop
• Destroy audio
• Destroy playlist
• Check scroll
• Reinitialize scroll


• Get/set volume
• Get/set autoplay
• Set title
• Get Setup Done
• get Playlist Transition
• Get Playlist Loaded
• Get Media Playing
• get Audio inited
• Get Media type
• Get Active item
• get Playlist item(s)
• get Playlist hidden
• get Playlist list
• Get Media count
• Get Playlist data
• Get Sound ID


• Playlist items ordering methods
• Reverse playlist items
• Randomise playlist items
• Remap playlist items from array
• Swap two playlist items position
• Callbacks available
• Setup Done
• Playlist Loaded
• Playlist End
• Sound Play
• Sound Pause
• Sound Start
• Sound End
• Playlist Item Triggered
• playlist Item Enabled
• playlist Item Disabled
• Playlist Item Rollover
• playlist Item Rollout
• on Playlist Empty
• on Drop Receive



Updates / Changelog

12.2.2015

version 3.11
• fixed bug with player seekbar and volume size on start

22.12.2014

version 3.1
• fixed soundcloud favorites

2.5.2014

version 3.09
• fixed email link to file download if file name contain spaces

9.3.2014

version 3.07
• updated youtube issue http://code.google.com/p/gdata-issues/issues/detail?id=5788

2.2.2014

version 3.06
• fixed tooltip volume and seek offset
• download now works with spaces in file names

20.1.2014

version 3.05
• removed onbeforeunload event popup html files

11.1.2014

version 3.04
• fixed bug with autoOpenPlayerInPopup
• fixed sortable scroll offset fix
• added getid3 cache bust

21.12.2013

version 3.03
• changed icon names/paths (download, trackUrlIcon, trackDownloadIcon)
• fixed download in createTrackFromData
• added option to sort files loaded from folder on title
• new demo (index_playlist_selector_with_scroll.html) + updated jscroll pane container height settings when adding/removing tracks
• added option to parse id3 tags from mp3 files from folder

13.11.2013

version 3.01
• cleaned/improved flash embedding code

9.11.2013

version 3.0 MAJOR UPDATE!
• update sound engine to html5 audio
• responsive layouts included
• new skins included (light and dark)
• optional sortable and draggable playlist items with optional remove buttons (drag songs from your own container into the playlist/player, drag and sorts songs from multiple players etc…)
• many sortable/draggable demos included (with TOUCH PUNCH)
• optional song artwork (auto generated audio thumbnails), demos included
• stream youtube audio
• added option to load playlist from DATABASE (examples included)
• play oficial.fm music (single tracks, playlists, projects)/li>
• optional song download (multiple choices, global download vs individual per playlist item)
• download backup for IOS (send download link to email)
• new soundcloud addition: play soundcloud groups
• added soundcloud results limit, podcast results limit, youtube playlist results limit, oficial.fm results limit
• Uninterrupted audio playback across web pages – popup player is a separate window and browse your website while listening music without interuptions!
• optional auto open player in popup supported
• switch between player in normal window and in popup window while keeping player settings like current playlist, active item, volume etc../li>
• load visible / hidden playlist
• add visible / hidden tracks to playlist
• remove visible / hidden tracks from playlist
• create inline text or image song links (demo included)
• new and improved API methods
• new and improved API callbacks
• fixed playlist reordering bug and completely rewritten playlist processing
• optional vertical volume
• optional autoHide volume
• optional circular progress (with whole new music player demo examples)
• optional keyboard events for audio navigation
• optional playlist item rollovers with API callbacks
• automatically create titles, thumbnails or both in playlist items
• many other code improvements/fixes/options/additions
• many new demo examples included!

Continue Reading…