1
00:00:08,883 --> 00:00:12,200
Hi, in this lecture we're going
to talk about multimedia.

2
00:00:12,200 --> 00:00:15,400
This is including video and
audio into your website.

3
00:00:15,400 --> 00:00:17,700
Now video and
audio are two of the most popular and

4
00:00:17,700 --> 00:00:20,790
two most hated elements of the web.

5
00:00:20,790 --> 00:00:23,970
Designers love it because they
get to put their cool videos and

6
00:00:23,970 --> 00:00:26,840
perhaps some homemade music online and
share with everyone.

7
00:00:26,840 --> 00:00:30,069
People accessing your site sometimes hate
it because they feel like they don't have

8
00:00:30,069 --> 00:00:32,528
any control over what they're seeing.

9
00:00:32,528 --> 00:00:37,000
So, what we're going to talk about today
is the HTML5 audio and video elements.

10
00:00:37,000 --> 00:00:39,850
We're going to briefly explain
the purpose of plugins.

11
00:00:39,850 --> 00:00:42,940
And then finally, we're going to
reflect on the accessibility issues

12
00:00:42,940 --> 00:00:46,030
that come hand in hand with using
these types of multimedia tags.

13
00:00:47,840 --> 00:00:53,030
So before HTML5 there weren't really
any consistent uses of multimedia

14
00:00:53,030 --> 00:00:55,700
that were being held
across all the browsers.

15
00:00:55,700 --> 00:01:01,350
So the new HTML5 is designed to kind of
avoid the use of having to use plugins or

16
00:01:01,350 --> 00:01:03,970
extra software that you don't
already have on your machine.

17
00:01:03,970 --> 00:01:05,310
It should really be plug and play.

18
00:01:05,310 --> 00:01:08,586
If you're gonna put in a video, people
should just be able to see it without

19
00:01:08,586 --> 00:01:12,160
having to download Quicktime or
Flash, or anything along that line.

20
00:01:12,160 --> 00:01:15,130
Now it's not a fully implemented tag yet.

21
00:01:15,130 --> 00:01:17,000
But it's moving very
quickly in that direction.

22
00:01:18,080 --> 00:01:20,110
So let's start with the video element.

23
00:01:20,110 --> 00:01:23,640
So the video tag uses a source
attribute that is very similar to

24
00:01:23,640 --> 00:01:25,040
the image attribute.

25
00:01:25,040 --> 00:01:27,480
You tell the browser where the file is.

26
00:01:27,480 --> 00:01:29,966
You can also use what
we call embedded tags,

27
00:01:29,966 --> 00:01:34,700
where you might have the video tag and
then multiple sources down below.

28
00:01:34,700 --> 00:01:37,620
There are a number of attributes
that are used very widely.

29
00:01:37,620 --> 00:01:40,710
The first two, height and width,
are pretty self explanatory.

30
00:01:40,710 --> 00:01:43,880
How big would you like your
video to appear in the browser?

31
00:01:43,880 --> 00:01:47,510
Autoplay dictates whether or not the video
should start as soon as you load the page.

32
00:01:48,570 --> 00:01:50,430
Loop will allow the video to play over and
over.

33
00:01:50,430 --> 00:01:54,260
And the last one, controls, is something
you can add to give the person more

34
00:01:54,260 --> 00:01:56,680
control over when to stop and
start the video.

35
00:01:57,950 --> 00:02:01,030
If you use a video tag, it's usually
a really good idea to put some

36
00:02:01,030 --> 00:02:03,650
text in there along with
the different attributes.

37
00:02:03,650 --> 00:02:06,560
That way, if the browser for
some reason does not support the tag or

38
00:02:06,560 --> 00:02:10,300
can't play the video, you get a kind of
helpful hint to the user letting them know

39
00:02:10,300 --> 00:02:12,700
there should be a video here
that you would be looking at.

40
00:02:14,050 --> 00:02:16,730
The audio element is very
similar to the video, and

41
00:02:16,730 --> 00:02:19,670
then again we use a source
attribute to link to the file.

42
00:02:19,670 --> 00:02:23,790
Typically, you're going to use a .mp3 or
.wav file.

43
00:02:23,790 --> 00:02:25,460
The attributes again, very similar.

44
00:02:25,460 --> 00:02:30,580
You have autoplay, controls, and loop, but
we also have buffered, muted, and volume.

