1
00:00:00,140 --> 00:00:03,770
To get started, click the workspaces
button next to this video.

2
00:00:03,770 --> 00:00:06,830
We're going to be using
workspaces in these videos.

3
00:00:06,830 --> 00:00:10,380
But if you prefer to use
a different text editor,

4
00:00:10,380 --> 00:00:13,580
be sure to read the notes
associated with this video.

5
00:00:13,580 --> 00:00:17,650
They contain important details about
setting up a local web server, and

6
00:00:17,650 --> 00:00:19,260
working with files.

7
00:00:19,260 --> 00:00:23,710
Now in your workspace you should already
have the beginnings of a project

8
00:00:23,710 --> 00:00:25,790
just like the one I have here.

9
00:00:25,790 --> 00:00:28,590
But before we start writing our own code,

10
00:00:28,590 --> 00:00:32,330
let's take a quick tour of
what's already in the project.

11
00:00:32,330 --> 00:00:40,760
So first, we have this html
file called simple-video.html,

12
00:00:40,760 --> 00:00:46,210
and here's what that file looks like
when you click on it and open it up.

13
00:00:46,210 --> 00:00:49,200
And you'll notice some
pretty familiar things.

14
00:00:49,200 --> 00:00:55,500
We have DOCTYPE, html, body,
a head element, a few meta elements.

15
00:00:55,500 --> 00:00:58,740
The title element, some links and

16
00:00:58,740 --> 00:01:05,350
in these link's elements were including
normalize.css from our css folder.

17
00:01:05,350 --> 00:01:10,790
We're including a font that we
want to use throughout, and

18
00:01:10,790 --> 00:01:14,440
we also including this file main.css.

19
00:01:14,440 --> 00:01:20,690
And let me just open up main.css so
you can take a look what is in there.

20
00:01:20,690 --> 00:01:26,010
And there is pretty basic stuff
just to make our web page

21
00:01:26,010 --> 00:01:28,380
look good and kind of a starting point.

22
00:01:28,380 --> 00:01:32,970
So nothing necessarily specific to
what we are going to be working on.

23
00:01:32,970 --> 00:01:37,250
However down here,
you will also notice video audio and

24
00:01:37,250 --> 00:01:43,050
MEJS tree house, which stands for
Media Element JS Treehouse.

25
00:01:43,050 --> 00:01:48,930
And this is all going to be kind of
styling our audio and video elements.

26
00:01:48,930 --> 00:01:52,260
And basically just
centering them on the page.

27
00:01:52,260 --> 00:01:54,630
So that's all that this is doing.

28
00:01:54,630 --> 00:01:58,730
If you don't want your video and
audio elements to be centered.

29
00:01:58,730 --> 00:02:03,030
You can go ahead and remove this or
style them a little bit differently.

30
00:02:03,030 --> 00:02:05,410
So I'm going to close that, and

31
00:02:05,410 --> 00:02:11,310
down here you'll notice we'll have
an H1 element and a wrapper element.

32
00:02:11,310 --> 00:02:13,850
So right now there's really
not a whole lot there.

33
00:02:13,850 --> 00:02:18,150
Let's click the preview button and we'll
click on port 80 which is the default.

34
00:02:19,150 --> 00:02:22,050
and that's going to open up
a page that looks like this.

35
00:02:22,050 --> 00:02:25,300
So here we have an HTML file.

36
00:02:25,300 --> 00:02:26,350
We'll click on that.

37
00:02:26,350 --> 00:02:28,530
Simple video HTML.

38
00:02:28,530 --> 00:02:30,530
Here's what it should look
like to start out with.

39
00:02:30,530 --> 00:02:34,870
There's just an H1 here
with HTML video and audio.

40
00:02:34,870 --> 00:02:38,040
And then there's nothing
inside of our wrapper.

41
00:02:38,040 --> 00:02:41,500
But you can kinda see it there,
it's that thin grey bar.

42
00:02:41,500 --> 00:02:43,490
And we're actually gonna
fill it up with content, so

43
00:02:43,490 --> 00:02:45,260
that will actually extend down the page.

44
00:02:46,410 --> 00:02:49,590
So let's get started
with the video element.

45
00:02:50,760 --> 00:02:56,530
I'm going to type video and
then I'm going to type src for

46
00:02:56,530 --> 00:02:59,420
source, which is very
similar to the image element.

47
00:03:00,680 --> 00:03:05,930
And right here, I'm just going to
past a URL that I already have handy.

48
00:03:05,930 --> 00:03:09,430
And this is a link to a video file and

