UAD5: The Accessible Video Interface

Gabriel McGovern, Web Designer, Portland Community College


The audio for this podcast can be downloaded at http://highedweb.org/2008/presentations/uad5.mp3


[Intro Music]

Announcer:  You’re listening to one in a series of presentations from the 2008 HighEdWeb Conference in Springfield, Missouri.

Gabriel McGovern:  OK.  So I’m gonna go ahead and get started.  I really thank you for joining me today.  I did this last year, pretty much the same one.  I’ve had a year of experience so I’m really happy to be doing it again this year.  I’m really honored to be able to do this several times mostly because I really wanted that red stapler.  But also because there’s several universities that came to my session last year, contacted me, took what I had done, made their own accessible video interfaces and put it online.  And they’ve actually made some improvements that I’ve thrown back into the code and it’s this great cyclical thing that we’re doing.

So I’m going to start off just letting you know that all the code that you’re going to see today, all the files you’re going to see today I have online on my website, the link in the handout.  It’s all creative comments license so feel free to use any of it.  And in fact anything on my website, images, anything that you want.  The presentation slides, the overview handout and also three separate versions of this video player that you’re going to see today are online for you to download, mess around, improve and then send back to me.  That’s really what I ask.  Please send it back to me so that I can have an even better presentation next year.

All right, I’m going to go ahead and get started with these slides.  So if you haven’t met me yet, I think I’ve met many of the faces that are out there in the audience, my name is Gabriel McGovern.  I am the Web designer, whatever that title really means, a little bit of everything, at Portland Community College in Portland, Oregon.  And Portland, Oregon is a beautiful city in the heart of the Pacific Northwest.  If you haven’t been there, please come visit.  We’ve got the mountains in one side, we have the ocean on the other.  It’s just beautiful.

The only problem is that many people who come one time end up moving there.  I’ve met several people who I’ve invited out and they now live in Portland, which means the housing price is just horrible.  So there is that.  Cost of living has increased.

Portland Community College is a two-year institution.  People are coming there for associate degrees, re-training and a lot of other stuff, also Community Education that is really doing really well in this market.  So we’ve seen a 10% increase in enrollment this fall which means this year we’re going to serve about 90,000 students.  Even with all the students that are only taking one class is about 30,000 FTE.

So it’s a very, very big school and we’ve got this huge base that we have got to think about when we’re thinking about accessibility.  And that’s one thing to start off with is to really look at who you’re users are and how you need to serve them.  For us it was very, very important that everything on the public website was accessible because many of our Community Ed students may not ever come into campus.  They may not interact with our Office for Students with Disabilities.  So we need to make sure that everything is as accessible as possible as we can do when we put it out there on the public website.

But today, we’re here to talk about video.  And I start off usually at these presentations by saying the age of video on the Internet is here.  And I said the same thing last year and it’s still here.  And it’s just getting better, better and better.  There are networks, cable networks that are putting all of their content online.  You can go and see full episodes on Comedy Central now, which is just great.  People are turning to their computers and also media players that are hooked up to their TV’s, I actually just recently bought a Roku, the Netflix streaming player.  I love it!  It’s great!  I mean it was a one-time thing, my Netflix subscription.  I just dropped cable altogether.

There are also new content creators that are making their own channels that are only online.  This is Xeni Jardin from Boing Boing TV.  Boing Boing is a really cool, slightly odd massive blog.  I mean they’re always in the top blogs when they have those blog competitions.  They created basically a channel where every week they put a five to ten minute episode on something very strange.  Their tagline – “A directory of wonderful things”.

They actually started as a zine, which has nothing to do with the presentation at all.  I just really like Boing Boing.  They started as one of those print zines that would you buy for .25 in a newsstand and then they went online and they’ve just exploded.  Their content is great.  They always have fresh stuff.  I’ve heard some of the editors speak; there are five or six editors that are on there.  But their content is online.  They don’t have a TV channel and yet they have this great video that I watch every single week instead of turning to the TV. 

And another good example of this not turning to the TV was this summer when millions turned to the computer rather than the TV to watch the Olympics online.  It was a huge success.  It was also an introduction to Silverlight which is a little frustrating since they were the one that was the official way to see them.  And that was very, very frustrating.  I heard somebody speak about how well the torrents did because people got so frustrated they turned to that avenue.  But Internet is really here and just to really prove it I have to put some lines and graphs and charts up there.

This is data from a survey, it was actually done three times by the Universal McCann Group.  They put out this beautiful document.  I really recommend you look it up.  There’s a lot of stuff on social networking.  It’s like 100 pages long with beautiful graphics.  I just took the data out for the ones that were applicable to video.  Here they did three surveys, international surveys.  The last one was 17,000 people from around the world, 17,000 Internet users, and they asked them, “Thinking about using the Internet which of the following have you ever done?”  And you can see social networks are on the rise.  Podcasts are on the rise, which is great, but video has just taken off. 

About two years ago, these are like nine-month sections.  They’re not actually a year.  It was about 35% of people had watched video at some point online.  And now, worldwide, 83% of people have seen video online or has had some interaction with it.  But it’s not even really saturated yet, at least not in the US.  This is kind of a world snapshot of those people who watch video online, how often do they watch it – daily, weekly, monthly, etc.  And you could see that the US is way down here, and I’m sure there are a lot of countries underneath us.  But still, 16% of those people watch it daily versus Brazil where almost 50% of the people who watch video online watch it every single day.  Those people are shutting off their TV’s, they’re watching it on the Internet, they’re watching it on media players.  They’re expecting to see video online just like we expect to see images online.