45
00:02:30,580 --> 00:02:33,900
And these are the extra attributes you
can put in where you're going to control

46
00:02:33,900 --> 00:02:35,820
what the person's listening to and
how loud.

47
00:02:37,360 --> 00:02:40,820
Also when you're using audio,
you can set clips where you can go in and

48
00:02:40,820 --> 00:02:44,280
say, I want the video to start
at this particular time.

49
00:02:44,280 --> 00:02:49,830
So my first example, I want it to only
play the music from 5 to 25 seconds.

50
00:02:49,830 --> 00:02:51,660
The next one,
you start at the beginning and

51
00:02:51,660 --> 00:02:54,360
you only are gonna play
the first 39 seconds.

52
00:02:54,360 --> 00:02:55,690
Again, you can go on and on.

53
00:02:55,690 --> 00:03:00,250
I want to start at one minute 38 seconds,
and just go ahead and play to 45.

54
00:03:00,250 --> 00:03:05,360
Or in the end you can just say, hey, start
at the 42 second and play from there.

55
00:03:05,360 --> 00:03:07,920
So showing you the code for HTML video and

56
00:03:07,920 --> 00:03:11,120
audio is pretty much the antithesis
of what it's all about.

57
00:03:11,120 --> 00:03:13,940
It's supposed to be about looking
at things and hearing things.

58
00:03:13,940 --> 00:03:17,370
So let's go ahead and look at some
code now that's actually working.

59
00:03:17,370 --> 00:03:20,280
You can see that I have the src
as just my BoxCar movie, and

60
00:03:20,280 --> 00:03:22,320
I've set the default width to 40.

61
00:03:22,320 --> 00:03:25,310
So, I'm gonna go over here to Sublime and
open this up in the browser.

62
00:03:28,250 --> 00:03:31,150
There it is, and it's not very exciting.

63
00:03:31,150 --> 00:03:35,680
Unless you have super quick eyes and your
browser is incredibly fast, you completely

64
00:03:35,680 --> 00:03:39,490
missed the fact that it loaded this
video and played all the way through.

65
00:03:39,490 --> 00:03:41,092
So let's go ahead and try this again.

66
00:03:41,092 --> 00:03:43,590
Actually, it just loaded it and
didn't do anything.

67
00:03:43,590 --> 00:03:45,020
Let's add autoplay.

68
00:03:49,300 --> 00:03:50,690
All right, save it.

69
00:03:52,290 --> 00:03:55,940
I'm going to go over here and
reload, and now you can see

70
00:03:55,940 --> 00:03:59,760
by adding the autoplay attribute,
it'll automatically show the video.

71
00:03:59,760 --> 00:04:02,670
Now this is something you don't want
to do unless you're very certain

72
00:04:02,670 --> 00:04:04,050
that the viewer wants to see it.

73
00:04:04,050 --> 00:04:06,890
There was a big uproar recently
when a social media site

74
00:04:06,890 --> 00:04:09,900
started making all of the videos autoplay.

75
00:04:09,900 --> 00:04:12,425
So if you went on, all the sudden
all these videos were playing.

76
00:04:12,425 --> 00:04:15,740
And it was eating up a huge amount
of bandwidth for people, all right?

77
00:04:15,740 --> 00:04:21,845
So, instead of just doing autoplay,
let's go ahead and put in controls.

78
00:04:23,810 --> 00:04:24,800
By doing this,

79
00:04:24,800 --> 00:04:30,120
you can see we've now added a little
control panel to the bottom of the video.

80
00:04:30,120 --> 00:04:34,190
People can now start the video,
stop the video, and rewind it.

81
00:04:34,190 --> 00:04:36,650
This is really the way you
kinda wanna think about

82
00:04:36,650 --> 00:04:39,530
how you can enhance the experience for
the user.

83
00:04:39,530 --> 00:04:42,130
It is possible to put multiple attributes

84
00:04:44,450 --> 00:04:49,210
into this and
kind of put them on top of each other.

85
00:04:49,210 --> 00:04:52,270
If we do this now,
you get to experience my

86
00:04:52,270 --> 00:04:55,390
five year old flying down the road
multiple times over and over again.

87
00:04:55,390 --> 00:04:59,462
Again, you would really want to avoid
using loop and also avoid using auto-play,

