Monday, January 30, 2012

40+ Best jQuery Player & HTML5 Player tutorials and jQuery Examples

In this article, We are providing the best tutorials of jquery players and HTML5's <audio> and <video> new features. In which the  collection of both jquery audio and jquery video tutorials and plugins have been given. Due to increasing popularity of video sites like youtube and vimeo, the people uploads their vidoes on these sites and then they show that videos on their personal webites and blogs.On earlier days the people show the videos on their sites with the help of flash , As during that days it was the one of the best way to view the videos but now eveyone wants extra good features like faster access to the videos, supporting multiple audio and video formats , player list, adjustable video player width etc. All these features can be accessed by making the use of jquery plugins and HTML5 by which  you can provide  the  audios and videos to the visitors  in the better way.


1. jQuery YouTube playlist plugin


The purpose of this plugin is to turn a list of YouTube links into a playlist, making it easy to manage videos on a website by simply inserting the links to the videos. With javascript enabled a nice playlist is created, whilst without javascript the user gets a regular list of links to youtube pages.

jquery youtube playlist plugin

[readmore href="http://www.geckonewmedia.com/blog/2009/8/14/jquery-youtube-playlist-plugin---youtubeplaylist"] [demo href="http://geckohub.com/jquery/youtubeplaylist/"]

2. A jQuery Youtube Media Player Plugin


This jQuery plugin builds a interactive youtube media player, allowing the user to view multiple videos within multiple playlists. The player is built using jQuery and uses the Youtube Javascript API to send and capture player events.

jQuery Youtube Media Player Plugin

[readmore href="https://github.com/badsyntax/jquery-youtube-player"] [demo href="http://badsyntax.github.com/jquery-youtube-player/examples/player.html"]

3. Open Standard Media (OSM) Player


Open Standard Media (OSM) Player is an all-in-one media player for the web. It is an industry changing, open source (GPLv3) media player that is written in jQuery to dynamically deliver any type of web media, including HTML5, YouTube, Vimeo, and Flash.

jQuery Open Standard Media (OSM) Player

[readmore href="http://www.mediafront.org/project/osmplayer"] [demo href="http://www.mediafront.org/"]

4. jPlayer : jQuery video audio player


jPlayer is the completely free and open source (GPL/MIT) media library written in JavaScript. A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages.Supported files on HTML5: mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm*, on Flash: mp3, m4a (AAC), m4v (H.264). Work on Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9, iPad, iPhone, iPod.

jPlayer : jQuery video audio player

[readmore href="http://www.jplayer.org/"] [demo href="http://www.jplayer.org/latest/demos/"]

5. Acorn Media Player


Acorn Media Player is a jQuery plugin implementing a custom HTML5

jQuery Acorn Media Player plugin

[readmore href="http://ghinda.net/acornmediaplayer/"] [demo href="http://ghinda.net/acornmediaplayer/demos.html"]

6. FlareVideo


Supported all browsers: MP4, FLV, Firefox: Ogg, Safari: MP4, MOV

jQuery FlareVideo

[readmore href="http://flarevideo.com/"] [demo href="http://flarevideo.com/"]

7. OIPlayer jQuery Player plugin


It is based on flowplayer, and runs on Safari, Google Chrome, Firefox, Internet Explorer with Flash or Java installed.OIPlayer 'attaches' itself to all video and/or audio tags it encounters. Besides the general configuration of the plugin itself, it uses for each individual tag the attributes the respective tag has like poster, width, controls, autoplay etc.

OIPlayer jQuery HTML5 Player plugin

[readmore href="http://www.openbeelden.nl/oiplayer/"] [demo href="http://www.openbeelden.nl/oiplayer/"]

8. jQuery Flowplayer


Flowplayer is an Open Source (GPL 3) video player for the web. Use it to embed video streams into your web pages. Built for site owners, developers, hobbyists, businesses, and serious programmers.

jQuery Flowplayer

[readmore href="http://flowplayer.org/documentation/index.html"] [demo href="http://flowplayer.org/demos/index.html"]

9. JH - YouTube Player


JH - YouTube Player

[readmore href="http://www.jotaquery.com.br/jh-ytPlayer/"] [demo href="http://www.jotaquery.com.br/jh-ytPlayer/"]

10. jQuery Media Element Player


MediaElementPlayer is a complete audio and video player, but you can also use just the MediaElement object which replaces

jQuery Media Element Player

[readmore href="http://mediaelementjs.com/"] [demo href="http://mediaelementjs.com/"]

11. jQuer MP3 Player : jMp3


jMP3 (javaScript MP3 player) is an easy way make any MP3 playable directly on most any web site (to those with Flash & javaScript enabled).Using the sleek Flash Single MP3 Player & the fantabulous jQuery. Like the title said it is only support mp3 file format.

