Kurt Zenisek (KZeni)

jQuery Media Player DX

A Forward Thinking HTML5-Focused Audio & Video Player

Features

  • Supports both <video> and <audio>.
  • Simple to set up; Upload the files into a single folder, copy & paste one line of code, use the <video>/<audio> tags like you normally would, and that's it!
  • Easily skinned; Comes with 3 pre-built skins: "Pro", "Analog", and "Flat". Simply include a folder named the same as the css file within it, and set that as the skin name in the options.
  • Customizable & linkable watermark.
  • Player branding can be enabled/disabled freely.
  • Support for Google Analytics; Track starts, stops, pauses, and completions.
  • Uses native fullscreen when available.
  • Allows for multiple players on the same page, and they're all individually targetable for scripts & styling.
  • Doesn't break when used in conjunction with external interactivity such as lightboxes, slideshows/cycles, tabs, etc.
  • Works in all browsers with a fallback flash player even though you're still programming using the normal HTML tags.
  • Browser-specific codecs giving you a headache? People using a browser that doesn't support the available codecs make use of the fallback player's codec support.
  • Providing varying quality/file-size content using multiple <source> tags will make the separate sources choosable to the user without having to do any customization. You can provide custom labels using data-label.
  • Age gating functionality for those that might need it.
  • User can toggle between the HTML & Fallback player on-demand.
  • localStorage is used to save the user's preferences (even remembers where you left off during playback in addition to quality, volume, etc. settings).
  • Modular & utilizes lazy load; So it only loads in the things that are being used. Skins, fallback player, etc. are all excluded unless needed. It starts out at a small file-size, but is even smaller when being used.
  • Quick controls; Clicking on the video will play and pause it while double-clicking will toggle fullscreen if the usual controls aren't preferred.
  • Powered by your contributions.

Options

Image
URL of the watermark image. Default: ''.
Link
URL for where the watermark will go when clicked. Default: ''.
Skin
Name of skin (Pro/Analog/Flat). Default: 'Pro'.
Analytics
True/False. Default: False.
*The tracking code Google provides must be present on the page.
Branding
True/False. Default: True.
Fullscreen
True/False. Default: True.
Age
Minimum age required to access content. Default: ''
Fallback
True/False for enabling the use of the fallback player when needed. Default: True.
*Flowplayer is used as a fallback so analytics, settings, etc. transfer over to the flash player while some may not (you can still use the Flowplayer configuration options to customize that player to suit your needs).

Things like autobuffer, autoplay, poster, controls, etc. are all done via the <video> and <audio> tags just as if it were a regular HTML player.
See the W3C Reference Guides for: Video & Audio

Examples

Use default settings by adding this single line:

$('video, audio').mediadx();

View Example

Or do something more specific, like:

$('#intro').mediadx({
    'image': '/images/watermark.png',
    'link': 'http://kzeni.com/',
    'skin': 'Analog',
    'analytics': true,
    'branding': false,
    'fullscreen': false,
    'age': '18',
    'fallback': false
});

View Example

Compare the 3 Skins

$('.pro').mediadx({'skin':'Pro'});
$('.analog').mediadx({'skin':'Analog'});
$('.flat').mediadx({'skin':'Flat'});

View Example

Download

Whoops! You should really wait for it to be ready.

jQuery can be downloaded from jquery.com or use
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Changelog

Future releases...
Email me with suggestions of new features and/or bugs to be fixed, and I'll gladly address it in an update.
1.0 (May 30th 2011)
Initial Release. Everything is new!

Need to convert your video(s) to a friendly format?

Some browsers prefer h.264/mp4 format while others are looking for webm format. Offering both is playing it safe & recommended. Here are some ways to convert your videos.

Keep it simple:
Miro Video Converter is for Mac & Windows, and it has the presets you'll need to get your videos online.
Get greater control:
VLC is for Mac, Linux, & Windows, and it has full-featured video conversion functionality in addition to being, "that irreplaceable video player than can play anything". If you don't already have VLC… you're doing it wrong.
For the professional:
Even though you've probably found something you like at this point… here are some suggestions. Mac users should look into getting Compressor. People familiar with Adobe can use Adobe Media Encoder. Truthfully, VLC isn't a bad option & definitely has its place.