Hi, in this lecture we're going to talk about multimedia.
This is including video and audio into your website.
Now video and audio are two of the most popular and
two most hated elements of the web.
Designers love it because they get to put their cool videos and
perhaps some homemade music online and share with everyone.
People accessing your site sometimes hate it because they feel like they don't have
any control over what they're seeing.
So, what we're going to talk about today is the HTML5 audio and video elements.
We're going to briefly explain the purpose of plugins.
And then finally, we're going to reflect on the accessibility issues
that come hand in hand with using these types of multimedia tags.
So before HTML5 there weren't really any consistent uses of multimedia
that were being held across all the browsers.
So the new HTML5 is designed to kind of avoid the use of having to use plugins or
extra software that you don't already have on your machine.
It should really be plug and play.
If you're gonna put in a video, people should just be able to see it without
having to download Quicktime or Flash, or anything along that line.
Now it's not a fully implemented tag yet.
But it's moving very quickly in that direction.
So let's start with the video element.
So the video tag uses a source attribute that is very similar to
the image attribute.
You tell the browser where the file is.
You can also use what we call embedded tags,
where you might have the video tag and then multiple sources down below.
There are a number of attributes that are used very widely.
The first two, height and width, are pretty self explanatory.
How big would you like your video to appear in the browser?
Autoplay dictates whether or not the video should start as soon as you load the page.
Loop will allow the video to play over and over.
And the last one, controls, is something you can add to give the person more
control over when to stop and start the video.
If you use a video tag, it's usually a really good idea to put some
text in there along with the different attributes.
That way, if the browser for some reason does not support the tag or
can't play the video, you get a kind of helpful hint to the user letting them know
there should be a video here that you would be looking at.
The audio element is very similar to the video, and
then again we use a source attribute to link to the file.
Typically, you're going to use a .mp3 or .wav file.
The attributes again, very similar.
You have autoplay, controls, and loop, but we also have buffered, muted, and volume.
And these are the extra attributes you can put in where you're going to control
what the person's listening to and how loud.
Also when you're using audio, you can set clips where you can go in and
say, I want the video to start at this particular time.
So my first example, I want it to only play the music from 5 to 25 seconds.
The next one, you start at the beginning and
you only are gonna play the first 39 seconds.
Again, you can go on and on.
I want to start at one minute 38 seconds, and just go ahead and play to 45.
Or in the end you can just say, hey, start at the 42 second and play from there.
So showing you the code for HTML video and
audio is pretty much the antithesis of what it's all about.
It's supposed to be about looking at things and hearing things.
So let's go ahead and look at some code now that's actually working.
You can see that I have the src as just my BoxCar movie, and
I've set the default width to 40.
So, I'm gonna go over here to Sublime and open this up in the browser.
There it is, and it's not very exciting.
Unless you have super quick eyes and your browser is incredibly fast, you completely
missed the fact that it loaded this video and played all the way through.
So let's go ahead and try this again.
Actually, it just loaded it and didn't do anything.
Let's add autoplay.
All right, save it.
I'm going to go over here and reload, and now you can see
by adding the autoplay attribute, it'll automatically show the video.
Now this is something you don't want to do unless you're very certain
that the viewer wants to see it.
There was a big uproar recently when a social media site
started making all of the videos autoplay.
So if you went on, all the sudden all these videos were playing.
And it was eating up a huge amount of bandwidth for people, all right?
So, instead of just doing autoplay, let's go ahead and put in controls.
By doing this,
you can see we've now added a little control panel to the bottom of the video.
People can now start the video, stop the video, and rewind it.
This is really the way you kinda wanna think about
how you can enhance the experience for the user.
It is possible to put multiple attributes
into this and kind of put them on top of each other.
If we do this now, you get to experience my
five year old flying down the road multiple times over and over again.
Again, you would really want to avoid using loop and also avoid using auto-play,
unless you're giving people the opportunity to use the controls as well,
all right?
One last thing I want to talk about here is you might notice with controls and
loop, these are attributes that don't appear to be taking any values.
So src =, width =.
When you put in these boolean attributes,
it's the same thing as saying controls equals true.
Loop equals true.
So that's how we went through with our video.
Let's go ahead and look at the audio for a second.
Make this a little bit bigger here.
What I have here is I just have a link to the same song two times.
In my first version, you can see that I'm given the little audio bar,
because I made sure to use controls.
And if I'd play, it's going to go ahead and play through the whole song.
However in my second option, you can see I've added, right here, the t=15:35.
I've set it up for you so
you'll really get to hear the song from when the exciting part really kicks in.
So these are just some simple examples of how you'd use the tags to show your
video audio.
And I really hope that as you're coding, your making sure to type things along, and
mess with things, and play with things to really get a feel of how these videos and
all the different HTML5 tags are working.
So one of the things I talk to people about, who have been coding in
other versions of HTML and don't really want to make the change over to HTML5.
That there are so many reasons that you want to make this quick simple switch.
And plugins are an excellent example.
Since before HTML5, there was no standard, plugsins were required.
So what we want to do is go ahead and
even if it's not supported at the moment, go ahead and use this tag,
understanding that some browsers my still require Flash in order to play them.
Finally, let's talk about accessibility issues.
When you're going to use video or audio, just like with any type of non contextual
content, you want to make sure you provide any type of text descriptions and
closed captioning or other equivalent content.
You want to make sure that you also provide any links to plugins.
Otherwise, you're pretty much just left with some sort
of blank little broken icon that people don't always understand.
And finally, the most important thing I'd like you to take away from this talk,
beyond being able to use the code,
is that multimedia should really enhance your content.
You don't want it to be a distraction.
You don't want people spending time trying to figure out how to turn it off so
they can, in order to really get to the content of your page.
Thanks.