Think about it, at one point the browser was all text and that was good enough, right?  Then you put images in there, it’s a whole different experience.  Now we’re getting to the point where video, it’s not its own player sitting somewhere else necessarily, it’s inline, in the content.  It’s adding to what you’re seeing, it’s enriching the whole experience.

But we’re also going to talk about not just video online, hopefully I can convince you that video is important.  I might not need to do that though because I’m sure there are people at your institutions saying, “OK, we need video, we need video, we need video.”  And as soon as you put that first video online, you’ve set a precedence and everybody else is going to want video too.  And that’s really what happened to us.  We put – some people saw it at the beginning – want to see video online because it was really cool.  And luckily I set the precedence that we’re going to do captioning and that’s just what we’re going to do.  And so we do that from now on out.  But people, when they saw that, we just got dozens and dozens of requests.

So we’re going to create an interface that helps us do this effectively.  And when I was thinking about this about two years ago, this is from my institution and our user base.  I thought what are the requirements that we need for an accessible video interface, and there were three main topics.  First, it needs to be accessible otherwise this title would be completely different on this presentation.  And when we’re talking about accessibility, we’re talking about the degree to which a system can be used by the population.  I really need you to think about your population and what their needs are. 

And when it comes to the Internet, you have to understand that there’s a certain group of the population that is won’t hear the sound from a video and that means several things, maybe they can’t hear the sound from the video.  They’ve got a different level of hearing ability or maybe they just don’t have sound on their computers.  I’m one of those people who I immediately, when I hit a MySpace page and the sounds starts up, I just unplug my speakers and I leave them unplugged until there’s a reason to plug them back in.  So it’s really important to me that I’m able to get the content out of these videos without necessarily to having to listen to the horrible audio.  But our audio is great but you know, other people’s horrible audio.

It also means considering people who won’t use the mouse.  And again, maybe they can’t use the mouse, maybe there’s a mobility issue there or maybe they’re just really geeky and love access keys.  A lot of people hate touching the mouse because it’s not as effective.  So we’re going to add access keys in there so there’s another way to access and this also makes this great for all different devices that they might be using that are other than the mouse.

You also need to think about the location of your population and their access to bandwidth.  We have, I think about a third of our FTE is actually distance education now.  These are students who are completely off site, they don’t visit any of our three beautiful campuses in the beautiful City of Portland.  We have ones from all different states.  There are also some international students that are taking distance education.  I don’t know how that works but I know they’re out there. 

And if you look at the stats on our site it’s not very many people have 56K anymore but it’s under 5% and it’s around 3% but I don’t just don’t want to drop those people off.  Just because they have a sucky connection doesn’t mean that they shouldn’t be able to get the content.  I don’t want to axe them out.  Now they’re not going to get the quality of content that they would get if they were sitting next to me on campus with a great T1 line right there, but they should still be able to get the content in one form or another.

So what we’re going to do in this interface is we’re going to estimate their bandwidth, we’re going to take a snapshot of it, and then we’re going to deliver a bit rate for video based on what their bandwidth is.  So if they’re 56K they’ll get one version, which looks a little jumpy.  If they’re on cable, they’ll get another.  If they’re on a one meg line on campus, they’ll get this beautiful high quality thing.  That is accessibility.  That’s allowing your population to use the product instead of just cutting them out.  So we’re not just talking about blind users, deaf users and all that.  We’re talking about every single scenario where you’re limiting access to the same information.

This interface also needs to be sustainable.  I was starting off with one video but I knew we were setting a precedence that would explode really quickly.  So I want to be able to manage the interface and the video in general whether we have one video, 10 videos, a thousand videos.  And we’re not quite pushing that yet.  We in the dozens, low hundreds that are out there.  I actually haven’t taken account recently because there are just so much video coming in and this is a small part of my job.  But it really needs to be sustainable.

It also needs to be customizable.  I mean YouTube is great.  It’s a really easy way to take videos, get them online very quickly and embed them in your pages.  But every time you do, you’ve got an add for YouTube sitting there on your pages.  We really wanted something that blended in with the rest of the content and you could have your own player on the side but we’re talking about putting this video right online just like you’d put an image.  Small enough, easy enough where it’s just another piece of the content in the webpage. 

So it needs to look like the rest of the webpage.  You need to have some of that branding in there so that was important to us.  And it was also important that the system could be changed to meet our needs.  We start off with a very, very simple player, I’ll show you a couple of different versions today.  And over the past two years we’ve slowly added features.  And recently I added full screen, there was a demand for it where there hadn’t been one before.  People are realizing that full screen is kind of a cool thing.  They can actually watch it like it’s an entire TV.  So I added that in one place and all of the hundreds of videos that we have suddenly had full screen.  I did not have to go back and touch each of them.  That’s the only thing that keeps me sane, is the knowledge that if I need to make iterative changes I can make them in one place and it’s propagated through the entire system.

So we’re going to talk about today two parts.  The first part is really the pieces involved which to me is the more important part.  I’m going to spend a bit more time on it.  What pieces do you need to create some accessibility to pull all this together, all those requirements that I just told you.  And the second part is how do you actually build this interface to pull all those pieces together.  And I built it in Flash.  I use CS3.  You can use CS2 and all versions of ActionScript.  It’s a little hard.  You have to get some custom components.  It’s much easier if you use a newer version of Flash.  I think Flash four; CS4 is going to come out this month.  So you might even wait until that.  It might have some new features in it. 

