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.



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



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



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



[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



[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



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



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



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

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



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



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



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

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



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



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



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



[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



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



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



[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).



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



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



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



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

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



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



[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!



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



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



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



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



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



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



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



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



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

38. jQuery Mp3 Player : julienMP3Player

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



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



[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



[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

[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!



[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).



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



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