jQuer MP3 Player : jMp3

[readmore href="http://www.sean-o.com/jquery/jmp3/"] [demo href="http://www.sean-o.com/jquery/jmp3/"]

12. Java Script and HTML5 player : Video JS


Actually Video JS does not require JQuery to start with, but the author provide us the videojs jquery plugins, so it easier for us who already familiar working with JQuery.

Java Script and HTML5 player : Video JS

[readmore href="http://videojs.com/"] [demo href="http://videojs.com/"]

13. jQuery Video Lightbox


jQuery Video Lightbox

[readmore href="http://jqueryvideolightbox.com/jquery-player-mp3-youtube-video-avi.html"] [demo href="http://jqueryvideolightbox.com/jquery-player-mp3-youtube-video-avi.html"]

14. jQuery Google Search Videobar


A jQuery plugin that sets a div or span to show a Google Search Videobar.The default is a floating video player, appearing next to the videobar. Alternately, you can provide the jQuery selector or object for a container to hold the player somewhere else on the page. You can also set the player's size in your own CSS.

jQuery Google Search Videobar

[readmore href="http://keith-wood.name/gsvideobar.html"] [demo href="http://keith-wood.name/gsvideobar.html"]

15. Create a cinema lighting experience with jQuery for your video player


I wanted to add a website dimming experience akin to video player features similar to those found on Hulu or on AdobeTV, where you can toggle the “lights” so to speak on your site. In my example I use some simple JQuery to append or remove a Div to the HTML DOM, and leverage some basic JQuery effects to fade in or fade out the Div. The darkened web site result is achieved by Div with a black background at 80% opacity that sits above all other web content on your page.

Create a cinema lighting experience with jQuery for your video player

[readmore href="http://www.flexdaddy.com/2011/03/30/create-a-cinema-lighting-experience-with-your-video-player/"] [demo href="http://www.flexdaddy.com/ooyala/dimlights/"]

16. drPlayer a jQuery mp3 player


drPlayer is simple and free jQuery plugin for creating MP3 playlists.

drPlayer a jQuery mp3 player

[readmore href="http://devreactor.com/projects/drplayer.aspx"] [demo href="http://devreactor.com/projects/drplayer.aspx"]

17. malsup jquery media plugin


The jQuery Media Plugin supports unobtrusive conversion of standard markup into rich media content. It can be used to embed virtually any media type, including Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF and more, into a web page.

malsup jquery media plugin

[readmore href="http://malsup.com/jquery/media/"] [demo href="http://malsup.com/jquery/media/#demos"]

18. IWishQuery : jQuery HTML5 audio Player


A jQuery plugin to autoplay "I Wish" by Skee-Lo for

IWishQuery : jQuery HTML5 audio Player

[readmore href="http://code.internuts.se/jquery/iwish/"] [demo href="http://code.internuts.se/jquery/iwish/"]

19. Simple Player : jQuery HTML5 Audio Player


Simple Player is a jQuery plugin that allows web developers to control audio files on their webpage. Supports style up via CSS. All browsers that supports HTML5 audio tag that allow mp3 or ogg format supported by this plugin.

Simple Player : jQuery HTML5 Audio Player

[readmore href="http://jay-notes.blogspot.com/2010/06/simple-player-very-simple-html5-audio.html"] [demo href="http://jay-notes.blogspot.com/2010/06/simple-player-very-simple-html5-audio.html"]

20. jme : jMediaelement audio video player


An HTML5 audio / video development kit with Flash Fallback, which focuses on flexibility, intuitive DOM-API and semantic code.

jme : jMediaelement audio video player

[readmore href="http://protofunc.com/jme/"] [demo href="http://protofunc.com/jme/demos/index.html"]

21. Embed QuickTime jQuery Plugin


Embed QuickTime is a jQuery plugin that helps you embed QuickTime movies to play directly on your webpage, instead of redirecting your video to a separate page or forcing you to embed a video using Flash. It changes regular image links to the embedded QuickTime video when they are clicked.It works with QuickTime (mov, mp4, m4v, 3gp), audio (mp3, wav, aiff, m4a) and Windows Media (avi, wmv, mpg).

Embed QuickTime jQuery Plugin

[readmore href="http://www.solitude.dk/archives/embedquicktime/"] [demo href="http://www.solitude.dk/archives/embedquicktime/"]

22. jQuery Sound Plugin


This JQuery sound plugin provides the utility to play the audio file in background without showing the player on UI and stop the running audio file. This player may required Quicktime plugin to run.

JQuery Sound Plugin

[readmore href="http://www.esblog.in/2010/08/playing-sound-file-using-jquery-sound-plugin/"] [demo href="http://esblog.in/sound_plugin_demo/"]