And Flash isn’t necessarily the best solution.  It’s not necessarily the most accessible solution but the user base is so high right now and people are expecting videos to be in it, it was the best option for us.  It really was.  I think the adoption rate is over 98% for people with Flash who can do video.  Who have version eight or higher to do the video in the way that we’re doing it.  So we’re like that’s pretty good.  Now we still try to offer alternative content for that 1.2% that don’t have Flash.  You can still offer them the transcripts, you can still offer them the images, you can still do all of that.  I don’t want to drop anybody off.  They should be able to get the content in one way or another.

All right, let’s start off looking at the components.  Actually, no, let’s back up a little bit and look how Flash is usually captured and put online.  This is a method that I see all the time online.  Someone will take some text and they’ll embed the text into a video and they’ll compress the video which first of all means that text is no longer text.  It’s now part of the video and if the resolution sucks, you’re not going to be able to read the text.  And also if screen readers could read it, if it was text they can’t now because it’s just part of a video.  It’s nonsensical. 

We take that video, so you take the text in the video, the video into an interface which add some controls so you could actually do something with it – fast forward, go back, play, pause.  And then you embed that whole thing in an HTML page.

So I saw several problems with that.  The least of which was the captioning but the bigger problem that every time you put a video online, you have to do this again – text in video, video in interface, interface in a webpage.  And so if I decide after a thousand videos that I want to update the interface, I’ve got to go back and redo every single video, every single one.

So a better proposal, the thing that I’m proposing, is a model that looks like this.  Where we still have the interface, that’s this SWF file which is what the output of Flash is called, that’s embedded in the HTML.  Just like a normal Flash file.  But instead of embedding everything in the SWF file, the HTML is going to pass them variables through that tell it the location of the video files and the location of the text files.  Real text captioned files.  And the great thing about this is first of all, the next time I do it, I use that same interface.  And here when I go back and I make a change to the interface, both pages are automatically updated.  I’m making changes in one place and they’re being propagated into the entire system since we’re using a single interface for this entire thing.

The other cool thing is that the individual components are left in pretty much their raw form.  I mean you have to compress your video but the captions are actual text that are being pulled in.  And this has happened quite a bit, we get this thing online and somebody says, “Hey!  You’ve got a horrible spelling mistake here” or “Hey!  Your captions are about two seconds, three seconds off.”  And we can go back and we can update that in the caption file and that’s it.  We don’t have to touch anything else.  We pop it back in, next time somebody plays a video it’s correct.

But this is actually what it’s going to look like and the user interface that we’re using now, this is more of the model.  Now, don’t get too frightened.  This looks like a lot of files but think about a normal webpage.  A normal webpage you’ve got HTML, you’ve got your Java Script, your CSS and you’ve got dozens and dozens of images.  So this is the same kind of modular design that we’re doing for video.  We’ve got the interface and the webpage.  The webpage is going to pass variables through the interface to tell it where to find the video.

In this case, we don’t get the video directly, we get what’s called a smile file, which I’ll talk about more in detail.  And what the smile file does is it allows us to serve up those different bandwidths.  It acts as that conduit so the video file locations are actually specified in the smile file.  And the smile file is very, very simple XML .  Pretty much, you can cut and paste it and put into paths that you want.  The smile file then points to as many videos as you want.  We’ve used four as a convention and I’ll show you exactly what those four different video versions are.  But you can use one, you can use 20.  It really is whatever meets your needs.

We’re also going to point to the captions, which is a larger XML file but you don’t need to know XML for this.  There are a couple of different programs out there that will help you get your captions into this format.  There’s an image, which we’ll talk about a little bit that you need to draw in.  And then you can also draw in any data you want.  For our interface, we specified a title, which shows up on the video.  So not only do they have this image of whatever we want on the poster image but it also gives a title for the video so they know what it is before they click on it.  We want to give them as much information as possible.

All right, so starting off, we’ve been compressing our videos using the bundled Flash video compressor tool that comes with CS3.  And it’s actually pretty good.  It’s a very drag and drop solution.  You take an AVI, an MOV, an MPG, whatever your video format is.  And you throw it into this thing, this is the actual interface.  And then you can go into settings and you can set the bandwidth, to how it’s going to compress it.  You can set the bit rate for sound.  You can set the size of the entire video.  You can set all that stuff and then you click “go” and it just runs through them and spits out your FLV files.

One of the important things to note is that there are two codec options.  Codec is the actual encoding of the videos.  One is Sorenson, which is an older codec, and the other one is ON2 VP6, which ON2 VP6 has some problems but it has much better quality than Sorenson.  For the same bit rate, you actually get better quality also.  I can’t recommend it enough at this point.  Go with the On2 VP6 setting.

Now we do four files as convention right now.  We do a 700K version – kilobit version – a 400K, a 150K and that meets the needs of our broadband users, from the lower DSL up to the cable level.  And we do those at the full size of our interface which is 320 x 240 and I’ve just chosen that because it’s a really nice size to actually embed in-content on the page, you can do larger ones if you wanted.  Then we do a 56K version and I actually do a 56K version at half size, which means it’s 160 x 120.  So it’s going to be upscaled which means it’s going to be a little blocky but you have more room in your bandwidth for the audio.

And audio is very important when somebody is trying to get the content out of a video.  Studies have shown that audio is one of the most important things.  If the video looks great but they can’t hear what the people are saying they’re not going to get much out of it.  If the video is really jerky and kind of sucks but they can hear the audio, they can still usually pull out the meat of what’s going on.  So we’ve really kind gone and said, “OK, for these very low bit rates which is a very small section of our population, we’re going to make sure that we ensure good audio quality and as good as possible video quality.

