HTML5’s native audio element will be a great way to avoid having to rely on third party plug-ins like QuickTime and Flash. The latest web browsers like Chrome 10+ and Firefox 3.6+ are already there with imbedded javascript libraries which provide methods and properties for manipulating the <audio> element. In this post, we’ll examine a few of the most important methods and discover ways to use Javascript to run audio files.

NOTE:  Although this post focuses on the Audio object, these methods and properties are the same for Video.

Audio Methods

.load();

Loads and re-loads the audio element for playback.

audioElement.load();

.play();

Starts playing the audio file.

audioElement.play();

.pause();

Pauses playback of the audio file.

audioElement.pause();

.canPlayType(type);

Checks with browser to see if type of audio file is supported.

audioElement.canPlayType('audio/ogg; codecs="vorbis"');

Audio Properties

.currentTime

Sets or returns the playback position in the audio file. Value is in seconds.

audioElement.currentTime = seconds;

.duration

Returns the length of the audio file in seconds.

var seconds = audioElement.duration;

.src

The url where the audio file exists.

audioElement.src = 'audio.ogg';

.volume

Sets or returns the volume of the audio file.

audioElement.volume = value;

NOTE: This is not an exhaustive list of methods and properties.

Putting It Together

Developers can use javascript to create audio elements on the fly and customize the user interface for interacting with these elements. Let’s take a look.

First, create a standard .htm document and copy in the below <script> section.

<script type="text/javascript" language="javascript" > var audioElement = document.createElement('audio'); audioElement.setAttribute('src', 'audio.ogg'); function PlayAudio() { audioElement.load; audioElement.play(); } function PauseAudio() { audioElement.pause(); } </script>

Now let’s review the javascript above line by line.

var audioElement = document.createElement('audio');

The first thing the page does when it loads is create the <audio> element and assign it to the audioElement variable. By assigning this object to the variable, the script’s functions can use it to reference and manipulate the object (element) during the page session.

audioElement.setAttribute('src', 'audio.ogg');

Next the ‘src’ attribute is assigned, telling the page where to find the audio file.

function PlayAudio() { audioElement.load; audioElement.play(); }

The PlayAudio() function loads and then plays the audio file. First the .load() method is called, and then once the audio file has finished loading, the .play() method is called to start the file.

function PauseAudio() { audioElement.pause(); }

The simple PauseAudio() function pauses the playback. If the PlayAudio() function is called again, the audio file will reload and begin playing the file from the start. However, you could use the .currentTime property to have the file begin playback at the time the PauseAudio() function was executed. Download the demo to view an example of how this can be done.

Support

What developers must keep in mind with the <audio> element is that it is not yet widely supported by browsers. In addition, various browsers only support certain kinds of audio file types. Check out my previous post for details about using HTML5’s <audio> element natively and how it is supported.

NOTE: The accompanying demo will only work in Chrome 10+ and FireFox 3.6+.

By getting creative with the audio’s javascript methods and properties, you can avoid relying on the clunky controls provided by web browsers and inject pizazz into your pages! In a future post, I’ll examine how to use the .canPlayType() method to determine what audio file is supported by the user’s web browser.

Happy Coding!

...

Videos have been a great way to attract viewers to a website long before YouTube launched back in 2005.  But it wasn’t until the release of HTML5 that web developers have had a lightweight solution to playing the video.  In the past, displaying a video on your site meant your viewer was required to have a Flash or Java-based player installed on their system in order to watch the video.  This was one more thing that would weigh down your site, causing pages to load slower, and be one more thing you’d have to trust the viewer to download and install.

Handling a video with HTML5 can be as simple as this.

<video src=”videos/myMovie.mp4” controls></video>

You’ve got the source and have added the browsers native controls.  That’s approximately 41 less lines of code than a site I recently worked on that was using a Flash player, not to mention the player itself had a fairly bulky file size.

Flash and Java Video Players

