Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The video element allows us to embed video files into an HTML, very similar to the way images can be added.
HTML Elements
- <video> - The video element allows webpages to play video files inline with other content.
Resources
Video and Audio URLs
Here are the video and audio files used in this course. There is no need to download these files; they are just listed here so that you can easily copy these URLs into your code.
- http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.mp4
- http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.ogg
- http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge-audio.mp3
Playing Video and Audio Locally
If you choose not to use Workspaces for this course, you'll need to follow these instructions. Otherwise you can ignore them.
When playing video and audio files locally that come from a remote source, the same-origin policy requires a web server to be running.
There are many ways to do this on both Mac and PC, but one of the easiest ways is to install an all-in-one application like MAMP.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
To get started, click the workspaces
button next to this video.
0:00
We're going to be using
workspaces in these videos.
0:03
But if you prefer to use
a different text editor,
0:06
be sure to read the notes
associated with this video.
0:10
They contain important details about
setting up a local web server, and
0:13
working with files.
0:17
Now in your workspace you should already
have the beginnings of a project
0:19
just like the one I have here.
0:23
But before we start writing our own code,
0:25
let's take a quick tour of
what's already in the project.
0:28
So first, we have this html
file called simple-video.html,
0:32
and here's what that file looks like
when you click on it and open it up.
0:40
And you'll notice some
pretty familiar things.
0:46
We have DOCTYPE, html, body,
a head element, a few meta elements.
0:49
The title element, some links and
0:55
in these link's elements were including
normalize.css from our css folder.
0:58
We're including a font that we
want to use throughout, and
1:05
we also including this file main.css.
1:10
And let me just open up main.css so
you can take a look what is in there.
1:14
And there is pretty basic stuff
just to make our web page
1:20
look good and kind of a starting point.
1:26
So nothing necessarily specific to
what we are going to be working on.
1:28
However down here,
you will also notice video audio and
1:32
MEJS tree house, which stands for
Media Element JS Treehouse.
1:37
And this is all going to be kind of
styling our audio and video elements.
1:43
And basically just
centering them on the page.
1:48
So that's all that this is doing.
1:52
If you don't want your video and
audio elements to be centered.
1:54
You can go ahead and remove this or
style them a little bit differently.
1:58
So I'm going to close that, and
2:03
down here you'll notice we'll have
an H1 element and a wrapper element.
2:05
So right now there's really
not a whole lot there.
2:11
Let's click the preview button and we'll
click on port 80 which is the default.
2:13
and that's going to open up
a page that looks like this.
2:19
So here we have an HTML file.
2:22
We'll click on that.
2:25
Simple video HTML.
2:26
Here's what it should look
like to start out with.
2:28
There's just an H1 here
with HTML video and audio.
2:30
And then there's nothing
inside of our wrapper.
2:34
But you can kinda see it there,
it's that thin grey bar.
2:38
And we're actually gonna
fill it up with content, so
2:41
that will actually extend down the page.
2:43
So let's get started
with the video element.
2:46
I'm going to type video and
then I'm going to type src for
2:50
source, which is very
similar to the image element.
2:56
And right here, I'm just going to
past a URL that I already have handy.
3:00
And this is a link to a video file and
3:05
you can find these particular URLs in
the notes associated with this video.
3:09
And you'll also find it
in upcoming workspaces,
3:15
if you choose to open up
a different workspace.
3:18
So I have added that video there, and
I'm going to add an attribute called type.
3:22
And this type is going to be video/mp4,
3:31
because that's the particular file
format that we're using here.
3:33
In this case, we're going to use a style
of the video, "tag", that is self-closing.
3:40
Now we don't necessarily
have to do that but
3:47
this is the most simple type of
way to include video to our page.
3:49
So let's start off with that.
3:55
So we'll save that out and
switch over to our preview.
3:57
And when we refresh the page, you can see
that we now have this video on our page.
4:01
But there's a problem.
4:05
This video isn't playing automatically,
but
4:07
there's also no controls
to start the video playing.
4:10
So we need to actually add that ourselves.
4:13
So on our video element.
4:16
We'll add the attribute controls.
4:19
And we'll add that attribute without
any kind of value attached to it.
4:24
Because it's a boolean attribute.
4:29
That means it can either be true or false.
4:31
So by having the controls attribute there,
it means that it's true and
4:34
it will display controls.
4:39
So we'll save that out,
switch back to our preview and refresh.
4:41
And as you can see,
we now have these controls for our video.
4:45
And now we can hit Play, and
you'll see that the video starts to Play.
4:49
And it kinda moves along the timeline
here just like you'd expect.
4:58
We also have a little audio control
here and a full screen button.
5:01
And this is all built
directly into the browser, so
5:05
depending on what browser you're using,
this might look slightly different.
5:09
In this case I'm using Google Chrome,
but in a browser like Firefox, or
5:13
Internet Explorer, or
Safari this could look slightly different.
5:17
And that's okay.
5:21
Now, if we remove controls we could
also make the video auto play.
5:23
So, we'll save that,
switch back, and refresh.
5:30
And as you can see,
the video is now playing by itself, and
5:34
there's no controls.
5:37
So, we didn't actually start the video,
but we also can't stop the video.
5:38
So, let's go back.
5:42
We'll add controls back in,
save and refresh, and
5:45
that will bring us back to what we want.
5:49
Now, we could also have controls and
autoplay.
5:51
So we can make the video play
automatically on page load and
5:54
also have our own controls.
5:58
It's really up to you and
kind of up to use case that you are in.
6:00
However, be careful when you add Autoplay
because you don't always want every
6:05
video on your page or every audio element
on your page to play automatically.
6:10
That would be bad.
6:14
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up