There are other options out there for compressing.  There are all different programs that will do this for you and the Flash interface should be able to take in any FLV format.  It’ll work with this interface just fine.  I recommend the On2 VP6 codec at this point.  I’m jumping around a little bit but just to let you know since Flash, like 9.125, which is a lot of the user base now.  It’s one of the newer Flash player versions.  You can also embed H264, that’s the codec that you see on iPods.  That’s the codec that can just play on your computer, mobile devices, anywhere else and that’s cool.  That’s really cool because FLV’s, most people can’t even just play them on their computer.  You have to have the interface built in Flash to play them.

When the base gets high enough, which I’m hoping in the next couple of months when people adopt CS4 and a lot of new stuff comes out, I would actually like to switch to H264.  Not only is it a better compressor so you’re getting better quality and you can offer a download straight from the same file.  I don’t know if it’s open source but it’s an open codec, which means that there are things that you could put on your server to automatically compress these.  I throw up the movie file and I don’t have to specify different versions.  I just program that in and it does it all at once.

On2 VP6 is closed; you have to pay a lot of money to use their service IP’s.  So for right now we’re doing it by hand.  And actually we’re not doing it.  I’m having the video production department or whoever wants to do this to do it by hand because it’s easy.

All right, so this is the smile file.  Those videos are going to sit out there somewhere and you have to tell them which one to use for which bandwidth.  So it’s very simple XML and even if you’ve never used XML, all you have to do is go in and replace a couple of things.  The metabase is the actual local path in this case to the video files.  Here it’s buried pretty deep in my site because these are the examples that you can actually see I’ve linked to on my website.  So it’s in resources Web, documentation video, blah-blah-blah-blah.  But it can’t sit anywhere on your computer.

We’re going to do progressive download which means that these are just normal files that downloads X amount.  You can play it.  You have to wait for the whole thing to download to play the whole thing.  That’s the same model YouTube uses.  Streaming is great for really long files where you need to be able fast forward an hour into it and you don’t want to wait for the whole thing to download.  But progressive download is just so much simpler.  They’re normal files, sitting on the server; you don’t need to pay somebody to do something else.  It works really, really well. 

So here’s a local path and then here we go through and say, all right, if the bit rate is 700K or above serve them this file, the 700 version.  400, serve them this one.  150, serve them this one.  And if it’s none of those, if it’s below that anywhere, default to the smallest version that you have.

Now, and again, these are four files that I’ve put in here.  I was talking to Robert Reinhardt he wrote the “Flash Bible” and he’s worked with a bunch of really big companies to do video online.  And he says for production purposes, a really large network, they will do 20 to 30 versions of each video.  So that it figures out your right here in this area, we’re going to serve a highest possible quality that we can give you.  So I found four to be a good middle ground for that because I don’t want to do 20 or 30, maybe when we automate it.

You can do streaming with this exact same interface.  All you have to do is change the base path from a local file to an RTMP server.  So today you can do be doing progressive download, tomorrow you can be do streaming and all you’ve had to change is one path.

Now for the captions.  This is actually a bit of the bottleneck in the process that we found because unfortunately there’s no silver bullet for going from speech to text.  There’s a lot of people working on the problem, a lot of big money even in the government looking at easy ways to do transcriptions and keep a lot of other stuff around.  There’s a bunch of programs out there, applications that you can get that promise to make this really, really easy, but it’s still hard. 

Actually, for some of this we use a program called Dragon Speak which is pretty good but we’ve got a single intern and we’ve trained her voice into this thing.  We can’t just run it on the video itself because it will not be able to distinguish the different videos.  You have to train it to a single voice.  And even doing that, it’s only 80% to 90% correct which means we have to go back through and re-read the whole thing, proof it and do all this other stuff.  So actually, a lot of what we’ve been doing is just hiring students to write the transcriptions.  Quite a bit cheaper on our end.

There are services that will do it for you, haven’t looked into them yet but I know that there are out there but they’re going to cost money because this is a timely thing.  It takes a bit of time to do this.  I mean we’re talking about running through a video and transcribing it.  Once you have the transcripts, it’s then time to add the timed information to know when they’re going to show on the screen. 

This is MAGpie.  MAGpie is from the National Center for Accessible Media.  It’s a Java program.  It will run on any operating system.  It’s free.  I can’t recommend it enough.  I do have to give you the caveat that it was written by the National Center for Accessible Media, not the hardcore programmers so there are some little bugs.  Most of the bugs are in getting it installed in your system.  You have to maybe reinstall Java and get the exact right version but once it’s installed it’s pretty simple and easy to use. 

And it’s free, which is great for me because I can distribute it out to those people who say, “I want a video.”  And I go, “That’s wonderful but you’re going to have to caption it and time it for us.”  So I can put the onus back on these departments who want these videos.  And then they have to think, “Do we really want this video?”  And when they do, they can do that and deliver these files.

How this works is that you have your start time, your end time, a section for the speaker – if you have multiple speakers – and then a section for the captions.  And we found on the size of our interface that we usually limit a single caption to about 100 characters to a palatable amount of information that they could read at one time.  So I usually go through transcripts and I put it in here and I break it up by the sentence, so we’ve got different sentences.  And if there’s a sentence that’s too long, I break it at a natural pause.  I break it at somewhere that it makes sense to break it at. 

