Best jQuery Video & Audio Plugins & Tutorials with Demo

Buzz! : A jQuery Html5 Audio Library

Buzz! : A jQuery Html5 Audio Library

Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It tries to degrade gracefully on non-modern browsers.

Easybox : lightbox clone for jQuery

Easybox : lightbox clone for jQuery

EasyBox is a lightbox clone based on the light-weight Slimbox2 script. It offers a variety of additional features such as:

  • displaying YouTube and Vimeo videos,
  • displaying inline content,
  • displaying iFrames and
  • better animations

Old School Cassette Player with HTML5 Audio & jQuery

Old School Cassette Player with HTML5 Audio & jQuery

Vintage format meets modern web tech: an HTML5 audio player with realistic controls. Today we want to share an audio player with you that looks like an old school music cassette.

How to Create an Video Player in jQuery, HTML5 & CSS3

How to Create an Video Player in jQuery, HTML5 & CSS3

In this tutorial we will code an Video Player from Impressionist UI by Vladimir Kudinov. We will code it with CSS3 for the styling and the “MediaElement.js” for the functionality. MediaElement.js is a HTML5 audio and video player that also works for older browsers using Flash and Silverlight to mimic the HTML5 MediaElement API.

Stream Radio Script with jQuery ,CSS3 and PHP

Stream Radio Script with jQuery ,CSS3 and PHP

Today I have prepared another really great tutorial for you. Recently I have started development of my own radio software (as module for Dolphin CMS) and got interesting results. So, I would like to share you with some results about it. It will be nice looking (CSS3) radio script. It consists from three main elements: header (with nice animated search bar and integrated radio player), left side (with list of categories and subcategories) and right side (which will contains list of recent/ or filtered stations).

Custom HTML5 video player with jQuery and CSS3

Custom HTML5 video player with jQuery and CSS3

We want to create a video player that looks consistent across browsers. Each browser however provides its own different look and feel for the player, from the minimal approach of Firefox and Chrome, to the more shiny controls of Opera and Safari (see Figure 1 for the controls in each browser). If we want our controls to look the same across all browsers, and integrate with our own design, we’ll have to create our own controls from scratch.

All media elements in HTML5 support the media elements API, which we can access using JavaScript and use to easily wire up functions such as play, pause, etc. to any buttons we create. Because the native video player plays nicely with other open web technologies, we can create our controls using HTML, CSS, SVG or whatever else we like.

jQuery YouTube Popup Player Plugin

jQuery YouTube Popup Player Plugin

This is an easy to use jQuery Plugin to embed YouTube videos on your page by displaying them in a popup dialog box. I have used jQuery UI Dialog Widget as the popup container instead of reinventing the wheel. jQuery UI Dialog is a robust cross-browser mechanism to display a popup dialog box with title bar including a movable box with modal behavior.

This is plugin is very simple to configure and use. YouTube Video Id can be stored in any attribute of the DOM element. This plugin keeps track of all the assigned popup events and won’t assign the click event if there already exists one, that way you can reassign the event for dynamically added HTML elements without affecting the existing ones.

Native Fullscreen jQuery API

Native Fullscreen jQuery API

HTML5 <video> is great, but when it was first released, one of the big complaints was that it couldn’t do true FullScreen like Flash. Thankfully, this is changing and native FullScreen support is coming to most browsers in the next few months.

The API is still heavily in flux especially since the W3C joined in this week. I spent some time working through the differences to implement FullScreen in MediaElement.js HTML5 video player, and it’s working great in Safari 5.1+, Chrome Canary Chrome 15+, or Firefox Nightly (go to about:config and set full-screen-api.enabled= true) and scheduled for Firefox 10.

jQuery Audio Slideshow with jPlayer

jQuery Audio Slideshow with jPlayer and jQuery demo

Today we’ll share an audio slideshow with you. Using the open source audio framework jPlayer the slideshow will show images and play sound, changing the images at specified moments of the song/audio. While we’ll demonstrate a photo slideshow here, it is not limited to photos. It could also use div tags containing any kind of markup whatsoever.

Glimmer a jQuery Animation effect plugin

Glimmer a jQuery Animation effect plugin

Another great animation effect for jQuery lovers, you can see how the landscapes moves.Glimmer allows you to easily create interactive elements on your web pages by harnessing the power of the jQuery library. Without having to hand-craft your JavaScript code, you can use Glimmer’s wizards to generate jQuery scripts for common interactive scenarios. Glimmer also has an advanced mode, providing a design surface for creating jQuery effects based on your existing HTML and CSS.By using Glimmer you can make rotating image banners,beautiful tooltips, Dropdown menus and lot of other animation effects.