HTML Embedding Flash and Other Objects

Welcome to Educator.com.0000

This lesson is going to look at Flash object and how to embed other objects--but especially Flash,0002

because especially with the introduction of HTML5 and video elements and canvas and audio,0010

a lot of people are saying that Flash is no longer relevant, which is not true.0020

But also, there are some things about Flash that are not good for the Web, and I want to point out0025

what an appropriate time to use Flash would be, and when you do need to, how to do it, and how to do it in a way that is valid.0031

The main problem with Flash on the Internet today is that Flash is proprietary.0045

It is controlled by a single company, and they own the copyrights on all the technology, and they can charge whatever they want.0053

Now, it happens that Flash is ubiquitous across the Internet today.0061

Almost every browser has Flash installed; it is something like 95% right now.0066

Now, because of that, a lot of people have come to think of Flash as just a part of the infrastructure of the Web.0074

However, because it is proprietary (controlled by a single company), it can't ever be that,0083

because there are always going to be users who are unwilling to install the Flash plug-in, or unable.0086

For example, Apple mobile device users--if you have an iPhone or an iPod Touch, you are not able to use Flash at all.0095

And so, it can't become a part of the Web infrastructure.0106

Everything about the Internet, from HTTP to HTML, all the way up to...everything about how it works...is open.0109

And that is what makes it able to be free, and the communication to work the way that it does.0117

But the problem is not that bad, because Flash has a place on the Internet.0124

It can't ever become an essential part of the infrastructure, but it has many useful functions.0130

And it does a lot of things that browsers can't do.0137

Flash can come out with new versions much quicker than browsers do.0139

They don't have to wait for HTML versioning and specifications to come along, and they can always fill the gaps where browsers fail.0143

And ideally, you have a lot of different plug-ins filling a lot of different gaps.0150

Flash just kind of got lucky, because it was very good at doing video, right around the time when video was becoming very important to the Internet.0155

And so, it got a foothold there; but that is probably going to change a little bit,0164

although I think Flash is not going to just disappear overnight because of the introduction of HTML5.0170

When you are embedding Flash (now, this could be a video)--for example, if you want your video to be obscured0179

from being able to be downloaded, the HTML5 video element doesn't have a great way to do that at this point.0187

The URL to the video file is just right there in the code, very easy to see.0193

Or it could be some other Flash interactive thing that won't work with HTML5, for some reason.0198

This is the old way to embed Flash, and it comes from the way that Internet Explorer uses the object element.0208

Now, object element is a standards-compliant element; it is in the specification.0219

But the way that Internet Explorer uses it was not that great.0224

And the standards-friendly browsers ended up having to use the embed tag to embed Flash.0228

You have two browsers (say Netscape and Internet Explorer) using different tags, and this is just the definition of incompatibility.0235

And so, you get this big mess of code.0245

On the outside, you have the object element, which has these attributes and a parameter.0248

And then, you have the embed element for the standards-friendly browsers nested inside of it.0257

And it is really just a big mess--and there are ways to clean it up, a little bit.0267

This is a page that I am going to show you as an example.0275

You don't need to look at that yet.0282

Looking up here at this old-way example: the first attribute here is classID.0285

And this is really what caused the other browsers to choke on this code and break; but Internet Explorer requires it.0292

If you want to delete that, when you are looking for a more standards-compliant cross-browser way of doing this,0303

we will see if we can come up with other methodologies; I will show you in a minute.0311

But this codebase attribute is the next one, and it links to a copy of the plug-in.0316

And then, this part right here is the versioning information.0324

This is actually pretty important, because when you go to your website and there is the plug-in with Flash,0328

and if your Flash file requires version 6, and you have version 5 installed, then your Flash file is going to break or behave crazily.0337

And so, this versioning information will prompt you to upgrade your plug-in before you even start doing anything.0351

And then, you can have the experience that you want.0358

However, this also causes problems; so it has to go.0362

And the embed--the entire element, if you put it in a validator, fails to validate.0367

It is not (at least, back in the day it was not) a valid element to be using.0374

So, that would need to go, as well.0381

But what we have here, with the stripped-down-minimum-to-make-it-work version, is: this is not enough for it to work anywhere.0384

It won't work in Firefox or anything.0392

I am going to show you the Satay method, which someone came up with to make it work.0398

The Satay method is much cleaner, but still a bit awkward.0404

It incorporates Flash in a way that works across browsers, and is still (now, this is the important part) valid for HTML 4.01.0412

It has a couple of problems: longer videos in Internet Explorer will not stream;0421

it will wait for the entire thing to download before it will play.0428

So, for longer videos, that is just not acceptable, although you can create a sort of holder Flash file that will load the video file and stream it for you.0433

