Week 9: Loading and Playing Audio and Video

Topics:

• Wireframe Reviews
• JQuery Plugin Tryouts
• ActionScript: Loading and Playing Audio
• ActionScript: Loading and Playing Video
• HTML5: Loading and Playing Audio and Video

ActionScript: Loading and Playing Audio

Loading external audio files is similar to loading image or swf files, but you use the Sound and SoundChannel objects instead of the Loader. These objects also let you play and stop the playback.

Loading Video

Loading video is similar to loading audio, but it needs a few more objects because video is loaded into the video object as a stream rather than the whole file at once. Here’s some good reference on the video playback:

Livedocs > Working with Video

HTML5: Audio and Video

Before HTML5, we’ve had to view multimedia content such as video and audio via a plug-in like Quicktime and Flash. This presents cross-platform compatibility issues — choose Flash and your content won’t load on iPhones and iPads, choose Quicktime and a lot of Windows users won’t see the content. Add to that that we have to use double tags to ensure loading on most browsers and it got really messy.

HTML5 eliminates the need for a plugin, giving browsers the ability to directly display audio and video, with new tags:

<audio src = "myMovie.mp3" >

>HTML5 Audio Reference

<video src ="myMovie.mov">

> HTML5 Video Reference

The two code examples will embed a player in your HTML page, but leave it to the browser to decide how to implement the controls and behavior. To take control of this yourself, there are some additional parameters you can include in the tag. Say you want to display controls and have the video or audio automatically start playing, you’d want to include the following:

<video src ="mySong.mov" controls="controls" autoplay="autoplay" />

You can also use the shorter version:

<video src ="myMovie.mov" controls autoplay />

You might be thinking: Hooray for native audio and video elements, my troubles are over!

Well, don’t run off to happy hour yet, there is a wrinkle. The most popular audio and video formats are proprietary, so browsers have to pay to include support for them. This is fine for browsers that are developed by big companies, like Safari or Chrome, but not so good for open source browsers like Firefox. Firefox instead supports the non-patent restricted formats from xiph.org. These files have the extension .ogg (Ogg Vorbis) for audio and .ogv (Theora Ogg) for video. And, a later entry into the open source video format crusades is WebM, which promises a lean, high-quality open source video that plays on most (but still not all) major browsers.

W3Schools has a nice rundown of all the issues with playing Web video

Converting to Ogg and WebM Formats

Here’s some good info on Wikipedia about encoding Theora Ogg video files.

There are a number of free utilities out there for converting .mp3 to .ogg, however, I tried a few that didn’t work. What did work was Audacity, which is a nifty little sound editing tool.

The easiest converter I’ve found for .ogv files is Firefogg which is a Firefox add-on.

So, to support all the browsers that support the audio and video tags, you have to include multiple formats:

<video controls="controls">
   <source src="myMovie.ogv" type="video/ogg" />
   <source src="myMovie.mov" type="video/mp4" />
   <source src="myMovie.webm" type="video/webm" />
</video>

Ok, not so bad. I have to make two versions of the same file, that’s a drag, but doable.

But wait, we’ve forgotten about our old friend Internet Explorer. IE8 doesn’t support the audio/video tags (but IE9 promises to). So, we still need to fall back on the old object tag to embed a Quicktime or Flash player. Since IE is a Windows only browser, and Flash has much greater adoption on Windows, it makes sense to use Flash.

Wait, does that mean I have to make another media file for Flash?

Fortunately, it does not. Flash now supports Quicktime files if they are encoded properly.

If you are familiar with Flash, you can create a dyanmic FLV movie player for yourself. If not, you can use Abobe’s Flash Media Player

Adding the Flash player code will look something like this:

<video controls="controls">
  <source src="myMovie.ogv" type="video/ogg" />
  <source src="myMovie.mov" type="video/mp4" />
  <source src="myMovie.webm" type="video/webm" />
  <object type="application/x-shockwave-flash" width="360" height="240" data="mySwf.swf">
     <param name="movie" value="mySwf.swf">
     <a href="mySwf.swf">Download the movie</a>
  </object>
</video>

>Here’s a working example*

* I first had trouble with the Firefox version of this because my server needed a MIME type added.

Whew, that was complicated.

There are potentially simpler solutions if you want to:

• Use a third party all-in-one solution for embedding your content like Jplayer or JWPlayer
• Host your content on a third party site like YouTube and Vimeo

Homework

1. Combine the XML example we went over last week with what we covered about audio today to make an audio player that can play mutliple tracks. The track info should come from an xml file. The player should have buttons to play and stop the current track, and navigate to the next and previous tracks. You can use either HTML5 or Actionscript to do this homework.

2. Take your wireframes and the comments from today and create the interface design for your project.

3. We’re having a quiz next class, don’t miss it!