Brenton Strine

Brenton Strine

Embedding Flash and Other Objects

Slide Duration:

Table of Contents

Section 1: HTML
Your First Web Page

17m 1s

Intro
0:00
World Wide Web
0:23
Introduction to HTML
0:25
Looking at Source Code
0:53
HTML5
1:58
HTML5 Specification
1:59
Creating a Web Page
4:10
What You Will Need to Create a Web Page
4:11
Example: Basic Web Page
4:40
Example: Creating a Web Page
5:46
HTML Elements
6:33
Adding a Title
7:08
Main Body
7:48
First Level Heading
8:23
Adding an Image
8:42
Paragraph
9:09
Adding a List and URLs
11:13
Footer
14:09
CSS: Styling
16:02
Web Basics and Web History

32m 23s

Intro
0:00
The Web
0:56
Overview of the Web
0:58
The Web Page
2:39
Overview of the Web Page
2:40
Web Technologies
4:45
Overview of Web Technologies
4:46
The Web Today
9:22
The Web Today
9:23
What is HTML
11:22
HyperText Markup Language
11:23
The Creation of the Internet
12:40
History of the Internet
12:41
Developments in HTML
14:10
The Birth of HTML
14:11
Early Problems
15:35
Early Browsers
16:24
History of Early Browsers
16:25
NCSA Mosaic
17:55
NCSA Mosaic
17:56
The Browser Wars Begin
19:39
History of the Browser Wars
19:40
Casualties of War
22:27
Results of the Browser Wars
22:28
HTML 4 Stabilization
25:31
History and Overview of HTML4
25:32
Modern Browser Developments
27:27
Modern Browsers
27:29
HTML5
30:57
Overview of HTML5
30:58
Web Development Tools

26m 28s

Intro
0:00
Browsers
0:17
Introduction to Browsers
0:18
Example: Browsers
2:35
Firefox Add-ons
3:14
Firefox Browser
3:15
Example: Firebug Add-ons
3:54
Example: Web Developer Toolbar and ColorZilla
7:51
Domain Names and Hosting
10:23
Overview of Domain Names and Hosting
10:24
Your Own Domain
11:03
Installing a Local Web Server
12:42
Installing a Local Web Server
12:43
Apache Web
13:29
WYSIWYG Editors
15:56
Introduction to WYSIWYG Editors
15:57
Content Management System
18:31
How Content Management System Works
18:32
Example: WordPress
20:00
File Transfer Protocol
22:26
File Transfer Protocol
22:27
HTML Elements and Attributes

21m 50s

Intro
0:00
Proper use of Elements and Attributes
0:14
Elements and Attributes
0:16
Example
1:06
Normal HTML Elements
2:00
Start Tag, Content, and End Tag
2:02
Example: Warning!
2:34
Void HTML Elements
3:23
Self-Closing Tags
3:24
List of Void Elements
4:04
Example: Line Break
5:00
HTML Comments
6:13
Purpose of Comment Tags
6:14
Example: Comment Tags
6:50
Attributes
7:25
Properties of Attributes
7:27
Example: Attributes
7:39
Example: Whitespace
10:22
HTML Character Codes
12:05
Character References
12:07
Example: Registered Trademark Symbol
12:35
Example: Using Character References
13:23
Example: Start Tag and End Tag
15:57
Example: Self-Closing Tag
16:37
Example: Attributes
17:37
Example: Proper use of Elements and Attributes
19:02
Example: Comment
20:09
Example: Whitespace
20:46
Essential Tags Part 1

41m 42s

Intro
0:00
Document Structure Tags
1:13
Document Structure Tags and Example
1:14
Layout Tags
3:24
Layout Tags
3:26
Example: Layout Tags
7:48
Example: Layout Tags
11:28
Example: Layout Tags
13:17
Example: Layout Tags
14:22
Text Level Tags
17:22
Text Level Tags
17:23
Example: Text Level Tags
17:48
Grouping Content Tags
24:23
Grouping Content Tags
24:24
<p> Tag
24:45
<hr> Tag
25:31
<figure>, <figcaption>, and <blockquote> Tag
26:14
<div> Tag
26:58
Example: Grouping Content Tags
27:28
Embedded Content Tags
33:12
Embedded Content Tags
33:13
Example: Embedded Content Tags
35:39
Essential Tags Part 2

24m 20s

Intro
0:00
Simple Tables
0:17
Simple Tables
0:19
Example: Simple Tables
2:31
Semantic Tables
5:11
Semantic Tables
5:14
Example: Semantic Tables
6:24
Simple Lists
8:14
Simple Lists
8:18
Unordered List
8:36
Ordered List
8:42
Example: Simple Lists
9:37
Definition Lists
14:08
Definition Lists
14:09
Example: Definition Lists
15:21
Forms
17:11
Forms
17:12
Example: Forms
17:52
Markup Language

29m 38s

Intro
0:00
HTML 1 Through 3.2
0:13
Period of Rapid Growth of HTML
0:14
Tag Soup
2:03
Definition of Tag Soup
2:04
Example: Tag Soup
3:00
Example: Tag Soup and Valid Doctype
4:45
HTML 4.01
5:26
Overview of HTML 4.01
5:27
Three Flavors of HTML 4.01: Strict, Transitional, and Frameset
6:05
XHTML 1
7:19
Overview of XHTML 1
7:20
Example: XHTML 1
9:20
XHTML1 Syntax
11:48
Lower Case Rule
11:49
Closed Elements Rule
12:25
Encased in Quotes Rule
14:18
Boolean Attributes May Not Be Minimized
14:35
Correct Nesting is Enforced
15:29
The Problem with XHTML
16:15
Problem with XHTML
16:16
XHTML 2
19:22
Overview of XHTML 2
19:23
HTML 5
20:43
Overview of HTML 5
20:44
Validating
22:44
Validators
22:45
Example: W3C Markup Validation Service
25:26
Page Structure and Meta-data Elements

32m 50s

Intro
0:00
The Doctype
0:12
Doctype
0:13
Example: Doctype
1:25
The Root Element
1:57
Root Element
1:58
Example: Root Element
2:45
The Head Element
3:38
Head Element and Body Element
3:39
Example: Head Element and Body Element
5:06
The Head Element
5:42
Head Element vs. Header Element
5:47
The Title Element
6:51
Title Element
6:52
Example: Title Element
7:54
The Base Element
9:00
Base Element
9:03
Example: Base Element
9:42
The Link Element
14:07
Link Element: rel, type, and href
14:08
Example: Link Element
15:13
The Meta Element
17:54
Meta Element: charset, name, and http-equiv
17:55
Example: Meta Element
21:00
The Style Element
23:35
Style Element
23:37
Example: Style Element
24:40
Text-Level Semantics

30m 13s

Intro
0:00
Text Level Semantics
0:06
Paragraph Level
0:07
The <a> Element
2:23
Definition of the <a> Element
2:25
The <em> Element
3:25
Definition of the <em> Element
3:26
The <strong> Element
6:50
The <strong> Element
6:51
The <small> Element
8:35
The <small> Element
8:36
Example of <small> Element
10:19
The <cite> Element
10:55
The <cite> Element
10:56
Example of <cite> Element
12:32
The <q> Element
12:45
The <q> Element
12:46
Example of <q> Element
13:34
The <abbr> Element
15:35
The <abbr> Element
15:36
Example of <abbr> Element
16:41
The <dfn> Element
17:03
The <dfn> Element
17:04
Example of <dfn> Element
18:01
The <time> Element
19:11
The <time> Element and Example
19:12
The <code> Element
21:18
The <code> Element
21:19
Example of <code> Element
23:00
The <sub> and <sup> Elements
23:31
The <sub> and <sup> Elements
23:32
Example of <sub> and <sup> Elements
23:50
The <i> Element
24:51
The <i> Element and Example
24:52
The <b> Element
27:16
The <b> Element
27:17
Example of <b> Element
29:07
Heading and Sectioning

23m 39s

Intro
0:00
Heading Elements
0:06
Heading Tags
0:07
Heading Rules
1:13
Heading Rules and Example
1:35
Sectioning Roots
5:39
Sectioning Roots
5:41
Sectioning Contents
6:25
Sectioning Content Elements
6:27
Section Wrapping
7:40
Section Wrapping
7:41
Example: Section Wrapping
10:10
Real World Example 1
15:36
Forms

47m 51s

Intro
0:00
Form Terminology
0:23
Form
0:24
Control
0:43
Control Name and Control Label
1:09
Input Type and State
1:52
Form Controls
2:20
Button: Submit and Reset
2:32
Radio
3:37
Checkbox
4:00
Select Menu
4:05
Textarea
4:28
Various Input Types
4:38
Example: Basic Controls of Form Element
7:05
Example: Buttons
18:20
Example: Additional Controls
20:56
Example: Special Input Types
27:55
Example: Date and Time Control
33:40
Example: Create Your Own Control
37:32
Example: Placeholder Text
39:10
Example: Datalist
41:43
Example: Sizing and Input Containment
42:16
Example: Select Modification
42:51
Example: Required Attribute
44:41
Links

36m 41s

Intro
0:00
URIs and URLs
0:23
Definitions of URL and URI
0:36
Differences Between URL and URI
0:42
Example: URI and URL
1:14
Typical URI Construction
2:33
Domain and Subdomain
2:34
Protocol
4:18
IP Address
5:05
Typical URI Construction
5:32
Second Level Domain
5:33
Port
6:07
Foldernames
6:46
Typical URI Construction
8:06
Filename and File Extension
8:08
Typical URI Construction
10:38
Name/ Value Pairs
10:40
Internal Anchors
11:45
Typical URI Construction
12:30
Example: URI Construction
12:31
Relative and Absolute URIs
14:20
Relative and Absolute URIs
14:22
Example: Relative and Absolute URIs
18:32
Link States
24:15
Link States
24:16
Example: Link States
25:18
Block Level Links
27:02
Example: Block Level Links
27:03
Bookmark Links
29:18
Bookmark Links
29:20
Example: Bookmark Links
30:15
Attributes
32:06
href and target
32:20
rel, media, hreflang, and type
33:18
Embedded Content

46m 5s

Intro
0:00
Embedding Image
0:22
Embedding an Image
0:25
Image File Formats
3:38
Image Format: Jpg
3:42
Image Format: Png
4:13
Image Format: Gif
4:40
Compression
6:05
Image Format: Precise Lines and Fewer Colors
8:38
Animated Gif
10:49
Alpha Transparency Png
11:09
Embedding Audio
12:52
Old Way of Embedding Audio
13:00
New Way of Embedding Audio
14:54
Example: Adding Buttons
20:04
Message for Users
26:36
Audio Attributes
27:46
Control
28:29
Autoplay
28:44
Loop
29:36
Preload
30:40
Embedding Video
32:00
Embedding Video
32:11
Controls
34:22
Poster Attributes
36:01
Video Formats
37:36
Solving Formatting Problem
39:26
The Canvas Element

19m 25s

Intro
0:00
Creating the Element
0:38
What is the Canvas Element?
0:39
HTML and Canvas Element
1:48
Example: Canvas Element
3:23
Creating the Canvas in JavaScript
5:13
getContext() Method
5:17
Checking Browser Support with the getContext() Method
6:00
Example: Creating the Canvas in JavaScript
7:31
Drawing in the Canvas
10:13
Methods for Drawing in the Canvas
10:14
2d Context
10:58
Example: Creating Drawing in the Canvas
11:39
Example: Adding an Image and Texts
15:30
Example: Advance Canvas Element
17:31
Content Models

29m 8s

Intro
0:00
The HTML 4.01 Content Model
0:16
Block Elements and Inline Elements
0:18
Example: Block Elements and Inline Elements
1:18
W3C Markup Validation Service
3:28
The HTML5 Content Model
6:21
Overview of HTML5 New Content Categories
6:22
Flow Content
8:02
Specification for Content Models
8:05
Flow Content
9:41
Example: Flow Content Elements
10:40
List of Flow Content
11:35
BlockQuote Element
11:50
Sectioning Content
13:19
Introduction to Sectioning Content
13:20
Heading Content
14:06
Heading Content and hgroup Element
14:07
Phrasing Content
16:56
Attributes of Phrasing Content
16:57
Anchor Element in Phrasing Content
17:28
Embedded Content
19:33
Attributes of Embedded Content
19:34
No Content
19:53
Transparent Content
20:38
Source Elements and Param Elements
21:15
Interactive Content
24:16
Interactive Content Elements
24:17
Button Element
25:57
The DOM

13m 10s

Intro
0:00
The DOM
0:26
Document Object Model
0:27
The DOM Tree
0:55
DOM Trees
0:56
Example: DOM Tree
1:31
Vocabulary: Tree, Node,Branch, Parent, Child
2:15
Exploring the DOM
3:13
Example: Built-in Browser Inspection and Firebug
3:15
Example: Manually Exploring the DOM
6:01
JavaScript
7:28
DOM Navigation Techniques
7:55
DOM Navigation Techniques
7:56
Favicons