And then once I’ve actually put in here, you can go through a run through the video.  You can start the video and you can use one of the keys, I think it’s F6.  And everything you here the caption come up, you press F6 and it automatically dumps the start time.  So rather than going through and trying to figure out the start time, I usually do one or two run throughs of the video.  There we go.  The video’s on there and as I’m listening to it I go, “Now.  Now.  Now.”  And it tags each of those with the start time.

You can also do end times but the only reason that I do that is when there’s a huge pause.  Since when the next caption comes up it’ll replace the old one.  It’s simpler to just put start times in my opinion.  If you’ve got a video that goes to music, well you should tell them it goes to music and put some description in there.  But if it just goes silent, it’s good to get rid of the caption so that the person who can’t hear the sound doesn’t think that the captions are broken.  But other than that, I just do the start time.  And the interface for MAGpie is pretty nice.  It actually shows you the video up here and times out the captions so you can do all the timing right inside of MAGpie.

There are some other versions out there, some pay-for versions like Captionate is one of the options that’s out there.  I think there’s a couple other now that do relatively the same thing.  Free though is a great price and it works really well for us.

When you’re done and you’ve gone through this transcribing, time encoding process, which is a very simple process, but it is time consuming.  It’s non-technical but it is time consuming.  You’ll notice that MAGpie lets you export it in a number of ways.  You can export captions for QuickTime, Real Player, which I don’t recommend using Real Player.  I just can’t do it.  Windows Media Player or the W3C DFXP format, which is a timed text format that’s supported by the W3C, and it works really beautifully with this interface that we’re going to create.

The final piece which I’ve mentioned was this poster image and it’s dual purpose.  The first purpose is that many videos when you start them start out black and fade into something.  And coming across a video that just is black, that’s not a lot of information.  You want to give them the feeling of what this video is going to be about.  So we take an image and we put it up on the screen before they click on the video.  This case it’s a student video which I’ll show you later.  And this is a picture of the guy who created it.

The poster image does another duty which is we’re going to use it to estimate our bandwidth.  It’s going to be the first thing to download.  And when it downloads we’re going to see how long it takes and it’ll give us a really good estimation of what the bandwidth is.

All right, so those are the separate pieces that you need to create.  Now we’re actually going to talk about the interface a bit.  If you haven’t worked in Flash very much, that’s all right.  We’re not going to be doing the normal timeline kind of way that you work on Flash and animate things.  We’re just going to be building some layers and throwing the pieces we need onto those separate layers.  Kind of like Photoshop where you just build layers up. 

The first layer that I always throw down is just the background layer where I can do some of this branding.  In this case, I’m talking a white place.  I know the video is going to be up here, the controls are going to be down here.  This is the basic version.  I brand it a little more like our institution on the live version.  Yeah?

Audience 1:  [Inaudible]

Gabriel McGovern:  240, which is half of TV size.

Audience 1:  [Inaudible]

Gabriel McGovern:  No.  Actually this right here, the white are where the video is going to go is 320 x 240.  And then this is where the controls are going to go so yeah, you have to add on to it.  And in this case, I’ve chosen to put the captions actually on a layer above the video which may or may not be the best option.  It keeps the whole interface compact but when you’re watching the captions, you’re going to lose a little bit of the video.  So if you want to have the captions off the video, you have to make your interface even that much larger.

So, on the next layer we’re going to throw down some of the components that we need, that help us do this.  And these are components that are built into Flash, ActionScript 3.  With ActionScript 2, I think there are some special ones that you have to download from some third party sources but you can do it if you really feel like it.

First, we’re going to use the FLVPlayback component, which is the thing that’s going to hold our video.  Whatever video we choose to put in there, the FLVPlayback is going to hold that.  Then we have an FLVPlayback captioning component, that’s that stretched out thing.  That’s where my captions are going to be held.  Just take these things and throw them onto that layer.  And then also, there’s a UI Loader and UI Loader is just something that’s going to hold our image, our poster image.  And it allows us to see how long it takes to download and it’s really useful.

The important thing to remember when you’re throwing these components onto the interface that you’re building is to make sure that you name each of them.  So here is CC pane, that’s my closed captioning component and I called it CC pane so I can refer to it later.  Because we’re going to need a little bit of scripting to tell these things exactly what to do, so you have to give them a name.

On the next layer, go ahead and throw down some controls.  There’s a long list of controls built into Flash.  You can also create your own but there’s a lot that are out there.  Here we put in a play/pause button, a stop button, a mute/unmute button.  You can put in a slider for volume but you know what, I find people just reach over and turn up their speakers, so keep it simple.  And I’ve also put in a captioning that turns the captions on and off so that they can have that option to see them or not see them.

There’s also, and it’s a little hard to see on this, there’s a seek bar for scrubbing through the videos.  So they can fast forward and rewind using that.  There’s also a little thing that lets them know when it’s loading which is up there.  But you can also throw in all these different things – full screen, fast forward, rewind.  You can make your interface as complicated or simple as you really want. 

Now for each of these controls, it’s important to visit the accessibility panel in Flash.  There is one.  It’s kind of hidden, doesn’t come up on the standard layout so you have to search for it a little bit.  It’s under Windows something accessibility panel.  And it lets us do a couple of things.  It lets us give each of these components a name and this name is what a screen reader would pick up.  And Flash is actually pretty good.  Screen readers are getting better at reading Flash.  There are still some major problems just like anywhere on the Web when things change so it’s only going to be able to pick up, at this point, the first thing that comes up which our components are going to be there when the Flash first comes up.  So it should be able to recognize them. 

