Enables <video> and <audio> tags in html source code.
http://html5media.info/
HTML5 video made easy
All it takes is a single line of code to make HTML5 video and audio tags work in all major browsers.
How to enable video and audio tags in all major browsers
To make HTML5 video and audio tags work in all major browsers, simply add the
following line of code somewhere in the <head> of your document.
<script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>That's it! There is no second step!
How to embed video
You can embed video into your page using the following code.
<video src="video.mp4" width="320" height="200" controls preload></video>For more information and troubleshooting, please visit the video wiki page.
How to embed audio
You can embed audio into your page using the following code.
<audio src="audio.mp3" controls preload></audio>For more information and troubleshooting, please visit the audio wiki page.
Why use html5media?
HTML5 video and audio tags were designed to make embedding a video as easy as embedding an image. They were also designed to give users a faster experience by doing away with browser plugins such as Adobe Flash.
Unfortunately, older browsers don't support HTML5 video and audio tags, and even modern browsers don't support a consistent set of video codecs, making embedding a video rather difficult.
The html5media project makes embedding video or audio as easy as it was meant to be. It's a fire-and-forget solution, and doesn't require installing any files on your server. Unlike many other HTML5 video players, it allows people to use the video controls supplied by their own web browser. It's one of the smallest, fastest solutions available, and as browser technology improves it will become even faster.
More information
The html5media project is open source and can be found on GitHub. You can find out more information on the html5media wiki, or the main html5media project page.
About the author
Dave Hall is a freelance web developer, based in Cambridge, UK. You can usually find him on the Internet in a number of different places:
Extra credits
The html5media project bundles together a number of excellent open-source and creative-commons projects. They are listed below.
- Flowplayer - Flash Video Player for the Web
- Domready - The smallest subset possible from jQuery to support DOM ready event
- Sintel - the Durian Open Movie Project
from https://github.com/etianen/html5media
========================================
15 Best Free HTML5 Video and Audio Players for Your Website
HTML5 Video Players
jPlayer
Based on jquery, it is one of the best Audio/Video Player available; it helps you easily integrate cross platform audio/video in your website. It’s completely free and has fairly good interface and easy to integrate.
VideoJs
Lightweight, Skinable and Easy to Use Video/Audio Player. Completely free and have been coded into wordpress plugin,joomla extension, drupal plugin, so if you are using any one of them it will be very easy to integrate.
OSM (Open Standard Media Player)
As the name suggests its open source and has a nice scrolling playlist support. It is not yet integrated in WordPress, Joomla, Drupal but site is saying its coming soon. It also has inbuilt support to deliver Vimeo, Youtube Videos.
Lean Back Player
Good HTML5 Player with Multiple subtitle support, logo overlay, and Video Size Selection Support. Completely Free and have ability to handle more than one video element in single page. Also comes with inbuilt keyboard Shortcuts!
Fry Player
Free to Use, Jquery based player with skinning support, buffering and fullscreen and shortcuts support. It’s very easy to integrate and is good looking.
MooPlay
Mootools based player, easy to integrate with subtitle support. Subtitles are loaded via ajax request and synced on fly. It also has a loading progress bar.
HTML5 Video
Skinabble Video/Audio Player with fallback. This is used as html5 demo for various sites like dailymotion, youtube, Vimeo etc.
Projekktor
Advertisement support, playlists, and flash fall back with rtmp support. It has support for Youtube and is easy to integrate and theme.
JW Player
Skinnable and configurable player built around HTML5 tag. It seamlessly fallback to JW player for Flash. Supports , H.264/H.263, VP6/8.
Kolor Eyes
360 spherical video. Zoom in, Zoom Out, Change angle capture snapshots and share them. Its kind of a copy of Google street view.
There are many other HTML5 video players and also DIY tutorials where you can code your own player, but the above players are the one of the best selections from them.
HTML5 Audio Players
The video list also contains some players with support of audio but below are some players which specifically support audio.
Mootools HTML5 audio Player
Great looking mootools based audio player with playlist support. It automatically detects audio format browser supports and uses appropriate format.
Speakker
Superb looking, with flash fallback, customizable looks, and come with artist info links. Two versions of the player is available.
Audio.js
Easy to integrate, Free, with flash fallback support. Just add the JS in the head and you’re done.
Zen Audio Player
Single songs HTML 5 Player powered by jPlayer, styles and animated using CSS3. I especially like the looks of the player.
HTML5Rocks Audio Player
Single songs HTML 5 Player with flash fallback support.
No comments:
Post a Comment