One big advantage that Flash and Java video players have over the new HTML5 video element is that they’re able to stream live video.  The HTML5 video element is still in its infancy and as of now is not able to stream any sort of live video feed.  Another major advantage that a Flash of Java video player has over HTML5 is that they can handle 3D effects.  This could be a major factor in preventing HTML5 video players from taking away a large amount of market share from Flash and Java players.  As we’re seeing an influx of films coming out in 3D, as well as major sporting events being broadcast in 3D, the ability to handle 3D and streaming content is becoming a more crucial requirement for a video player.  Add the growing number of people who choose to stream movies or TV shows from sites like Netflix, Hulu, or YouTube, and the demand for a powerful, robust video player grows even more.

One of the downsides to having a Flash video player, aside from file sizes and it being an add-on that the viewer must install, is that Flash is not compatible with Apple tablets and mobile devices.  With Net Applications announcing iOS grew to owning 61.6% of the mobile market share in the month of October, that appears to be a big down side.  Especially when you consider more people opt to browse websites from their mobile device or tablets instead of using their computer.

Java players gain their biggest edge over Flash players by being compatible with the iPhone, iPad, and iPod touch. The reason behind Apple’s decision not to support Flash stems from Flash being a “closed” system, meaning that Adobe Flash products are only available from Adobe and Adobe controls the future of the product in regards to upgrades and pricing.  This is opposed to Java, which is an “open” programming language.  Downsides to a Java video player are very similar to that of Flash as well, larger file sizes, and the need for the viewer to install a plug-in for their browser to display the video.

HTML5 Video Element

We’ve already established that an HTML5 video player can mean you have a substantially smaller file size, but as with Flash and Java, HTML5 has its advantages and disadvantages.  An HTML5 video player will also be cross-browser friendly and work on Apple products.  However, just because you’ve implemented an HTML5 video player on your site does not mean that the video will play on an Apple product.  This is an issue I pointed out with a recent client; they wanted to switch their site from a Flash video player to HTML5 so that it would play on an iPhone or iPad.  It was at this point I had to point out that their video formats were in FLV, a video compressed with Flash.

To accommodate anyone who might be viewing your site from an Apple mobile device or tablet there are some video compression guidelines you will want to follow.  An iPhone will play MPEG-4 videos or QuickTime videos that were compressed with MPEG-4, meaning H.264 video and AAC audio.  It’s also worth noting that the iPhone does not support B-Frames.  If you’re given the option of encoding your video in a multi-pass or single-pass mode, choose single, even though you will most likely be encouraged to do multi-pass for best quality.  I’ve found that 480×360 dimensions is a nice median to accommodate full screen on a computer without distorting the image too much, and not ending up with a file so large it takes too long to load on an iPhone.

HTML5 will also allow you to name multiple video sources, OGG, MPEG-4, and WebM.  OGG is compatible with Firefox 3.5+, Opera 10.5+, and Chrome 5.0+, but not IE or Safari.  MPEG-4 is supported by IE 9.0+, Chrome 5.0+, and Safari 3.0+, but not Firefox, or Opera.  While WebM is supported by Firefox 4.0+, Opera 10.6+, and Chrome 6.0+, but not IE or Safari.  Being able to point to multiple sources will ensure that your video is able to play on any major browser, with the only downside being you to have multiple formats of your video.

Pointing to multiple video sources is as easy as one might think, “just include the source for each”.

<video controls> <source src=”videos/myMovie.mp4” type=”video/mp4” /> <source src=”videos/myMovie.ogg” type=”video/ogg” /> <source src=”videos/myMovie.webm” type=”video/webm” /> </video>

Moving Forward With <video>

Some might say that the <video> element is too little too late, but using HTML5 to display a simple static video on your site is a perfect way to ensure viewers to your site will be able to see it, whether it’s on a mobile device or a desktop computer.  It’s lightweight and requires no additional plug-in to work.  As with all new technologies you have to start somewhere, and from there you begin to see areas in which it can be improved.  Being someone who strives to develop as lightweight of sites as possible, I am excited to see what direction the new HTML5 video element goes.

...

Since the late 90s, when embedding media elements like audio and video clips into web pages, developers have had to rely on third party plug-ins. Flash has become the go-to method for nearly all video sites, and has been widely used for audio embedding as well.