So you want to give them a name so they know what it is and more of a description.  So our play/pause button toggles the video between play and pause, very simple.  And then you’re going to give this shortcut, what they call it, in this case “P”.  Now this is not necessarily an access key and I learned this the hard way.  I went in there, I put “P” for pause and I finished the whole thing, I export it, I run it and the video is playing.  The captions are working and I hit “P” and nothing is happening.  This is the communication with the screen reader to tell it what the action key is but it does not actually set up an action key.  You’ve got to do that yourself.  I learned the hard way.

All right, and then final thing we’re going to look at is ActionScript, it’s for what the components can’t do.  There are some limitations.  We’re going to look at reading the variables so we can put the paths into our separate components.  We’re going to look at setting up the video and handling video events when it’s playing, when it’s pausing, if we might want it to do different things.  We’re going to estimate the bandwidth which is really cool because it let’s us serve up just the right video.  And we’re going to add those darn access keys which Flash promised us but didn’t actually deliver.  And I’m going to run through this really quick because it’s all online for you to download.

Here we’re loading in the variables.  You can see I’ve just called them “path video”, “path CC”, “path image”.  And then I do a little bit of expressions there to see if I have all the components I need and if I don’t, can I still play.  Let’s start out, if the video is not available, if there’s no video entered, we can’t really do anything.  Just display an error.  Somebody screwed up.  If the video is available but there’s no image available, the poster image, we can still play the video.  We just don’t know which version to give to them.  And so I think in this basic logic I’ve just said give them whatever the lowest quality is.  But there is no reason to throw an error because they still can see the video, we just don’t have that extra enhancement of giving them the estimated bandwidth.  But if you have both, go ahead and estimate the bandwidth and load the correct video.

Here we’re setting up the video and it’s really simple.  I’m just setting some automatic stuff like I don’t want the thing to auto play just like those MySpace pages that play music, I don’t want my video to start playing when they come to the page.  I want them to actually have to go, “Oh, a video!”  And to decide to actually see the extra content.  Also set the path for this CC, for the close captioning.

The more important thing down here is the video events.  You can set up event handlers to see when the thing stopped, when it’s playing, when it’s fast forward, when it’s rewinding.  You can really control it a lot.  And here’s one example that’s really important.  We need to know whether the video is playing or stopped because remember, we threw the poster image on top of the video.  So when somebody hits “play” and the video starts, we need to remove that poster image or they won’t see the video.  And then if they hit “stop” we want to throw it back in there so they don’t get that blank screen that’s at the beginning of most videos. 

There’s a lot more even handling you can do in the version that we’re using now.  We’re checking a lot of different events to set up the state of the entire player.  This is just a simple one and one of the most important ones.

Here is the small bandwidth estimation script.  And there’s a lot of little math in there but the important thing is that it starts a timer, it downloads the image and it sees and then it stops the timer when it has the image.  So it sees how long it takes to download an image, it sees the size of the image and from there it estimates the bandwidth.  Now it’s never going to be exact, it really isn’t.  They might be downloading something else, there might be a lot of network traffic.  But it’s really going to tell us is this a 56K, is this dial-up or is this a one meg version.  It’s going to let us know which video to throw to them.

And finally, the access keys.  You need to set up those access keys that you told screen readers that you were going to use.  There will be nothing more frustrating than setting up an access key and then not actually having it work.  So here’s just some of the access keys.  These ones were set up in the basic version.  The thing you need to know is the number each key on the keyboard is assigned a number.  So in this case, 101 specifies “E”, which end/stop.  112 is for “P”, which is that toggle between play and pause.  And I also, just for an example, I put up I think this is rewind which you can see the logic just says go ahead and take the video and shoot it back five seconds.  So every time you press it’ll rewind.

All right, so let’s actually take a look at what we’ve put together here.  Now notice that that code was under 100 lines of code with comments, with spaces, with all that.  It’s actually not that much.  I mean it’s like this much when you look at on the screen.  The production one, this one over here, has quite a bit more code.  So I recommend when you go in and look, start with the basic one.  It’ll give you a really good idea of how the whole thing is laid out, then take the full version and modify it how you want.

So let’s see.  So here, this is the actual interface that we just built.  You can see it’s not that pretty, it’s got that blue bar that we put up there but it should, when we hit “play” it loses the poster image, starts playing.  You can hear the sound, you can mute the sound, you can set the captions in there.  Now can anyone see the problem with the captions?

Audience 2:  [Inaudible]

Gabriel McGovern:  Yeah, it’s really hard to see.  There’s no contrast there.  I mean this is the default with just clear behind it so it’s pretty useless.  You could do this better if you had it not displayed on the video but then you’d have to have a larger interface and for our use we decided to try to keep it as compact as possible. 

So for production, and I’ll show you in a second, we put a black bar behind there when it comes up and people can toggle between those.  Here’s the scrub bar.  It’s got a little triangle on it and there’s a lot of this music in here.  You have nutria out here?  Has anybody seen these things?  They’re rodents from South America that were imported for the fur trade and they’re weird.  They’re very weird.  They’re getting really aggressive.  This is a tour of Portland, really strange tour but here you can see when you scrub through it will find the new captions and sync them up.

All right, so there’s the very basic version and it actually works quite well.  It’s a great place to start your customization.  Here’s the version that we’re using in production right now which isn’t that advanced.  I wanted something very, very simple.  The buttons have been stylized a little bit.  I’ve changed the – normally Flash has a little bubble for putting captions up there and I wanted to build something more standard and I think CC is a little more standard.  I’ve noticed a lot of people using that.