49
00:03:09,430 --> 00:03:15,540
you can find these particular URLs in
the notes associated with this video.

50
00:03:15,540 --> 00:03:18,680
And you'll also find it
in upcoming workspaces,

51
00:03:18,680 --> 00:03:21,280
if you choose to open up
a different workspace.

52
00:03:22,340 --> 00:03:29,420
So I have added that video there, and
I'm going to add an attribute called type.

53
00:03:31,260 --> 00:03:33,960
And this type is going to be video/mp4,

54
00:03:33,960 --> 00:03:40,320
because that's the particular file
format that we're using here.

55
00:03:40,320 --> 00:03:47,430
In this case, we're going to use a style
of the video, "tag", that is self-closing.

56
00:03:47,430 --> 00:03:49,980
Now we don't necessarily
have to do that but

57
00:03:49,980 --> 00:03:55,490
this is the most simple type of
way to include video to our page.

58
00:03:55,490 --> 00:03:57,580
So let's start off with that.

59
00:03:57,580 --> 00:04:01,090
So we'll save that out and
switch over to our preview.

60
00:04:01,090 --> 00:04:05,470
And when we refresh the page, you can see
that we now have this video on our page.

61
00:04:05,470 --> 00:04:07,440
But there's a problem.

62
00:04:07,440 --> 00:04:10,000
This video isn't playing automatically,
but

63
00:04:10,000 --> 00:04:13,670
there's also no controls
to start the video playing.

64
00:04:13,670 --> 00:04:16,570
So we need to actually add that ourselves.

65
00:04:16,570 --> 00:04:18,490
So on our video element.

66
00:04:19,510 --> 00:04:22,730
We'll add the attribute controls.

67
00:04:24,360 --> 00:04:29,210
And we'll add that attribute without
any kind of value attached to it.

68
00:04:29,210 --> 00:04:31,800
Because it's a boolean attribute.

69
00:04:31,800 --> 00:04:34,540
That means it can either be true or false.

70
00:04:34,540 --> 00:04:39,740
So by having the controls attribute there,
it means that it's true and

71
00:04:39,740 --> 00:04:41,710
it will display controls.

72
00:04:41,710 --> 00:04:45,600
So we'll save that out,
switch back to our preview and refresh.

73
00:04:45,600 --> 00:04:49,630
And as you can see,
we now have these controls for our video.

74
00:04:49,630 --> 00:04:56,280
And now we can hit Play, and
you'll see that the video starts to Play.

75
00:04:58,130 --> 00:05:01,370
And it kinda moves along the timeline
here just like you'd expect.

76
00:05:01,370 --> 00:05:05,780
We also have a little audio control
here and a full screen button.

77
00:05:05,780 --> 00:05:09,020
And this is all built
directly into the browser, so

78
00:05:09,020 --> 00:05:13,380
depending on what browser you're using,
this might look slightly different.

79
00:05:13,380 --> 00:05:17,870
In this case I'm using Google Chrome,
but in a browser like Firefox, or

80
00:05:17,870 --> 00:05:21,450
Internet Explorer, or
Safari this could look slightly different.

81
00:05:21,450 --> 00:05:22,270
And that's okay.

82
00:05:23,340 --> 00:05:28,840
Now, if we remove controls we could
also make the video auto play.

83
00:05:30,850 --> 00:05:33,490
So, we'll save that,
switch back, and refresh.

84
00:05:34,630 --> 00:05:37,110
And as you can see,
the video is now playing by itself, and

85
00:05:37,110 --> 00:05:38,200
there's no controls.

86
00:05:38,200 --> 00:05:42,960
So, we didn't actually start the video,
but we also can't stop the video.

87
00:05:42,960 --> 00:05:45,000
So, let's go back.

88
00:05:45,000 --> 00:05:49,190
We'll add controls back in,
save and refresh, and

89
00:05:49,190 --> 00:05:51,490
that will bring us back to what we want.

90
00:05:51,490 --> 00:05:54,740
Now, we could also have controls and
autoplay.

91
00:05:54,740 --> 00:05:58,240
So we can make the video play
automatically on page load and

92
00:05:58,240 --> 00:06:00,370
also have our own controls.

93
00:06:00,370 --> 00:06:05,290
It's really up to you and
kind of up to use case that you are in.

94
00:06:05,290 --> 00:06:10,270
However, be careful when you add Autoplay
because you don't always want every

95
00:06:10,270 --> 00:06:14,930
video on your page or every audio element
on your page to play automatically.

96
00:06:14,930 --> 00:06:16,240
That would be bad.