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!

Web Apps to Be Thankful For

Yesterday was Thanksgiving and we were reminded of the things were are thankful for every day. While I could list many things in my life that I am far more thankful for than web apps, I thought it might be a good opportunity to express my gratitude for the time and money-saving technologies. Google has predicted that web apps (programs that run in your browser instead of being installed on your computer) will beat out traditional apps in the long-run. For now, I can certainly see the benefits of traditional apps, but there are also some major benefits from web apps. Here is a short list of only a few web apps I am thankful for:

Google Docs

This has to be the biggie in my book. Create documents, spreadsheets, and now presentations online for free. Then, share them for editing or viewing with anyone. I used Google Docs to work on my 2009 entry for NaNoWriMo and I think it has been one of  my most beneficial uses of technology. I did not have to worry about carrying my flash drive or using a computer with the same version of MS Office. I could just sit down, log in, and start writing again.

The presentation tool is still new and needs development. However, it is simple to create a quick presentation and show it online, all while using integrated collaboration to communicate with your audience. You can see a sample here. This was a five-minute creation using only Google’s built-in tools and themes.

Splashup

More than once, I have found myself in need of PhotoShop or the Gimp but did not have either available. Rather than going out and downloading GTK and the Gimp so I can resize, recolor, or add text to an image, I simply go to Splashup.com. In less time than it takes Gimp to cache my fonts, I am working with layers and effects inside my browser. Better yet, Splashup offers instant publishing to sites like Flickr and Facebook.

DropBoks

Not to be confused with the popular DropBox, DropBoks is a lightweight file-storage app. The features consist of the following: upload file, download file, delete file. As you can see, there is not much to the app, but such a simple tool has great benefits. As a paranoid student, I can save my classwork on a jump drive and on DropBoks to make sure I have a backup if something goes wrong.

The standard limit is 1 GB and there is currently no option to share files. If you are looking for something more advanced with greater storage, check out Humyo. However, if you appreciate the clean and simple, give DropBoks a chance.

There are many more web apps to be thankful for, such as Google Wave, Meebo, and even Facebook. But the three above are a good start if you want to explore the world wide web of apps. Keep in mind, not all web apps are free. Enjoy!