Because of the nature of the Flash plugin, this has limited the accessibility of embedded media. With the introduction of the HTML5 media elements API, this has all begun to change.

Now, many libraries and video players are being introduced that utilize the new <video> and <audio> elements, along with the associated API. Of course, due to cross-browser inconsistencies, it could still be some time before HTML5 video becomes a common industry practice.

In this post, we’ll put aside the browser inconsistencies and other controversies. Here I’m going to introduce you to the HTML5 Video API so you’ll become familiar with how easy it is to provide users with full access to a video’s custom controls when using HTML5 video.

Some Basic Markup

To get us started, here’s the HTML we’ll be using that will hold and play our video:

<video src="example.ogv" controls width="400" height="300"></video>

For simplicity, I’m not using cross-browser HTML5 video code. There are plenty of libraries and articles online that outline how to build “bulletproof” code for HTML5 video. One such page is the Video for Everybody page by Kroc Camen. The code in this tutorial — which will be using the Ogg container format — will work in the following browsers: Firefox 3.5+, Chrome 4+, and Opera 10.5+. Safari and Internet Explorer do not support the Ogg format, so be sure to use one of the supporting browsers when you view the demo page.

As you can see, we’re using the controls attribute to tell the video player, by default, to include visible, accessible controls. Thus, without any scripting or hacks, the user can access the play/pause and volume functionality of the video player.

But what if you want to create your own custom-branded controls and then access the various features of the controls via JavaScript? We’re going to do that in this tutorial. Here’s the HTML we’ll be using to style our own controls:

<div id="controls" class="hide"> <a id="playPause">▶</a> <a id="muteUnmute">⊗</a> </div>

We’re going to stick to a few simple buttons for our controls: A play/pause button and a mute/unmute button.

After styling these elements (I won’t go into the details on the styling here), the embedded video with our custom controls will look like this:

A few points to note here: As you can see in the code, I’m using a few HTML entities to create play/pause and mute/unmute buttons. This wouldn’t necessarily be the best choice. Because I’m focusing on the API in this post, this will do just fine. But you have the option to use images, CSS sprites, CSS3 techniques, or anything else to help produce an attractive and user-friendly interface.

Setting Up Our Script

As mentioned, our simple custom controls include a play/pause button and a mute/unmute button. We’ve given both buttons in our HTML a unique ID that we can target with our JavaScript. I’m going to use jQuery, so our JavaScript will start off with the shortcut for jQuery’s $(document).ready handler. Then we’ll grab our different objects and place them into JavaScript variables so they’re cached and ready to use:

$(function() { var video = $('video')[0], controls = $('#controls'), playPause = $('#playPause'), muteUnmute = $('#muteUnmute'); video.removeAttribute("controls"); });

The video variable holds access to the video element itself, and the other variables are used to access the controls container and its two child elements: the play/pause button and the mute/unmute button.

Finally, since we don’t want the native HTML5 video controls to be visible, the last line in that block hides the controls by removing the controls attribute. This ensures that users that don’t have JavaScript enabled will still see the native controls.

Making the Custom Controls Visible

Naturally, since the native controls will be visible without JavaScript, then our own custom controls should not be visible by default. That’s why our HTML has included a class of “hide” on our controls container. Using this class, our CSS sets the controls to display: none. If that class is removed, then the controls will default back to display: block. Here’s the code to do this:

video.addEventListener('canplaythrough', function () { controls.removeClass("hide"); }, false);

Here we have two new things at work. First, we’re using JavaScript’s addEventListener method to ‘listen’ for the event in question. Although addEventListener is not supported by IE6-8, that’s not really a problem becaue any browser that supports the media elements API will also support addEventListener.

The event we’re passing into the addEventListener method is the canplaythrough event. This is our first look at the HTML5 video API. According to the spec, if this event has fired, then that means the browser has estimated that uninterrupted playback of the entire video is now possible. So when this event occurs, it’s safe to add our custom controls by removing the “hide” class.

Coming Up in Part 2

So far we’ve set up a basic interface, prepared our script, and we’ve briefly begun to introduce the media elements API. In the next part, we’ll make our two buttons fully functional, and we’ll deal with what to do when our video ends playback.

...