A Quick Hack: .webm Files

Every year MasterControl holds a summit called the Master's Summit. This is a time for current and prospective users of MasterControl to see the latest features in the software, network with other MasterControl users and professionals in their field, learn how to better use MasterControl in their company, and listen to some of the best minds in the industry. As an employee, I enjoy going to meet users of the software I write and gaining a better understanding of how people use our software. It's always an illuminating and enjoyable experience. This year we even did a hack-a-thon and implemented four features that customers requested.

This year, I was helping out with what we call, "test drives." This is where we set up 20 or so laptops with MasterControl installed and running with access to everything and let customers take them for a spin. Customers can come and go as they please and look at any feature they want to in MasterControl. This is nice for customers because most of them don't even have access to everything in MasterControl, so this gives them an opportunity to try out things they haven't even purchased yet as well as to see the newest additions to the software.

This year, I had an interesting experience the first day of the Summit. In preparing for the Summit, we decided we wanted to show some videos of our automated testing software executing tests. We chose a few videos that the software had created (they are .webm files which I found out will play in Google Chrome), zipped them up, and sent them off the IT in the hopes that they'd be able to string those files together and have them continually playing on a TV at the Summit. IT is usually extremely busy in preparation for the Summit, but I was hopeful they'd be able to figure it out. I mean, they're basically wizards over there.

So, the first day of the Summit arrives. I'm excited to listen to the keynotes and kick off a great Test Drive experience for our customers. I arrive early on Tuesday morning in order to help get things set up. Things go relatively smoothly, but I notice that the TV that's supposed to be showing our videos isn't connected or set up for anything. There's still time, so I don't think about it too much and keep helping out. Then the morning plenary session starts with a kick off for the hack-a-thon and this is when I realize that we'll likely need to make due without them. They were just a nice thing to have not a critical thing.

Following the great plenary sessions, we open the Test Drive area and start inviting customers in. Things are pretty busy at first but quickly start to calm down as customers filter out to different breakout sessions. Around this time is when IT is able to make a laptop available to show the videos we'd selected.

Only thing was, they hadn't had time to work on getting the videos connected together so we could show them all day (which is completely understandable given all they do to prepare for the Summit). So, they give me a laptop with the files that I had sent them and I tell them I'll be able to figure something out.

But I really had no idea what I was going to do.

Oh boy.

So, there I was. A TV on my right and a laptop right in-front of me with 15 .webm files staring me in the face that I had no idea what to do with while customers and employees were entering and leaving the room.

How do I get these files to play on the TV? What is a .webm file anyway? Could I convert them to another file type? I thought. Maybe there's a tool online that can concatenate these videos and convert them to a new format. A quick Google later didn't turn up anything useful.

What am I going to do? Maybe I can download something that'll play them? But how do I have it play all of them back-to-back and then have it loop when it's done? I don't want to have to learn a new software program just to get theses things to run for a few days. There's got to be another way.

Such were the thoughts I was having. I was starting to doubt that we'd get this to work at all. That's when it hit me.

Wait... These files play in Chrome. I'm a JavaScript guy. I wonder if I can figure out a way to get these to work with JS...

So, I started looking into that. I've been working with web technologies professionally for over 4 years, but I haven't done much with media on the web due to the nature of the products I've worked on and the browser restrictions I've had to work with (yay, IE!), so this was new territory for me.

After a quick search on Google, I learned about the video tag. I think I had heard about it once before, but I had never used it. I threw together a basic page, put a video tag on it, gave it one of the 15 .webm files I had, and opened it in Chrome.

<!DOCUMENT html>
<html>
<head>
</head>
<body style="margin:0 !important; height: 100%; width: 100%;">
<video src="134848r.webm" autoplay="true" id="vid" style="height:100%;width:100%;" />
</body>
</html>

Hey! It worked! The one video I gave it was playing! That's cool. Now how do I play the next video when that one's done? A little looking at the docs showed that the video tag had an ended event. Maybe I could use that?

<!DOCUMENT html>

<html>

<head>

</head>

<body style="margin:0 !important; height: 100%; width: 100%;">

<video src="134848r.webm" id="vid" style="height:100%;width:100%;" />

<script>

var player = document.getElementById('vid');

  player.addEventListener('ended', function () { player.src = '134852r.webm'; player.play();

}, false);

</script>

</body>

</html>

Hey! That worked, too! Now, how about looping them? I'll bet I can do that... After a little trial and error, I finally settled on this:

<!DOCUMENT html>

<html>
<head>
</head>
<body style="margin:0 !important; height: 100%; width: 100%;">
<video src="134848r.webm" id="vid" style="height:100%;width:100%;" />
<script>
var vids = ['134848r', '134852r', '138642r', '138653r', '138658r', '139215r', '139311r', '139486r', '139487r', '140265r', '143297r', '143322r'];
var player = document.getElementById('vid');
var i = 0;

player.addEventListener('ended', function () {
var vid = i % vids.length;
player.src = vids[vid] + '.webm';
player.play();
++i;
}, false);

player.play();
</script>
</body>
</html>

And that worked for the rest of the Summit. I can't tell you how relieved I was every time I looked at the TV and saw that the videos were still playing. I know it's not the prettiest code, but it got the job done.

I learned a few things from this. I learned about webm files (and that they're basically gifs), I learned about the cool new (ish) video tag, I realized (again) that I enjoy working in JavaScript, and I realized that these little moments (while cool to me) generally go unnoticed.

As a developer, you do some pretty awesome stuff and sometimes solve some really interesting and complex problems (unlike what I did with the webm files here). If you do it right, it'll "just work" and people won't even stop to think about how cool that is. Honestly, that's a good thing. That means you've done your job well. If something works so well that no one really thinks twice about it, you've reached a high level of functional quality. But that's probably a conversation for another day.