23. jlEmbed For jQuery


jlEmbed is a plugin for jQuery, which makes it easier to add embedded media players to your webpage. With support for Adobe Flash, Quicktime, Real Player, Silverlight, Windows Media Player, and YouTube, you will no longer need to hard-code lengthy, cumbersome, and invalid HTML for your music or videos. jlEmbed also has built-in music playlist support, a customizable MP3, SWF, FLV, YouTube audio player, support for swfobject, YouTube videos, and custom YouTube video playlists.

[readmore href="http://jasonlau.biz/home/jlembed-for-jquery"] [demo href="http://jsonlau.com/home/2011/jlembed-examples/"]

24. JavaScript HTML5 Flash Player : JW Player


The JW Player™ is the most popular open source video / audio player for the Web. It supports playback of any format the Adobe Flash Player and HTML5 browsers can handle (FLV, H.264, MP4, VP8, WebM, MP3, AAC, JPG, PNG and GIF). It also supports various streaming and playlist formats (including RMTP, HTTP, live streaming and more) and a wide range of playback options.

JavaScript HTML5 Flash Player : JW Player

[readmore href="http://www.longtailvideo.com/players/jw-flv-player/"] [demo href="http://www.longtailvideo.com/players/jw-flv-player/"]

25. jQuery Multimedia Portfolio


This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.

jQuery Multimedia Portfolio

[readmore href="http://www.openstudio.fr/jQuery-Multimedia-Portfolio.html?lang=fr"] [demo href="http://www.openstudio.fr/jquery/"]

26. jQuery Multimedia Portfolio 2


jQuery Multimedia Portfolio 2

[readmore href="http://www.openstudio.fr/jQuery-Multimedia-Portfolio-2.html?lang=fr"] [demo href="http://www.openstudio.fr/jquery-multimedia-portfolio/"]

27. jMedia a jQuery Player plugin


jmedia is a jQuery plugin for unobtrusive, accessible and flexible multi-media embedding.

jMedia a jQuery media Player plugin

[readmore href="http://www.contentwithstructure.com/extras/jmedia"] [demo href="http://www.contentwithstructure.com/extras/jmedia#usage"]

28. Javascript  Html5 video player : Projekktor


Projekktor a HTML5 based video player written in Javascript. It solves cross browser and compatibility issues, adds eye candy and provides extremely powerful non standard features.

Javascript Html5 video player : Projekktor

[readmore href="http://www.projekktor.com/"] [demo href="http://www.projekktor.com/"]

29. Javascript Youtube Vimeo player : Bumpbox 2.0


Bumpbox is another lightbox clone with a few advantages over other lightboxes - it supports not only all common media types but also PDF's. Now supports Youtube and Vimeo videos out of the box! Flowplayer has been updated to the latest version, including the viral marketing plugin for easy sharing of your favorite videos.a lightbox clone with support for PDF, flv, swf, audio, images, inline HTML and remote html files. Now alsoplays Youtube© & Vimeo© videos directly out of the box!

Javascript Youtube Vimeo player : Bumpbox 2.0

[readmore href="http://www.artviper.net/website-tools/bumpbox-lightbox.php"] [demo href="http://www.artviper.net/bumpbox-demo/index.html"]

30. jQuery fluid width video player : FITVIDS.JS


A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

jQuery fluid width video player : FITVIDS.JS

[readmore href="http://fitvidsjs.com/"] [demo href="http://fitvidsjs.com/"]

31. Making a Custom YouTube Video Player With YouTube’s APIs


In this tutorial you will create a jQuery plugin which uses YouTube’s chromeless player, and creates our own set of minimalistic controls. The supported controls include a Play, Pause and Replay button – and also a clickable progress bar.

jQuery Custom Youtube Player

[readmore href="http://tutorialzine.com/2010/07/youtube-api-custom-player-jquery-css/"] [demo href="http://demo.tutorialzine.com/2010/07/youtube-api-custom-player-jquery-css/youtube-player.html"]

32. ytPlayer a jQuery based YouTube player


ytPlayer is a feature-rich, “Chromeless” YouTube player solution designed to help webmasters create a custom YouTube player.
The ytPlayer offers a full array of script-ready options, methods, and functions to help you control and interact with the player. Options for ytPlayer include playlists, playlist categories, shuffle, repeat, fullscreen, a jQuery plugin, a right-click context menu with playback controls and playlist, and more.

ytPlayer a jQuery based YouTube player

[readmore href="http://ytplayer.com/home/"] [demo href="http://ytplayer.com/home/ytplayer-demo/"]

33. jQuery tubular a YouTube Background Player Plugin


Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your body tag, specify a YouTube video ID and tell it the ID of your content wrapper, and you’re on your way.

