How To Add HTML5 Audio & Video

Home » Blog » How To Add HTML5 Audio & Video

I frequent a lot of Hip-Hop blogs in quest of listening to new releases and watch new videos. In this era of smart phones and tablets, flash has become the outcast. Yet a lot of blogs are not providing an alternative, why? There are many solutions out there and I'm going to show you how easy it is to provide that alternative in the form of HTML 5 Audio / Video players. Trust me I'm not here to "hate" but actually bridge the gap, because a lot the Hip-Hop blogs provide signed & unsigned artist the means to promote themselves through video and audio.

YouTube and Vimeo provide optimal video players, which will switch between Flash and HTML5 based on the end-user's browser and device.

Wordpress (WP) is the most popular content management system (CMS) used by the Hip-Hop community. Majority of the sites rely on Vimeo/YouTube for their videos, but for the rest, they're ignoring the visitors who are viewing their site on devices that don't support flash (e.g. iPhone and iPads).

Have you ever went to a blog and clicked on a post hoping to hear this new song / freestyle or maybe an hour long mp3 recording of a DJ mix. Instead you get an empty space where the player would be or the dreadful "this content requires flash" notification? Word Press Audio player is the worst offender of not supporting HTML5. The problem is, it relies on flash to stream music and doesn't come with an optimal HTML5 audio player.

Top three Benefits of using HTML5 for audio and video:

Keyboard-enabled, which means the end-users can control the player via their keyboard.
Browsers don't require any third-party plug-ins to play video / audio, basically no more "this content requires "…" to play this content
Controls can be customized using HTML, CSS and JavaScript (e.g. jPlayer).

HTML5 Audio and Video for Blogs

There is a WP plug-in that relies on HTML5 to stream audio and video (if you're not using YouTube/Vimeo) and includes a flash player for browsers / devices that don't support HTML5:

Degradable HTML5 audio and video

Shortcodes for HTML5 video and audio, with auto-inserted links to alternative file types, and degradable performance (lightweight Flash and download). [ WordPress Degradable HTML5 Audio and Video Plugin page | Created by Soukie ]

Other popular CMS HTML5 audio and video extensions/plugins available:

Drupal Module, jPlayer |
Joomla Extension JW Player Advanced |
Tumblr has mobile view which provides an alternative to the flash player.

Stand Alone Solutions

For the do-it-yourself bloggers and/or the bloggers with a front-end developer on their team.

Video
- LongTail Video's JW Player
- Sublime Video
Audio
- jPlayer

If for any reason you need to hand code HTML5 Video and Audio w/ a backup Flash Player, here is the code:

Audio Version w/ Flash fallback [supports ogg & mp3]

<audio controls preload="none">
 
<!-- Firefox and Opera -->
<source src="filename.ogg" type="audio/ogg">
 
<!-- iOS, Safari, Chrome, Firefox, Opera and IE9 -->
<source src="filename.mp3" type="audio/mpeg">
 
	<object type="application/x-shockwave-flash" data="player.swf?soundFile=filename.mp3">
		<param name="movie" value="player.swf?sound-File=filename.mp3">
		<a href="filename.mp3">Download the song</a>
	</object>
</audio>

Video Version w/ Flash fallback [supports ogg, webm & mp4]

<video controls width="360" height="240" poster="plcehoder.jpg">
 
<!-- Firefox and Opera -->
<source src="movie.ogv" type="video/ogg">
 
<!-- iOS, Safari, and IE9 -->
<source src="movie.mp4" type="video/mp4">
 
<!-- Chrome and Firefox (and Opera?) -->
<source src="filename.webm" type="video/webm">
 
	<object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=movie.mp4">
		<param name="movie" value="player.swf?file=movie.mp4">
		<a href="movie.mp4">Download the movie</a>
	</object>
</video>