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.