The title, you’ll notice the titles up there.  There’s a play button.  The whole thing becomes a play button so you can click any one of the video to start it.  There’s also some hidden stuff when they go over it.  It lets them know when they’re scrubbing through the video, where they’re at out of how much videos.  They can know if it’s a 10 minutes, 20 minutes, three hours of video.  And there’s also menu that’s put in place to describe how to use this interface because remember, we’ve got 82% or people, 83% of people telling you that they watch video online.  What happens when one of those 15% or 17% who haven’t ever seen a video online, who don’t even know what this thing is come here?  Hopefully they’ll click the instructions, that’s my hope, and they’ll see what’s going on.  And also you can specify the access keys.

Standards for access keys, if anybody knows a good standard, please let me know.  There are standards for access keys on the Web, a lot of applications, but for video I could not find a standard.  Even YouTube I don’t think even has many access keys in it.  So I look to the media players like Windows Media Player, VLC which is a great media player if you don’t know about it.  And I kind of borrowed from their access keys where I could.  So “P” is play/pause, as the spacebar just because it’s really, really convenient.  We’ve got end, stop, rewind, fast forward, volume up, volume down which mutes it.  The captions to show the menu and I’ve actually added a couple of other things which if I have time I’ll show you.  I think I’m short on time.  But here if we play it, that’s the exact same video, and hopefully you’ll be able to read the captions a little better when you’re actually looking at it on a monitor.

Now I'll stop there.  I have some other things that I want to show you but are there any questions at this point?  Yes.

Audience 3:  I have a comment.  I’m wondering about YouTube has captioning capabilities now, they just set up last month.  There’s a new feature that they’ve add text is extremely simple.  All you need is the video, the script with the time code and it sets it up.  YouTube will automatically add captioning.  So there’s no need for the different software like Flash and taking all the time to,..  So I’m wondering what your view is on that.

Gabriel McGovern:  Well there are two actual questions there and that’s funny because when I was coming to give this talk I was going to start out by saying the reason you need to do this is because you can’t do it on YouTube.  And then a couple of days ago I looked and they just implemented in the last two weeks.  Now the implementation isn’t perfect.  They don’t use all formats of captioning.  They use SRT and a couple of others that are used on DVD’s. 

Now there are two reasons to do it yourself.  And the first of which is what I talked about earlier that we’re creating an interface that is going to blend and work with our institution.  It’s really about the branding.  The problem I find with YouTube is every time you put a YouTube embedded you’re having an ad for YouTube to go out.  So you’re doing some extra work to build the interface.

The other part is that even if you use YouTube and if you’re using YouTube now I really recommend that you do the captioning but you still have to do the captioning.  You still have to get the transcripts; you still have to time them out in some kind of format with some kind of software.  So that piece, unless you know something, there’s no real silver bullet out there.  You still have to do the same amount of work.

Audience 3:  It’s the same idea...

Gabriel McGovern:  Well yes, but you still have to take the time to make the captions.

Audience 3:  So if you do the Flash you need to have more knowledge knowledge, it’s a higher learning curve to do it.  So it seems like if your staff isn’t very knowledgeable with Flash then YouTube would be easier for them.  Just upload it, you don’t have to deal with Flash.

Gabriel McGovern:  And you’re completely right and I recommend for a lot of people who don’t want to get into this – now remember my codes are online so if you’re not a Flash expert, you can actually just take my code and run it yourself.  It’s already built.  But if you don’t want to go through all that I recommend YouTube.  And if you do YouTube, make sure that you’re doing the captioning.  This is really the next step to go to the next level.  It gives you the control of the videos.  It gives you the branding.  It gives you so that you’re not linking out to YouTube every time.  So it gives you all this other stuff and it’s a very nice way because we’re using a single interface, it keeps me sane.

Now, now that I’ve built it and we’ve put a lot of the onus on the different departments and people who want video.  I tell them, “OK, you’re the ones creating the video, you also have to splice with the captions.  We’ve got the interface, it’s actually very simple for me to do this.”  Now I’m going to jump in actually and that’s a really good segue to what I want to show which is – let me pause this for a second.  If we skip back in slides to that one where I show all the different pieces that was kind of scary with everything out there, the important thing to know is that a lot of this can be automated, automated YouTube style.

These videos, we’re using a desktop application but there are actually server-side applications that can do that where somebody can specify upload a video and it will make the different versions online.  And it will write that smile files so you don’t ever have to touch it.  So they would need to supply and upload the video file.  They would need to upload the caption files just like YouTube, but everything behind that can be automated.  If we do this, I would still like to have somebody on the front end that says, “This is OK for copyright reasons.  This is OK for institutional reasons.”  So you still have to have some process there.

Now the one thing that’s keeping us from doing that today is that the ON2 VP6 codec that I was talking about is proprietary and it costs thousands and thousands of dollars to use at server-side.  When the adoption rate for H264 is out there we can set up something, that piece would be free and automate the vast majority that we’re doing here.  So it is a lot of initial work.  Well, I shouldn’t even say a lot since I’ve supplied all the code for you.  For me it was a lot of initial work but now that it’s out there it’s just going to be as simple as using YouTube.

That’s my goal.  It’s something that’s our own little mini YouTube where we can add all those little bells and whistles that are just for us and we don’t have to worry about YouTube.  Every time you go in there you lose some control and Google is really good about that at this point but they can choose at anytime to start displaying ads.  To start limiting – well they limit video too unless you have a director’s account.  You can do all those different things.  And we also use the same interface for streaming for our distance students who are off campus how need to get two, three-hour videos.  We use the same interface through our streaming server and it’s one place.  So that’s my take on it.  Other questions?