88
00:04:59,462 --> 00:05:03,125
unless you're giving people the
opportunity to use the controls as well,

89
00:05:03,125 --> 00:05:03,720
all right?

90
00:05:03,720 --> 00:05:07,717
One last thing I want to talk about here
is you might notice with controls and

91
00:05:07,717 --> 00:05:11,910
loop, these are attributes that don't
appear to be taking any values.

92
00:05:11,910 --> 00:05:13,101
So src =, width =.

93
00:05:13,101 --> 00:05:15,685
When you put in these boolean attributes,

94
00:05:15,685 --> 00:05:19,310
it's the same thing as
saying controls equals true.

95
00:05:19,310 --> 00:05:20,960
Loop equals true.

96
00:05:20,960 --> 00:05:22,830
So that's how we went
through with our video.

97
00:05:22,830 --> 00:05:24,580
Let's go ahead and
look at the audio for a second.

98
00:05:24,580 --> 00:05:26,500
Make this a little bit bigger here.

99
00:05:30,590 --> 00:05:34,480
What I have here is I just have
a link to the same song two times.

100
00:05:34,480 --> 00:05:37,570
In my first version, you can see
that I'm given the little audio bar,

101
00:05:37,570 --> 00:05:40,170
because I made sure to use controls.

102
00:05:40,170 --> 00:05:44,000
And if I'd play, it's going to go
ahead and play through the whole song.

103
00:05:44,000 --> 00:05:50,170
However in my second option, you can see
I've added, right here, the t=15:35.

104
00:05:50,170 --> 00:05:51,262
I've set it up for you so

105
00:05:51,262 --> 00:05:54,930
you'll really get to hear the song from
when the exciting part really kicks in.

106
00:05:56,260 --> 00:06:00,455
So these are just some simple examples
of how you'd use the tags to show your

107
00:06:00,455 --> 00:06:01,260
video audio.

108
00:06:01,260 --> 00:06:05,289
And I really hope that as you're coding,
your making sure to type things along, and

109
00:06:05,289 --> 00:06:09,147
mess with things, and play with things to
really get a feel of how these videos and

110
00:06:09,147 --> 00:06:11,850
all the different HTML5 tags are working.

111
00:06:11,850 --> 00:06:14,980
So one of the things I talk to people
about, who have been coding in

112
00:06:14,980 --> 00:06:19,550
other versions of HTML and don't really
want to make the change over to HTML5.

113
00:06:19,550 --> 00:06:23,630
That there are so many reasons that you
want to make this quick simple switch.

114
00:06:23,630 --> 00:06:25,720
And plugins are an excellent example.

115
00:06:25,720 --> 00:06:29,750
Since before HTML5, there was no standard,
plugsins were required.

116
00:06:29,750 --> 00:06:32,100
So what we want to do is go ahead and

117
00:06:32,100 --> 00:06:35,410
even if it's not supported at the moment,
go ahead and use this tag,

118
00:06:35,410 --> 00:06:39,060
understanding that some browsers my still
require Flash in order to play them.

119
00:06:41,240 --> 00:06:44,190
Finally, let's talk about
accessibility issues.

120
00:06:44,190 --> 00:06:48,267
When you're going to use video or audio,
just like with any type of non contextual

121
00:06:48,267 --> 00:06:52,047
content, you want to make sure you
provide any type of text descriptions and

122
00:06:52,047 --> 00:06:54,550
closed captioning or
other equivalent content.

123
00:06:54,550 --> 00:06:58,220
You want to make sure that you
also provide any links to plugins.

124
00:06:58,220 --> 00:07:00,799
Otherwise, you're pretty much
just left with some sort

125
00:07:00,799 --> 00:07:04,630
of blank little broken icon that
people don't always understand.

126
00:07:04,630 --> 00:07:08,728
And finally, the most important thing I'd
like you to take away from this talk,

127
00:07:08,728 --> 00:07:10,476
beyond being able to use the code,

128
00:07:10,476 --> 00:07:13,390
is that multimedia should
really enhance your content.

129
00:07:13,390 --> 00:07:15,100
You don't want it to be a distraction.

130
00:07:15,100 --> 00:07:18,586
You don't want people spending time trying
to figure out how to turn it off so

131
00:07:18,586 --> 00:07:22,300
they can, in order to really get
to the content of your page.

132
00:07:22,300 --> 00:07:22,800
Thanks.