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.
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.
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.
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.
5. Acorn Media Player
Acorn Media Player is a jQuery plugin implementing a custom HTML5
6. FlareVideo
Supported all browsers: MP4, FLV, Firefox: Ogg, Safari: MP4, MOV
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.
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.
9. JH – YouTube Player
10. jQuery Media Element Player
MediaElementPlayer is a complete audio and video player, but you can also use just the MediaElement object which replaces
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.
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.
13. jQuery Video Lightbox
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.
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.
16. drPlayer a jQuery mp3 player
drPlayer is simple and free jQuery plugin for creating MP3 playlists.
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.
18. IWishQuery : jQuery HTML5 audio Player
A jQuery plugin to autoplay “I Wish” by Skee-Lo for
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.
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.
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).
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.
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.
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.
25. jQuery Multimedia Portfolio
This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.
26. jQuery Multimedia Portfolio 2
27. jMedia a jQuery Player plugin
jmedia is a jQuery plugin for unobtrusive, accessible and flexible multi-media embedding.
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.
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!
30. jQuery fluid width video player : FITVIDS.JS
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
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.
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.
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.
34. jQuery HTML5 Music Player
Remember that awesome music player psd created by Orman Clark? Well here is the matching jQuery plugin.
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.
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.
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.
38. jQuery Mp3 Player : julienMP3Player
jQuery plugin to embed an MP3 player (multi-track).
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.
40. jQuery UI video widget
The jQuery UI Video widget enhances your HTML5
41.FancyPlayer – jQuery Fancybox and Flowplayer Integration Tutorial
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!
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).
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.
Thank you, I found the YouTube playlist at the top perfect! Have never seen this one before in all my searching and it was easily customizable and light weight.
Thanks a lot for this very complete and useful collection!