A Forward Thinking HTML5-Focused Audio & Video Player
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.
URL of the watermark image. Default: ''.
URL for where the watermark will go when clicked. Default: ''.
Name of skin (Pro/Analog/Flat). Default: 'Pro'.
True/False. Default: False. *The tracking code Google provides must be present on the page.
True/False. Default: True.
True/False. Default: True.
Minimum age required to access content. Default: ''
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
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.
Not quite your style?
I wouldn't be miffed if you were to also check out: