HTML Embedded Content

Welcome back to Educator.com.0000

Today, we are going to be looking at embedded content--specifically, images, audio, and video--0002

and how to embed those into a web page.0009

Let's get right into the code.0014

We have here a little outline I have prepared.0018

First, let's look at embedding an image: let me just show you, really quickly, what this web page looks like.0023

It is just a bunch of headers right now; and we are going to type in, right here, an image.0031

Images are pretty simple.0037

This is one of the oldest media tags; it goes way back to the days of Mosaic, one of the first browsers that added the ability to include an image.0039

And there was a little bit of a controversy about whether it should be a tag like this, img, with a source;0050

and then you specify, say, a folder and an image; or whether it should be something more like embed, and then a source;0058

and then maybe something like a type that lets you know what type of content you are embedding.0071

For historical reasons, and because there were already some browsers doing things in this way, this is what they went ahead with,0079

even though they figured, "If we do it this way, eventually we are going to have to have an audio tag and a video tag,"0087

which is just what has happened; but it is not a bad thing, because until now, we haven't had tags in HTML.0093

We have had to embed things like Flash Players or plug-ins in order to play video or audio.0103

Now, we just have a tag very similar to the image tag.0110

This is how the image tag works: refresh it, and there is a little image--very, very simple.0113

The browser has access to this; for example, you can right-click on it and do things like copy it, get some information about it, save it...0121

There are a couple of other options: say you want to give it a width--you can do that easily and size it up.0136

Now, this is generally something you don't want to do, because it looks kind of pixolated.0149

It gets out of proportion; and you can size it down, as well; but then, you have an image that is bigger than it needs to be.0155

We will delete that; now, let's look at some image file formats.0166

You will notice that I used the jpg extension here; this happens to be a JPEG image.0174

There are a lot of other file formats that you can use.0180

I'm going to copy some code over that I prepared earlier and paste it in here.0184

What this is that I have just pasted in: it is a bunch of figures, using correct code.0198

But the important parts are these images here: they are all the same image, this picture of me visiting a Darth Vader art exhibit.0204

And they are each using a different file format; and this will illustrate some of the differences in the different file formats.0214

JPEG is probably one of the most popular file formats.0224

That last picture I showed you was a JPEG; this is JPEG.0230

JPEG is really good for images with a lot of color and a lot of variety.0233

You can see this picture: it is not really pixolated--there aren't a lot of compression artifacts.0238

And it is sizing well, even though this is zoomed in a little bit.0247

The same thing down here for png's; you will notice that the color is a little bit brighter--png's actually have more colors than a jpg does.0253

And it does the same sort of good job with not having artifacts and having lots of colors, and there are not a lot of hard edges here.0264

It is kind of fuzzy; but then, when there are hard edges, they show up well, as well.0276

Now, gif, on the other hand, is a format that is terrible for images.0280

You can see that it does not have a lot of colors.0286

You get this effect of the colors breaking into hard lines.0290

And the hard edges get broken up into weird little color artifacts.0297

And you can fix that a little bit with some options that gif has.0301

There is something called dithering: this is the same image as a gif with full dither.0305

And it breaks up some of those lines, so you don't have those lines in here and here, for example.0310

They are broken up, so it looks a little smoother.0316

But then, you can see these dots, as well.0318

And I have saved these images to emphasize the effect a little bit.0321

For example, this would be a dither with the full color; and you can see, it is a lot better than this one.0326

But it is still not as good as the JPEG or the PNG images.0332

This is the best image that you can create with a GIF.0337

Compare it to the JPEG below; you can see some of the differences.0343

Those are the most common file formats for images on the Internet.0350

It used to be that png's were not well-supported by browsers.0357

But nowadays, pretty much any browser that you are going to be using will support png's.0360

Now, also take into consideration the compression, because all of these are actually compressing the file.0366

This full-color GIF is 72 kilobytes, compared to 40 for the dithered one and 39 for the normal one.0372

Now, the PNG has a lot higher of a file size, because it is using the full colors.0381

But if you wanted to, you could use the same number of colors as JPEG or GIF, and the PNG would be better compression.0390

So, PNG is a better file format all around, for a lot of things.0398

And then, the GIF 47--GIF is very popular, because if you take a picture on, say, a digital camera,0404

it is usually going to always automatically save it in the JPEG format.0410

And it has good compression; you can set the compression values to be little compression0415

(which will make the file size much larger, but it will look better) to a lot of compression0422

(which can make it smaller, if you are really worried about bandwidth).0428

Now, this last image here is the JPEG in its original size that is not compressed; it is not resized down.0432

It is just the original JPEG compression, and I have browser-resized it to be a lot smaller.0442

So, if we look at the picture un-sized, it is this big.0449

This is something that you will see on some websites, where the original picture hasn't been sized down for the web page.0456

It is just right there, and then sized down using the browser.0465

And that slows down the browser when you are trying to load and scroll.0471

And it slows down the downloading speed, and you can actually see in here, if you have an eye for it--0475

there are a lot of artifacts from browser resizing, especially since this is actually sized up, so it is closer to the original size.0482

If I were to make this the original size that it is sized down to, you can see a lot more artifacts in here.0488

So, don't ever depend on just the browser to resize an image; it is almost never going to have the same quality,0493

and it is just going to be a negative effect on the usability.0500

I am going to go in here; I am actually going to delete that one, because it is slowing down everything.0506

Now, we can look at the way that these different image formats deal with more precise lines and fewer colors.0519

This would be the sort of images that you might see that aren't just photographs, but say an image that is part of the design of a website--0529

so, borders around things, or little logos or decorations that you want to be precise.0539

JPEG does not do a good job with these sorts of images.0546

You can see here these artifacts of the compression around the edges here.0548

It does a little better job on the straight line, although on the corners you can see a little bit of artifacts.0553

And even if you have it at really high quality, you are always going to have a little bit of this artifact.0559

And also, the coloring is not as good; you can compare it to a PNG.0568

This red circle here has lost a lot of its brightness; so has the blue square.0572

JPEG is not a good format for these sorts of images.0581

PNG does well at both; it is both good for photographs, and for this sort of line art with more precision needed.0583

Even though it is a compressed image, there is not as much loss in here.0592

In fact, I can't see any loss; every pixel looks like it is in the correct place, as far as I can tell.0595

And it is also much smaller; this is an 8-kilobyte image, and the PNG, which has superior image quality, is only four kilobytes.0600

And this is also something that GIF's are really good at; this is a 4-kilobyte GIF--the same size;0608

and it is pretty much indistinguishable from the PNG--they both display it really well.0613

Some other differences that you have are: GIF's have been able to do image transparency and animation;0620

and PNG's can do transparency as well, and there are some methods being employed to make PNG's use animation, as well;0628

but it is not well supported at this time, so right now, if you have an image that you want animated, it is going to be a GIF usually.0639

If you want a photograph, it is going to be either a PNG or a JPEG.0644

Here is an animated GIF...the browser is crashing a little bit, because it is a fairly large image, and it is resized.0649

This is a GIF that is just continually repeating.0662

And you could do the same thing with PNG, but it is not as well supported.0666

What PNG's are really great at is alpha transparency.0669

So, this image right here has this white area; it is not just a color placed on it--it is actually transparency.0673

You are seeing the white background behind this image, showing through.0680

And you will notice that there is a gradient: it fades slowly.0683

When a GIF does transparency, it is just a 1-color transparency, usually,0688

which means I could select maybe the red color, and make that transparent, so that all of this would be transparent.0692

Or I could select, maybe, just the white color.0698

But you couldn't do something like this, where it fades out.0700

In fact, I am going to pull open Opera browser, because the Opera browser has a built-in extension,0702

sort of like Firebug in Firefox, that will allow me to take this up.0715

I am highlighting it right here, and I am going to pull the margin up and make it negative.0726

And you can see that it is transparent all the way throughout the whole range; it is not just a single color.0733

That is alpha transparency; and it has some problems with Internet Explorer,0742

although you can add in some special code to make alpha transparency work in Internet Explorer.0748

I think Internet Explorer 9 will support alpha transparency in PNG's; all other browsers will support it, if you have a modern version.0755

That is the images; now, as of HTML5, we can do the same sort of thing with audio--it is very clean.0767

So, this is the old way of embedding audio in a web page--all this code right here, from here to here.0780

This is what you need just to embed one song, or a little audio clip.0793

So, you have this object; you have to specify its class ID; if you get the class ID wrong, then it is not going to load.0800

You have to specify the code base; you can see right now that it is using an Apple code base,0806

so if the user doesn't have this Apple plug-in installed (it is QuickTime, QT), then it is not going to work for them.0813

And either it will just be broken, or they will be prompted to install the plug-in.0820

They will have to take the time to try and install it; it may or may not work.0825

You can specify the width and height, and then you have these parameters that are also needed,0828

because it wasn't consistently implemented in different browsers.0833

So, you need these, as well; specify a file and a lot of other information.0837

And then, you need special code for Internet Explorer here.0841

This is an I.E. conditional comment; so, this is actually code that Internet Explorer made up to target just Internet Explorer.0845

And you have a whole separate code, basically the same as this, but a little bit different, using different types, etc., for Internet Explorer.0854

And this is just really complicated; and after all of that, you have multiple layers.0865

You have the browser; you have the plug-in; and then you have the actual audio element playing.0873

And the website has no access to the plug-ins or the audio itself.0877

And, for example, you will not be able to resize the player unless you do it through all of these complicated controls.0886

You can't update things dynamically.0891

The new way of doing it is vastly better.0893

Let's put it down here.0898

It is just the audio element, just like that: you can give it a source, and filename...0904

And the audio element actually, unlike the image element, is not an empty element.0925

It is closed; and this is for historical reasons.0932

The image element is really well supported by browsers; the audio element is only supported by new browsers.0937

So, what we can put in here is a little message saying, "Your browser"...a little message.0944

What this does is: a browser that can process this audio element will not display this text right here, or whatever else you put in here.0956

But an older browser will get confused by this tag and just sort of ignore--just treat it as something like a div tag.0965

And then, it will display this text; so this is a way to target users who have out-of-date browsers.0975

You might give them the option to upgrade, give them some links to a couple free browsers (like Firefox, Chrome, Opera,0981

or a new version of Internet Explorer)...another thing you can do is give a manual link to the piece of media in question; just go to the link.0988

And this is a better thing to do, because then, people with older browsers will still be able to access the content here very easily.1012

And they will download it, and then they will have whatever they need on their computer to run it--1022

assuming that they have something that is capable of playing MP3's.1028

And if you are clever, you can actually also use this whole object code.1032

All of this is not needed anymore (it is a mess); but if you do take the time to figure it out, and do it the old way for the old browser,1038

you can just paste that whole thing in here; now, the audio element ends here and begins way up here.1049

New browsers will just see the new audio element the right way.1061

And then, the old browsers are going to get all of this.1065

Let's take a look, really quickly, at what we have so far.1068

Here is the old way of embedding audio; and you shouldn't be surprised that it is just broken right now, actually.1077

We don't have the plug-ins installed; I probably have some typo in there; and it is just a big mess.1084

Now, the new way (where did it go?) is much simpler.1090

It is actually in here; I forgot to give it a control, so that it shows up.1110

Now, you can see the controls.1122

This is just automatically part of the browser; I can play it here.1126

You won't be able to hear it, because the speaker is on my shirt right here.1130

But all of these controls are just built into the browser, and you can seek, and there are a lot of other things you can do; I will show you in a minute.1134

But you will notice that, even though I had all this extra code that made this little broken plug-in,1144

this thing right inside this audio element--it is not showing up, because this browser is able to read it just fine.1149

This is Firefox, by the way; now, say you wanted to look at it in Chrome.1159

Chrome is going to display it a little bit differently; it is up to the browser how they want to render the controls.1168

It is a browser function, so every browser is going to be a little bit different.1176

When you are in Safari, it is going to look maybe a little bit nicer, more like Safari--more like Mac sort of controls.1183

And this is really good: you can style it with additional stylings, if you want.1191

But the point is that I now have access to this from the browser.1196

In fact, let's say that I wanted to not use this at all, but just add a little button and give it a type.1200

Now, it is actually really simple to control this.1225

I'm going to give this an ID of audioPlayer, and now this control down here that I am making manually...1230

I am going to say, when it is clicked, we get the ID of the player.1247

Now, I am going to copy this code over, really quickly; OK.1270

This is a little bit of JavaScript: you will learn about JavaScript later, hopefully, if you are serious about web design.1285

But this is an event; so, when it is clicked, it will run this script.1294

And what the script does is grabs the element, which we just specified up there, which is this one; and then, it uses this method to play it.1298

Here, we will do it in Chrome: here is this little button I have created, and you see it is not playing.1311

If I click this button, it starts playing.1316

You can do a lot of different things like that: it is all available in the browser now.1321

Let's add a couple of other ones, while we are at it.1326

Here are some other methods that you can use.1344

This is pause, and it is just the same as the one up here, except the method is pause.1347

Now, this one is a little bit trickier: you have the audioplayer.volume, and then, instead of just calling it, like these are,1355

you are setting it equal to this value; but you are actually not just setting it equal to...1364

this is a JavaScript shorthand notation that says, "Take this, and then add to it this value," basically.1369

So, for volume, the way that audio works is: 0 is muted, and then 1 is full-volume.1378

This is going to add .1 to it, and it will make it 10% louder every time you click this Louder button.1387

And then, the same thing here: this Quieter button that I have made (you have a -) will make it 10% quieter each time.1393

This is a mute button, which takes the muted property and sets it to true (which hopefully has been set to false already).1401

And then, this one will un-mute it (set it back to false); take a look.1412

So now, I have all of these little controls here.1420

I can play it, pause it (look right here), and I will mute it and un-mute it.1428

Right now, it is at full volume; I can make it a little bit quieter (see it move down?).1435

And so, now I don't even need the audio element that gives it the controls--this right here.1439

This the controls attribute; it is a boolean, by the way, which means you don't have to set it something like controls=true; that doesn't work.1452

This is a boolean, so just existing right here makes it on.1461

And then, if you don't have it, it makes it off.1466

So, if you really wanted to put the whole thing in here, like this, this would be for XHTML syntax, because every attribute needs a value.1468

And it is just boolean, so it is just on or off, basically; it is not true or false (you can't set it to false; not existing would be false).1481

I am going to remove it--no controls; and now, they are gone, but I have made my own here.1489

So, if I press Play, you can actually hear it (I can hear it; you probably can't).1500

And you can style whatever you want.1506

I used a button; you can use a link; you can use an image; you can use pretty much anything you want.1509

And there are a lot of other methods and things that you can do available, using JavaScript.1514

Now, we have all of this complicated stuff here.1524

I forgot to mention that you can actually take this Download Manually link and put it inside here.1527

We have this object, and then all of the parameters are children of it.1535

We can put this link in here; and if a browser doesn't support the object tag in this way, then they will get the Download Manually link.1542

So, this way, you have sort of tiered levels of support.1554

You have just the good HTML5 video and audio for new browsers.1558

And then, if that doesn't work, then you can fall back to the object element for slightly older browsers.1566

And then, if that doesn't work for some reason, then it falls back to just a simple link; and they can download it on their own.1571

Interestingly, you can take advantage of this, if you want to.1580

Let's add some code down here; if you want to target older browsers, and say you want to give a message specifically1586

to people using browsers that are not HTML5-ready, you can use the video element and the audio element.1599

And there is also the canvas element; and what this will do is: anything you put in here is only going to show up1608

to browsers that don't support the video, and don't support the audio element, and don't support the canvas element.1623

So, a lot of browsers right now fit this, actually.1631

But if you have a brand-new browser, you won't see this.1635

But if you have a slightly older browser, we are going to put a message that says something like this.1637

And you can send messages to them; you might recommend that they upgrade, or something like that.1650

There are a lot of attributes that you can add to these controls and the players.1667

So, let's clean this up; we don't want to deal with all of this right now.1675

Let's just work with the audio element by itself; OK.1684

I'll make another copy down here.1706

We have already talked about controls, and that will make it visible with the controls, so that users can play with it a little bit, and go throughout, selecting...1710

Another one you can add is autoplay; it is another boolean attribute.1725

If I add this, it is going to make it so that the browser automatically starts playing it, as soon as I load.1732

And you can see: it is playing here.1738

Don't do this! It is really annoying when you have a web page that starts playing music right away.1740

It is here if you really want to, but there are almost no use cases where this is not going to just be annoying.1745

But it is sort of the HTML5 methodology of paving the cow paths; this is something that people do.1753

And if it is not included here, people are going to figure out ways to do it anyway.1760

So, the ability to do it is added and available; but most web developers are going to say it is a bad idea.1764

Now, another one we can do, besides autoplay: we can say loop.1777

If it wasn't annoying enough that you started playing it right away, now it will play endlessly.1784

Once it gets to the end here, it is going to loop back around to the beginning and just keep playing over and over and over.1788

So, if you really wanted to bother somebody, you could have a little short clip that just looped around.1796

But that is not what...annoying people is easy; making a website that is nice, and a joy to use, is difficult.1804

We already looked at some of the JavaScript elements.1815

Probably the last one that is really interesting is actually only available for video, not audio.1819

So, I'll just say right now: it is the preload.1826

My mistake; this is available for audio, as well.1837

Preload is going to tell your browser to load the full file into memory,1841

so that when you do click Play (because you have the control to click Play, because you didn't use the autoplay attribute--don't use that!)...1846

when you do click Play, it will already have loaded the whole thing.1855

So, that is going to be preload=auto, which means to just go with the browser default.1860

And all of the browsers are going to default to preloading all of the audio and video that you have in your page.1867

Now, that can be bad, in some cases, because you may have, say, many, many, many audio playing.1875

And your browser is going to crawl to a halt, trying to download all these things.1884

Or you might have something that, for some other reason, you don't want preloaded.1887

You can set this to none, and then it won't preload it.1892

You are not going to be able to see the difference here, but there might be a pause,1899

or you might have to wait for it to buffer a little bit, when this is set to none.1902

You can also set it to meta-data, which will allow you to specify its preload state elsewhere in the meta information.1905

That is all the information for audio; now, video is actually very, very similar.1916

It has almost all the same tags and attributes and format syntax.1924

Let's set up this video section here.1931

Video is very similar: it is a video tag, and it is not an empty element, so you have to close it.1934

And the same thing here: you can put messages to the users that don't have browsers supporting this video element yet.1948

Actually, let's not be mean: let's do something like this.1961

That is a much better use for the video.1979

You might also be tempted to put things inside the video, like...say you have a transcript of what is being said in the video.1985

You might be tempted to do something like set up a paragraph and put the transcript in here, or whatever the text is.1993

The problem with this is that, if you put things inside the video element, it is going to hide it from your users that have the video.2007

That is not accessible; that is not very usable.2015

It would be better to take...if you have some information like that, why not make it available to everybody and paste it out here?2018

This is going to be basically for backwards compatibility.2026

Video is very similar to the audio tag: source=...2031

We are going to set up the video right here, and here is this little video that I have made.2046

You will see that there are no controls, and clicking on it doesn't really do anything.2056

So, let's add controls; refresh; and now, we have controls.2061

We can start playing it; we can pause it; we can mute it--things like that.2074

You can also put a width; let's make it 100 pixels; now it is much smaller.2082

This is something that you wouldn't be able to do with the object, or the normal embed elements, like...what YouTube uses today is Flash.2097

You would never be able to just resize it using HTML like that, because the video itself...you have to use the Flash, as well.2105

You can see, it still plays.2113

But you are also suffering from the same problem that I described above, with images,2115

where you now have a huge amount of video that is not even being fully used.2118

You are downloading a lot of unnecessary pixels; so don't ever do this.2123

But it may be the case that you would want to take something small and blow it up and make it a little bit bigger, for artistic reasons or whatever.2127

You have this ability to set it.2136

You can use the autoplay; you can use loop; and now, if I refresh, it should automatically start playing.2141

All right, so the last thing that is actually specific to video tags is the poster attribute.2160

Now, the poster attribute is new, so I think it may not be supported in this browser.2173

But you can set a poster; and what this does is: this image right here will be used as the default picture on the video.2179

So, if you haven't set it to play yet, then when you load the page, it is not supported here.2192

But when you load the page, you would see the picture that I set in the poster right here; you would see this picture2199

instead of seeing whatever frame is the first frame in the video.2204

So, this is something that you can do for...like in YouTube, when you have a couple of choices at the first frame to set.2209

This one--you can set any picture that you want to be the very first frame, the still that is before it goes.2216

Now, the big thing with video in HTML5 is: there is a big debate about what video formats to use.2225

We talked about how, with images, you have PNG's, JPEG's, and GIF's; and it actually took a while for that format to settle down.2236

Early on in the Web, people were using other types of image formats.2244

You would even see bitmaps and things like that; and over time, it settled down to those three as the main players.2247

And maybe some new ones will start being used, as well.2253

Video--the same sort of thing is going on, but we are in the early stages now.2257

So, this is an MP4, which uses an mpeg compression.2260

And this is actually a proprietary compression, which is really good, and it is really efficient;2265

but because it is proprietary, the owners of this technology can charge browsers, or pretty much anyone they want, to use it.2271

So, something like Firefox (which is an open-source browser, and it is not a for-profit company)--2281

they are afraid that, if they support this video codec, then they are going to be charged a bunch of money later on.2287

And it is going to make their browser too expensive for them to run.2295

And if they don't support it, then it will be unusable.2301

So, right now, Firefox is not supporting this codec, because they don't want it to take off and gain popularity and traction.2303

They are supporting an Ogg Vorbis video formatting instead, which is admittedly not as nice; it doesn't work quite as well.2312

It gets the job done; it doesn't compress things quite as well, but it is a format that is open.2323

It is open-source, so anybody can use it for free, and edit it, and all of these other things.2330

So, that is very beneficial; so, both Opera and Firefox are using this--they are putting their weight behind this format.2336

And it is just going to take some time for us to see which format works.2347

But this causes a problem for us, because now, if I had this mp4 video here, Firefox is not going to be able to play it.2350

But if I just change it to the Ogg, then another browser may not be able to play it.2361

So, we have come up with a solution where we have a new element inside the video here.2366

And it goes like this: you set a source, and it is a self-closing tag.2373

Now, what this does is: the browser will go down to the video, read it, and then--2392

because it supports the video element, it is going to go to this source tag and look for the source of the video in this source tag.2397

If it doesn't support the video element, it is going to see this--go in here and just display whatever it reads in here.2405

It is not going to recognize this element, as well.2412

And it is just going to kind of ignore all of this.2415

So, this is backwards compatible; and it will load this up.2417

Now, if it is a browser that doesn't support this, it will continue moving on to the next one.2421

And you can put multiple in here; so you can add the video.ogg, and then the browser will read this.2426

If it doesn't support this format, it can move on to the next one.2435

And if there are a lot of other formats being produced over the next couple of years, we could have as many of these as you wanted.2438

And then, say your browser still doesn't support that; then you can have a link, just like we were talking about before,2443

giving them the ability to just download it manually.2453

And maybe you would want to choose this one, because it is open-source.2457

Even if the browser does support the video and the source tag, it is going to display this if it can't find a format that will work for you.2470

Now, the same thing actually can apply to the audio element up here.2483

This is the audio player that we built earlier.2488

We can do the exact same thing; let's copy this.2492

We have the audio element beginning here, ending down here.2499

Let's have it all indented properly.2504

And we don't want it to preload, so let's remove this; and we'll remove the loop, as well.2507

And we can put as many of these audio formats as we want.2514

We could say mp3's; there is also an ogg format for audio.2520

And say you had it in Windows, Microsoft Wave format--you can set that up.2527

And so, it just depends on if your browser is going to support it.2535

And this is all going to be being worked out over the next couple of years.2537

But I think, just like images, it is going to eventually settle down to a few main players that all the browsers are going to support.2542

And maybe the same thing will happen with this mp4 format as what happened with the GIF format, which also used to be proprietary.2551

And what happened was: there were a lot of people worried that everybody on the Internet was using these GIF images, which were proprietary.2559

And they knew that at any time, the CompuServe company that made the GIF and owned the rights to it could start charging money for it.2566

And it could just bring the entire Web to a stand-still, because nobody could use these images anymore,2574

or they would have to pay whatever CompuServe wanted.2581

What CompuServe actually ended up doing was: they made it so that anybody can use GIF at any time, and sort of promised that they would never charge.2586

Some people are hoping the same thing will happen here.2596

But then again, why would a company that could make profit off of something like this just give it away?2599

So, that is why there is a lot of support for the Ogg codec.2604

This is pretty much the important things I want to do with audio and video.2611

I should mention that these audio tags that I created myself, that I added up here (I'll put them back in,2621

just so you can see them again)--these audio buttons that I have made--they could be links;2639

they could be almost anything, really; because see this button that I have right here?2645

This could just as easily be a span tag, which has no semantic meaning besides whatever CSS you apply to it...like a class may have some semantic meaning.2650

This span tag--you will notice, when I hover over it, it doesn't even turn into a hand cursor.2665

But still, if I click on it, it is still going to trigger this on-click event and run this JavaScript, which will un-mute it.2669

And so, it just has a lot of freedom.2679

The same thing applies to video; you can do the exact same thing with all of the exact same JavaScript methods that are described up here.2681

They work for both of them.2693

And so, that gives you a lot of freedom.2700

So, in summary, we have three tags: one image, one for audio, and one for video.2705

And that should be all you need; and there is a lot of other embedded content that you can use,2712

but it is a little bit more advanced; and we may look at that a little later.2721

But this is all you need for now, for the main things you will be doing.2727

One thing to be aware of, also, is that, when you add a lot of these things, they can make the page a little bit slow.2737

So, you always want to be careful about loading a lot of video and audio, especially if they are preloaded,2746

as images are preloaded, because it is going to slow down the bandwidth--it is going to slow down how long it takes your page to load.2752

I think that is it for this lesson; thanks for watching Educator.2762