Audience 3:  [Inaudible]

Gabriel McGovern:  Well when you embed a YouTube video, correct me if I’m wrong, but unless you’ve got a special deal with YouTube, every time you double click on the video it takes you back to YouTube.  It also says “YouTube” right on it in the video.  So I don’t know if you can customize the interface.  I’ve gone a different way.

Audience 3:  But when you click the video it doesn’t necessarily go back to YouTube.  You can make Like a Java Script, just like a pop-up window on there.  But instead of Java Script you have html, that’s what we at our school are doing with that and then it comes up there’s no...

Gabriel McGovern:  Yes, and that’s probably a really good solution for you to be doing.  We decided to take a step further and do as much of it in-house as we can.  Maybe it’s just because I’m a control freak and I want to make sure that it looks like the rest of the pages.  But for people who aren’t ready to make that jump I recommend either YouTube, since they can do captioning now, or there’s a bunch of players out there that’s drag and drop and will do the captioning for you.  JW-something player.  Does anybody know? 

Who looked at that?  There’s one out there that does pretty much everything we’ve done here but it’s just a drag and drop solution.  There’s also the National Center for Accessible Media has one but I don’t know how much you can customize those players.  So a lot of what we’re talking about here is not just the accessibility but also the idea of creating an interface that lets you customize it and add whatever you can.  There’s another question though.

Audience 4:  It’s more of a comment.  About helpful distance learning or professors but on the flip side, when we do news and stories we want people to share those things and the shareability of the embedding them and plugged in there automatically by YouTube, Google Video, Vimeo is a real desirable feature to have.

Gabriel McGovern:  Yes.  Do you do that manually right now?  Do you actually go out and upload to different accounts, Vimeo, YouTube and all these places?

Audience 4:  Yes same with Google Videos closed captioning.

Gabriel McGovern:  Yes.

Audience 4:  YouTube has captioning.  We have an education partnership and Vimeo has just been very nice in terms of quality but they don’t have captioning.  But all three offer that social aspect.

Gabriel McGovern:  Yes, and we’re doing the same thing.  Video should work in multiple places since there are video sharing sites out there.  It’s just like RSS.  Every time that we put a video on the site and we’re proud of it we go ahead and we upload it to YouTube, Vimeo and a lot of these other places.  And those actually have API’s as well.  So if we go to a more automatic solution, we’re doing a lot of it server-side, we can set that up so I don’t have to go and manually update it.  It’ll do it itself.  It will work with the API, which I’m really excited about.

But the important thing is I want people on the video sharing sites to see our content and use it as a conduit to come into our site, not the other way around.  I want people coming to our site, clicking on some content either accidentally or intentionally probably, and going out to YouTube or Vimeo or any of those places.  I want people coming in not being pulled away unless they explicitly need to go there.  Another question.

Audience 5:  [Inaudible]

Gabriel McGovern:  You mean descriptive like instead of captions?

Audience 5:  [Inaudible]

Gabriel McGovern:  Yes.  There’s the really nice thing about, you saw MAGpie when we’re doing this.  You can actually set up different tracks.  And what we do right now is if there’s descriptive text that needs to be there, we embed it right along in line with the captions which may or may not be the best thing.  You can actually set up different tracks so they could turn on one or the other.  And what’s really cool is you can do even different languages.  You can have a caption in Spanish, French, Japanese, whatever you want and it’ll let you do that.  You just have to modify your interface to be able to choose between them.

One other thing I want to show really quick, and I’m sure there are more questions.  I think we’re over but I’ll be happy to answer questions one-on-one afterwards.  Recently I went through and I made some updates.  And since it was interface I updated it on one place and it went everywhere.  I kind of hid them.  I didn’t put the buttons right on the screen but when you’re playing the video, you get full screen.  We’re just testing it out right now but it seems to be something that people want.  And now every video that we have out there has full screen.  It’s nice.  We updated it in one place.

Even cooler than that in my opinion is I was thinking to myself, all right, we’ve got these captions that are out there in XML.  And it’s really important that you time them.  That’s very important for someone who won’t hear the sound.  It needs to be timed so that they can match it with the videos going on.  But you might just want to be able to read through it, just a normal transcript.  So I created a small server side thing.  It sends it the location automatically every time you – you have to tell it the location of the transcripts anyway.  Here’s what the DFXP file looks like – XML, nothing special.  And it takes this and it runs through and for each speaker it lines the sentences back up.  It puts them back into humanly readable paragraph form which is what you see right here.  So suddenly, every single video that we have online has the ability to have a transcript hooked right to it, all several hundred of them.

This only has one person speaking so it’s not as cool.  When there are multiple speakers, it breaks it up.  I’m just using a definition list.  But it’s one of those nice added features that you don’t have to wait for YouTube to do it.  You can do it yourself and it’ll propagate over the entire site.

Audience 5:  [Inaudible]

Gabriel McGovern:  What we do is we’re using SWF object to embed the Flash.  And what it does is it replaces a DIV on the page.  And so that DIV we have an image and we have a link directly to the transcript.  For that 1.2% of the population who doesn’t have Flash or Java Script, instead they’ll still get the image and the transcripts.  They’ll be able to pull out much of the content, so yeah, definitely.  I think that’s my time.  I’m going to stop there but I’m happy to answer any questions one-on-one.  Thank you.

[Applause]

Announcer:  For more presentations from the 2008 HighEdWeb Conference visit HighEdWeb.org/2008 or sign up for our podcast and feed at HighEdWeb.org/podcast.xml

[End Music]