jQuery tubular a YouTube Background Player Plugin

[readmore href="http://www.seanmccambridge.com/tubular/"] [demo href="http://www.seanmccambridge.com/tubular/"]

34. jQuery HTML5 Music Player


Remember that awesome music player psd created by Orman Clark? Well here is the matching jQuery plugin.

jQuery HTML5 Music Player

[readmore href="http://www.codebasehero.com/2011/06/html-music-player/"] [demo href="http://www.codebasehero.com/files/music-player/demo/"]

35. Open Source HTML5 Audio Player: Boombox.js


HTML5 introduces the audio element which offers a way to play audio natively in the browser. However the native controls are a little lacking in style. Thankfully HTML5 also brings Media Element API to interact with which allows us to skin an Audio object however we want.

Open Source HTML5 Audio Player: Boombox.js

[readmore href="https://audiofile.cc/boombox/"] [demo href="https://audiofile.cc/boombox/"]

36. Music Player In jQuery


In this tutorial you create an amazing music player coded in xHTML and jQuery that made use of mouse gestures and hotkeys. You can click and drag with mouse to interact with interface’s music player or use directional keys and spacebar instead of mouse.

Music Player In jQuery

[readmore href="http://yensdesign.com/2008/12/create-an-amazing-music-player-using-mouse-gestures-hotkeys-in-jquery/"] [demo href="http://yensdesign.com/tutorials/musicplayer/"]

37. HTML5 Video – Kaltura JavaScript HTML5 Media Library


Kaltura, an advanced video publishing platform, is sharing a free and open source HTML5 Video & Media JavaScript Library.

HTML5 Video – Kaltura HTML5 Media Library

[readmore href="http://html5video.org/"] [demo href="http://html5video.org/"]

38. jQuery Mp3 Player : julienMP3Player


jQuery plugin to embed an MP3 player (multi-track).

jQuery Mp3 Player : julienMP3Player

[readmore href="https://github.com/juliend2/julienMP3Player"] [demo href="http://juliendesrosiers.com/demo/julienMP3Player/"]

39. TubePlayer: jQuery Plugin For YouTube Player API


TubePlayer is a jQuery plugin that implements YouTube Player API , and allows you to create your own controls and components for YouTube movies. In addition to jQuery, it also requires SWFObject for cross browser support.

TubePlayer: jQuery Plugin For YouTube Player API

[readmore href="http://www.tikku.com/jquery-youtube-tubeplayer-plugin"] [demo href="http://www.tikku.com/jquery-youtube-tubeplayer-plugin"]

40. jQuery UI video widget


The jQuery UI Video widget enhances your HTML5

jQuery UI video widget

[readmore href="https://github.com/azatoth/jquery-video"] [demo href="http://js.azatoth.net/video/example.html"]

41.FancyPlayer – jQuery Fancybox and Flowplayer Integration Tutorial


FancyPlayer – jQuery Fancybox and Flowplayer Integration Tutorial

[readmore href="http://www.webgurusdesignblog.com/2009/08/fancyplayer-jquery-fancybox-and-flowplayer-integration-tutorial/"] [demo href="http://www.burconsult.com/tutorials/fancyplayer/index.html"]

42. Fryplayer : jQuery Video Player


FryPlayer is one of open source and easy to use HTML5 jQuery video player. It has a play and pause button, also possible to set volume sound. Ability to skin, buffering, and full screen mode.FryPlayer is characterized by speed and convenience at work, but his most important quality is that he is free to use!

jQuery Video Player : fryplayer

[readmore href="http://fryplayer.net/"] [demo href="http://fryplayer.net/"]

43. LeanBack Player : Javascript Html5 Media Player UI


LeanBack Player is a HTML5 Video Player with subtitle-support. It supports widely used desktop browsers and mobile devices. Support also IE6,IE7,IE8 and Safari (without Quicktime on windows). It has support for subtitles using HTML5 track element and language selection by label attribute of track (Multilanguage support:English,German,France).

LeanBack Player : Javascript Html5 Media Player UI

[readmore href="http://leanbackplayer.com/"] [demo href="http://leanbackplayer.com/"]

44. jQuery HTML5 Open Video Player (OVP)


Open Video Player (OVP) is an initiative encompassing the use of open standards, best practices, and established development methodologies in the development of media player applications.

jQuery HTML5 Open Video Player (OVP)

[readmore href="http://openvideoplayer.sourceforge.net/html5video/"] [demo href="http://openvideoplayer.sourceforge.net/html5video/"]

1 comments:

  1. I love the XX :) just thought I should comment - because I dont know many that have even heard the band...html5 music player packs all features.Thank you for your continuous upgrades and improvements.This is a great site. Content was great. Keep it up

    ReplyDelete