Info: The demos of the resource don't work as the source video files are unavailable.

Acorn Media Player is a jQuery plugin for creating a customizable HTML5 media player with support for accessibility.

The player can be completely controlled with keyboard (with standard tab-based navigation), has screen-reader support + accessible themes and various other accessibility tweaks.

There is also support for closed captions and a dynamic transcript generated from the selected captions is provided.

Acorn Media Player can be themed with ease, can display videos in fullscreen, informs users on loading processes with loading + buffering indicators and can even remember the volume level used with HTML5 localStorage.

The sliders (seek and volume) can either use jQuery UI's widgets or a custom one is provided as well and few other options exist (like the direction of the volume slider) for further customization.

You'll remember JSMad, a pure JavaScript MP3 decoder (which was previously featured at WRD).

It came with ID3 support, works perfect in Firefox and requires "enabling Web Audio API" in Chrome.

The developers of JSMad have recently released a similar resource named ALAC.js.

It is also JavaScript library but for decoding/playing ALAC files (that are supported on iPhone, iPad, most iPods, Mac and iTunes).

Although HTML5 audio is the most compatible way to play audio in iOS devices, ALAC.js can be an alternative.

P.S. it is a port of the recently open sourced Apple Lossless decoder.

In parallel with the popularity of videos on web, HTML5 video is already being used widely. And, for sound, HTML5 audio is gaining ground for sure.

AreWePlayingYet? is an initiative and open source test suite that aims to bring more harmony into HTML5 Audio implementations.

Using the suite, anyone can easily test HTML5 audio capabilities of a browser and find out the features supported/unsupported.

It is built by SoundCloud and also enables us to quickly add new tests (if wanted).

Player Framework is an open source video player framework for HTML5, Silverlight, Windows Phone and other platforms.

It offers a JavaScript API for controlling the player where the API methods are the same on both the HTML5 and Silverlight versions.

Such a consistency is very handy for using any of the versions as a fallback of the other with almost no extra coding.

The framework has support for playlists using an array of media items or using a link to a media RSS feed.

W3C timed text (TTML) for captions can be used and there are controls like volume, mute, fullscreen, poster-displaying.

Player Framework is modular, can be extended easily and its look/feel can be customized using CSS.

SCM Music Player is an open source and web-based music player application that is built on top of the popular JavaScript sound API:  SoundManager.

The player sits on the top or bottom of web pages, has support for playlists where listeners can easily choose from and plays MP3, MP4, RSS podcasts or Youtube playlists.

Multiple skins exist to choose from and few options like default volume, autostart or shuffle playback helps helps customizing it more.

By default, the player would work as an external player from the domain of the resource however, it can be downloaded and installed on your own domain pretty easily.

MooVES is a MooTools plugin for easing and enhancing the integration of videos from popular video sharing websites (YouTube, Vimeo, Dailymotion, Facebook, Flickr, Google Videoi etc.).

It is unobtrusive and displays the link to the video and a notice if JavaScript or Adobe Flash Player is not enabled.

The plugin works by simply mentioning the URL of the media as a link and calling the MooVES function with targeting that element.

There is no need to know the settings for each video service and a single function makes setting options (like width/height, background/foreground colors, autoplay or loop) possible.

MooVES also has support for HTML5 video tag features (in beta).

VideoBlocks, a fresh website offering professional footage, is giving away "3 Accounts with unlimited downloads for 1 month" to WRD readers.

Joining the giveaway is a very easy process, just check the details at the bottom of this post.

What is VideoBlocks

Using videos when presenting a product, web app or almost any other content in the web is becoming more and more common each day.

Although a production-from-scratch to make such videos attractive can be pricey, using VideoBlocks can help minimizing these costs.

It is a website providing unlimited downloads of 30,000+ stock videos, motion backgrounds, sound effects, production music, etc. to its members for a good price. And, these resources can be used in any type of projects (TV, web, radio..)

VideoBlocks regularly adds new clips to their database and the ones presented are very well-categorized/tagged which makes searching pretty easy.

There are videos/sounds on almost anything from explosions to nature, locations/places to animations or door sounds to dog barking ones that will help adding a twist to the footage being worked on.

Also there are other categories like looping videos, slow motion, time-lapse or nature and animals with each having their own sub-categories.

The footage presented is being used by well known companies like ABC, The History Channel, Discovery Channel and much more.

P.S. VideoBlocks offers a free 7-day unlimited downloads for any sign-up.

How to join the giveaway?

Just comment to this post and the winners will be selected on 28 September 2011 (1 week later) with the query below:

SELECT * FROM wp_comments WHERE comment_post_id=2474 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

Good luck.

Few days ago, FitText, a jQuery plugin that auto-arranges the size of fonts according to the size of the element wrapping them -so they don't break-, was shared at WRD.

And now, it is FitVids.JS, again a jQuery plugin and a similar solution but, this time, for videos.

It automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.

Usage is simple, just call the fitVids function by targeting a video and the element will be auto-wrapped with a <div> and CSS for resizing it will be applied.

Currently, it is compatible with major services like Youtube, Vimeo, Blip.TV or Viddler.

HTML5 audio and video is really great and very easy-to-use, however, they are not supported in older browsers and there isn't a consistency between modern browsers when it comes to file types.

html5media is a JavaScript library that enables every browser to play the media defined inside the HTML5 media tags.

For a compatible browser, the library doesn't interfere anything. For non-compatible ones (older or non-supported file type usage), the player is replaced with the Flash-powered FlowPlayer.

Even in the Flash-fallback, the library applies the settings defined inside the <audio> – <video> tags to the player (like poster image).

html5media can be installed to your own website or a free-hosted-version offered for a quick usage.

Yahoo! WebPlayer is a fresh web-based media player from Yahoo! which can be integrated into any web page with just inserting a line of JS code.

It has support for many media formats including MP3, WMA, YouTube, Yahoo! Video, etc. and works automatically by scanning the related links/files in a web page and inserting a "play" button besides each of them.

Once the "play" button is clicked, an in-page  (can be a good way to keep the users in the same page) and good-looking player appears with a nice slide effect that plays the media either in a tiny audio player or a video player.

The player can even detect related media itself and link to them if the "term detection" mode is enabled.

The API for the player is under development and it'll offer much more flexibility once launched.

P.S. You'll remember the popular Yahoo! Media Player, WebPlayer is actually the next-generation of this product.