And then, also, there is no plug-in version detection in this code.0444

So, out-of-date plug-ins will not be informed that they are out-of-date, which can cause problems.0449

And then, lastly, when you have the...this isn't Internet Explorer, but this is the code that you just saw actually shown here,0454

when you have Internet Explorer with the Satay method, the Flash will not begin running until you click on it.0466

You have to have some sort of interaction, and then it will start playing.0474

And they actually changed that behavior from the way it used to be, which worked better, because of a lawsuit that they lost.0477

So, this is the Satay method; you can see that (let's look down here) they have gotten rid of this, which breaks the standards-loving browsers.0487

And they have gotten rid of embed, and they have added some new attributes.0503

The type attribute is added, and this is basically just a MIME type.0509

And this tells the browser how to understand the next thing, which is the data.0519

And then, you put the URL to your Flash file here, even though you already have a parameter down here that is specifying that.0530

So now, the Satay method: I am going to refresh, and then scroll down (the old way just broke, because of the things that I removed).0545

The Satay method works; and it works cross-browser, and it works in HTML 4.0554

Let's go back to the slides.0565

What we are really interested in doing now is embedding Flash in HTML5.0570

Now, obviously, the video, audio, and canvas elements are much better for a lot of purposes.0578

because the browser is playing the video (or audio or whatever) directly, and there is nothing between.0586

And you are not going to run into a lot of performance issues, and we will be able to play it on Apple mobile devices and things like that.0592

So, you want to consider first using one of these; but there are also a lot of browsers, at this point, that don't support these, or don't support them fully.0603

And so, you may want to still use Flash as a fallback.0614

This is a little bit of the old-style HTML.0618

But if I wanted to have a video element here, and use the Flash embedding as the fallback,0624

so that if the browser doesn't support video, then it plays all of this and loads it,0641

and you get the Flash version of the video; that is a good way to do it.0646

Now, here is another thing: that the embed element, which usually has to be nested underneath the object element0655

to deal with browser incompatibilities, has actually been included in the HTML5 spec.0662

So, if you wanted to, you could just use this part--just the embed part.0668

And it would be cross-browser compatible, especially if they support HTML5; and it would be valid.0676

So, that is a consideration, as well.0683

So, this code right here would be just the old-style way of including it; but it is in HTML5, so it is valid.0687

I don't think that is actually the best way to do it, though.0696

I think the best way would be a little bit more complicated: for example, you can embed Flash directly in video element.0700

Now, this is some really complicated JavaScript that you can go to this URL and just copy and paste.0710

And what it does is: you have your video, just the way you normally would, with multiple sources;0718

and then, you wrap a div around it, and you give it an ID that this JavaScript can access.0724

And it will actually insert your Flash into this element.0729

So, it will fall back to the Flash if the user supports Flash, but doesn't support the newer video element.0737

And that is very cool, because it means that, in future, when you don't want to be supporting Flash anymore--0744

you just want to use the video, because it is well-supported--you don't have to go back and remove code.0752

You just have this one code for everybody; and it is very, very nice.0756

Now, there are also some downsides with this.0762

It is kind of complicated; but this is probably one of the neatest ways to do it.0768

You can go online and check: something like A List Apart has had some good articles on how to embed Flash over the years,0775

going back to 2002--the Satay method was published on A List Apart.0783

And they may come up with very convenient and clever ways to do this in the future.0787

So, keep your eye out, because a lot of this innovation happens because people discovered functionality0793

and tricky ways of doing things, rather than because it was necessarily coded that way.0799

These are all of the elements that embed external data.0807

I just want to leave you with a quick review of how they work in HTML5.0813

So, image, just simply, is graphical content; and then, you have video, audio, canvas,0820

which cover their respective things--canvas is a user-interactive canvas.0828

And then, the embed element, which is new to HTML5 (or rather, I should say, it is newly valid--0834

it has been around for a long time) is defined to embed plug-in content.0839

So, the object element actually can do a lot of the same things.0844

It can include images and plug-ins and even HTML.0850

The difference is that the object element has a fallback mechanism; you can put content in here,0854

and it will fall back to that if it is not supported; whereas the embed element does not,0859

which is kind of a problem with this; they couldn't give it a fallback element,0865

because older browsers had been supporting it when they shouldn't have been; so it can't fall back.0870

But this gives you a lot of options: you can do a lot of different ways when you are going to include your Flash from now on.0877

You can use object; you can use embed; you can use the JavaScript that inserts the Flash directly into other elements completely.0884

You can use combinations; you can use the old way; you can use the new way.0892

But what I do recommend is that you keep in mind graceful degradation and progressive enhancement, and always validate your pages.0896

Thanks for watching Educator.com.0906