listMedia: an HTML5/JavaScript Function

I attended a brief workshop in Grand Rapids yesterday with Phil Gerbyshak. He talked about sharing one idea with someone everyday, which is why I feel motivated to share this bit of JavaScript with the Interwebs.

As I was going over some HTML5 tutorials, I became excited about the video tag. True, it does not add anything that could not be accomplished with HTML4, but it does it in a much cleaner way. Perhaps my favorite part is the built-in intelligence with recognizing supported media types. Say you aren’t sure whether an OGG or MP4 is better to use for compatibility sake. HTML5 says, “why not use them both?” By using the following code, the visitor’s browser will automatically select the very first file type it recognizes:

<video width="320" height="240" controls="controls">
  <source src="movie1.mp4" type="video/mp4" />
  <source src="movie1.ogg" type="video/ogg" />
</video>

If the browser does not recognize movie1.mp4, it will simply move onto movie1.ogg. And for the record, “controls=’controls'” and “source src=” have to be some of the most redundant HTML tags I have seen in my life.

This is all great, but it got me thinking. Even though there are only three primary video formats (kinda) supported in HTML5 (OGG, MP4, and WebM), what if this list grows? Five years form now, we don’t want to write out fifteen lines of possible video sources “just in case.” So, I set out to create a JavaScript that would do this for us. I call it listMedia and it currently has a strict and loose version.

listMedia Strict

This code would go into your <head> or an external JS file:

<script type="text/JavaScript">
function listMedia(mediaAddr, mediaType)
{
if (mediaType="video")
   {
   var vidFormats= new Array("ogg","mp4","webm");
   for(var i=0;i<vidFormats.length;i++)
      {
      document.write("<source src='" + mediaAddr + "." + vidFormats[i]
      + "' type='video/" + vidFormats[i] + "' />");
      }
   }
else if (mediaType="audio") //checks to see if the media type is audio
   {
   var audFormats= new Array("ogg","mp3","wav");
   for(var i=0;i<audFormats.length;i++)
      {
      document.write("<source src='" + mediaAddr + "."
      + audFormats[i] + "' type='audio/" + audFormats[i] + "' />");
      }
   }
else //media type failed to be detected
   {
   document.write("<source src=
   'http://myweb.arbor.edu/jthiede/no-type.mp4' />");
   }
}
</script>

Then, you would place something like this in your <body>:

<video width="320" height="240" controls="controls">
   <script type="text/JavaScript">
      listMedia('http://www.w3schools.com/html5/movie', 'video');
   </script>
Your browser does not support the video tag.
</video>

What’s happening?

Starting form the bottom and going up… A bit of JavaScript nested in the <video> tag calls the “listMedia” function and passes it two variables: most of a URL (http://www.w3schools.com/html5/movie) and the type of media (video). These variables get processed by listMedia and checked to see if the media is a video or audio file. Since the mediaType is set as “video,” the variables go through the first IF condition.

An array called vidFormats is used to keep up with all the currently supported video formats. Just a note – this array can be added to and stripped down to your heart’s delight without messing anything up. Finally, listMedia prints out a list throwing the appropriate extensions on the end of the mediaAddr variable. Voila! No need to type out every format.

listMedia Loose (aka Version 3)

You may notice that there is a perfectly useless “else” condition in the strict version. What was supposed to happen was that a video saying “please ask the web admin to select the proper media type” would show up if the media type was not selected or was invalid. However, while debugging this, I learned that it was not required to specify whether the media was audio or video, so long as your <audio> and <video> tags were used correctly. I was amazed to find that HTML5 allows a browser to check a media file against any extension, video or audio. Meaning, you can keep one array with all the media extensions, and your visitor’s browser will find the right one.

Thus, I created a simplified version of listMedia. My purpose for retaining both versions is that I do not know how strict HTML5 will become and I grow weary of bright red boxes on validators for not having something like an <alt> tag. For now, the loose version works great. However, this may change:

<script type="text/JavaScript">
function listMedia(mediaAddr)
{
   var mediaFormats= new Array("ogg","mp3","mp4","wav","webm");
   for(var i=0;i<mediaFormats.length;i++)
      {
      document.write("<source src='" + mediaAddr + "." + mediaFormats[i] + "' />");
      }
}
</script>

<audio controls="controls">
   <script type="text/JavaScript">
      listMedia('http://www.w3schools.com/html5/song');
   </script>
Your browser does not support the audio element.
</audio>

Smaller and more efficient. This is basically the same process, but we no longer care if the media is audio or video. Instead, we use one array to define ALL of the media extensions. The key for getting both versions to work is remembering not to pass the full path of your file to the mediaAddr variable. Instead of typing “http://mysite.com/video1.ogg&#8221; just type “http://mysite.com/video1&#8221;. listMedia will take care of the rest.

That’s really it for now. Honestly, so long as their are only five supported media formats, this may not be a huge time saver. But, it could make a big difference in the future. My next two small-scale projects will be using listMedia with CSS3 and porting listMedia over to PHP (which seem much more applicable IMHO).

Please feel free to offer any suggestions. To see listMedia in action, go to the terribly unflattering http://myweb.arbor.edu/jthiede/listMedia.htm. View the source of the page to see all the comments that I could not get to fit in WordPress.

Enjoy!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s