Tip:
Highlight text to annotate it
X
What's going on everybody! Welcome to this fifth tutorial on HTML5 and CSS3, my name
is Jack Jenkins and this is Academy of One. Today we are going to take a quick look at
videos and images.
First off we are going to take a look at the image tag, after that we are going to look
at the video tag, then we are going to switch over to desktop view for some examples.
The image tag just specifies where an image is going to be. The image tag is a single
tag. Here are a couple of safe formats for it to use. You can use the Jpg, the Png and
the gif. These formats work with every browser which is really nice. And there is an example
below. There are a couple of attributes needed for your image. The first one is the src attribute.
That specify the path of the image you want to display. The second one is the alt whose
value is a description of the image. The other attributes you want to keep in the back of
your mind is the height attribute which specifies the height. The width which specifies the
width, and the border which specifies if you want a border around your image.
The video tag specifies a video you want within you web page. Now the video tag can be single
or double tag, depending on whether or not you have a lot of attributes. Now the file
extensions are a bit different then they are with images. The first one is MP4 which works
with safari, chrome, and IE, and they will not work with say Firefox. Cause Firefox will
not take this file extension. The next one is OGG which works with Firefox and opera.
WebM works with chrome Firefox IE and opera. It's important to know that you need to keep
your videos in multiple formats. Otherwise it won't work within the browser you want.
Now the video tag takes the same required attributes as the image tag. Which remember,
is the alt and the source. So I'm going to be talking about the new tags. The first one
is the auto-play tag, Which means once the video has loaded the video starts automatically
playing. The next kind of tat is the controls tag. Each browser comes with its own javascript
code for video. So if you don't feel like making your own javascript code, or using
youtube, you can just run the browsers javascript code with the controls keyword. The next one
is the loop attribute. Which means once the video is done it will loop automatically.
I'm going to bring up height and width again just to talk to you about something. It is
really bad idea to define height and width within your HTML. Because what its going to
be doing is when the user clicks on your page It's going to load your whole picture and
then it's going to resize it. You don't want that because if you have tons and tons of
images then it's really going to slow down the browser load speed. What you should do
is put it up in say photoshop and then resize it.
Alright, so first thing first, your going to need a folder with both a video and an
image. In this case. I am going to be using WebM and JPEG because I'm going to be running
it in chrome. Then create an HTML file and Create your HTML outline. Alright, so first
we are going to be creating the video tag. First required attribute is the SRC. Which
is the path of where the file is going to be located. In this case, my file is b_f.webm.
The next required tag that I forgot to talk about is the type tag. All it is, is the type
of extension we are going to be calling. In this case the video is 'Video/webM'. We are
going to be playing a video, and the extension is going to be a webM. Next we are going to
need the alt, for screen readers and SEO and a whole bunch of stuff. In this case its going
to be "This is a video". Next, I'm going to be doing something you guys should never ever
do. I'm going to be changing the height and the width of the video. I'm going to be doing
this just to show you what will happen. Again, don't ever do this in real life. I'm going
to change the width to be 360 pixels. The last thing I want is the browsers controls.
Of course there are many more attributes you can add to the video tag.These are going to
be good enough for the demonstration. One reason why you should never ever use this
is because, what's going to happen is the browser is going to render out the video then
it's going to put out the controls tag. So your going to have this giant whitespace everywhere.
And that's something you don't want. Don't ever use the height tag in real life. I love
this video so I'm going to let it play. Realize this video player is just a bunch of javascript,
and if you continue on with these tutorials and continue to learn about javascript then
you're going to be making your own video player. So go ahead and close this out. Next we are
going to be creating our image. A required attribute for image is the SRC. I'm putting
in "Cat_dog.jpg". Next is going to be alt which is, well I'm just going to leave that
error there. Again, I'm going to change both the height and the width. And again, don't
ever do this. So as you can see we got this extremely weird and crunched up picture next
to this messed up video. It's not a good idea to actually do this and, in most cases, you
want a line break between them. So they appear one under the under. So that's it for the
image and video tags, with tis you can implement your own video and images.
That's it for this video. Tune in next week when we start talking about meta tags as well
as link and style tags.