13m 14s

Intro
0:00
Favorite Icons
0:08
Function of Favorite Icons
0:09
Bowser Support
1:10
Browser Support
1:13
Location in Browsers
1:46
Implementation Methods
2:04
Implementation Methods for Favorite Icons
2:05
Favicon and Apple Mobile Devices
4:51
Creating the Icon
6:13
How to Create the Icon
6:14
Favicon Resources
9:10
Websites for Icon Creation and Conversion
9:11
Programs for Icon Creation and Conversion
11:50
Embedding Flash and Other Objects

15m 7s

Intro
0:00
Flash and other Plug-ins
0:41
Main Problems with Flash
0:44
Benefits of Flash
2:02
Embedding Flash: the Old Way
2:57
The Old Way to Embed Flash
2:58
Embedding Flash: the Satay Method
6:42
Satay Method
6:43
Embedding Flash: HTML5
9:28
How to Embed Flash in HTML5
9:29
Embedding Flash Directly in <video>
11:39
Embedding Flash Directly in Video Element
11:40
Review of Embedding
13:24
Image Elements
13:39
Video, Audio, and Canvas Elements
13:44
Embed Elements
13:53
Object Elements
14:04
Offline Cache

19m 53s

Intro
0:00
Purpose
0:47
Purpose of Offline Cache
0:48
The Appache
2:06
Attributes of Appcache
2:07
The Manifest File
3:22
Manifest File
3:23
Example of Manifest
3:32
Section Headers: Cache, Fallback, and Network
4:21
Server-Side Considerations
5:17
text/cache-manifest MIME-type
5:18
Other Server-Side Considerations
5:41
ExpiresActive On and ExpiresDefault 'access'
6:07
Example: Offline Cache 1
7:44
Example: Overwriting Files
11:09
Example: Wild Cards for Network
14:58
Example: Offline Cache 2
16:06
Web Development Principles

26m 47s

Intro
0:00
Interoperability
0:36
Interoperability of Web Development
0:37
Interoperable Websites Should Work
3:05
Qualities of Interoperable Websites
3:06
Backward Compatibility
5:52
Compatibility With Older Technology
5:53
Example: Meta Tag
9:07
Forward Compatibility
9:33
Advancement in Technology
9:34
Accessibility
10:11
Accessibility of Content
10:12
Semantic Code
11:43
Example: Where Will This Link Take You?
13:56
Graceful Degradation
14:59
Graceful Degradation or Fault Tolerance
15:00
Types of Degradation
16:35
Progressive Enhancement
18:36
Progressive Enhancement
18:37
Future Detection and Browser Sniffing
21:05
Future Detection Versus Browser Sniffing
21:06
Example: Email Input Type
23:39
Tim Berners-Lee's Quote
26:20
Loading...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of HTML
Bookmark & Share Embed

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Please ensure that your website editor is in text mode when you paste the code.
(In Wordpress, the mode button is on the top right corner.)
  ×
  • - Allow users to view the embedded video in full-size.
Since this lesson is not free, only the preview will appear on your website.
  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Services

Lecture Comments (1)

0 answers

Post by S Fonseca on June 6, 2015

Would you also guide us on how to embed Java applets on a web page.  Dynamic content from certain Math programs (Geometer's Sketchpad, MATLAB, etc) produce interactive activities which only run as Java applets.  So how would we connect these dynamic files and the partner Java file on a HTML5 web page?  

Embedding Flash and Other Objects

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Flash and other Plug-ins 0:41
    • Main Problems with Flash
    • Benefits of Flash
  • Embedding Flash: the Old Way 2:57
    • The Old Way to Embed Flash
  • Embedding Flash: the Satay Method 6:42
    • Satay Method
  • Embedding Flash: HTML5 9:28
    • How to Embed Flash in HTML5
  • Embedding Flash Directly in <video> 11:39
    • Embedding Flash Directly in Video Element
  • Review of Embedding 13:24
    • Image Elements
    • Video, Audio, and Canvas Elements
    • Embed Elements
    • Object Elements

Transcription: 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

Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
OR

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Membership Overview

  • Available 24/7. Unlimited Access to Our Entire Library.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lecture slides for taking notes.
  • Track your course viewing progress.
  • Accessible anytime, anywhere with our Android and iOS apps.