Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
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 Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

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

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • 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 lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Inserting HTML5 Video

  • We are going to talk about how to insert videos using the new HTML5 video tag
  • This process is not quite as simple as you might think
  • Create a new page called movie-test.html & add the coding from movie-coding.txt from within the text folder that has the completed code to insert the movies along with comments
  • Before Flash came about, we had to create different formats for our movies if we wanted them on the web
  • When Flash became the web standard, we were able to create movies with much smaller files sizes that were able to stream, meaning not all the movie had to download before the viewer was able to see the movie begin
  • Now that Flash is not supported on all devices, we are back to the need to have many different formats for video
  • Not all browsers support HTML5 video, and even those that do need different versions of movie formats in order to run
  • We are going to create a page that contains a movie that will work in all browsers, but it does take some code to do this
  • I have some different formats in the course files for this lesson so be sure to download and use the files for this chapter from the Exercise Files tab below the video, the movies are in the movies folder
  • You need to set up the code to complete this chapter & test those movies
  • HTML5 offers a new tag to handle video directly within the browser, or at least within some browsers
  • The problem is that not all browsers support the same video file
  • We will insert 3 different movie formats, and use a Flash video as a fallback for older browsers
    	<video controls poster="movies/turtle-eating-poster.png " width="640" height="480">
    	 	<!--this format is for chrome, ipads, iphones-->
    	 	<source src="movies/turtle-eating.mp4" type="video/mp4">
    	 	<source src="movies/turtle-eating.webmhd.webm" type="video/webm">
    	 	<!--this format is for firefox-->
    	 	<source src="movies/turtle-eating.oggtheora.ogv" type="video/ogg">
    	</video>
    	
  • It is important to include these various movie formats, and include a Flash fallback for older browsers when working in the HTML5 video tag

Inserting HTML5 Video

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
  • Setting up an HTML5 Video 0:44
    • History of Videos on the Web
    • Video Coding
    • Video Tag
    • Controls
    • Poster for Video
    • Width and Height
  • Preview In Browser 6:40
  • Troubleshooting Video and Browser Issues 8:59
  • Insert FLV 11:36
  • Preview In Browser 12:02
  • Video Formats 13:15

Transcription: Inserting HTML5 Video

I want to show you how to work with HTML5 videos, and also give you a taste of the new <video> tag built into HTML5.0000

So, we are going to insert a movie format into a web page.0012

And I just want to make you aware that, once we are done, our file should match this movie test.0018

So, the movie test file is a final file that you can use to compare in case you have any issues with your page.0026

Make sure you also have the Movies folder in your site files from the Exercise Files tab for this chapter.0035

So, let's get started setting up an HTML5 video.0044

I'm going to create a new page (Ctrl or Command, N), and this one is going to get a title of "HTML5 Videos."0049

What it is going to do is literally use the HTML5 new tag, and I am going to copy that title onto my web page and make it a Header 1.0061

And let me call this HTML5 video tag; now, what we are going to do is insert our video down here, and what we need to do is make sure that we have some kind of a video format for all browsers.0075

Let me do a quick save of this file; and I am going to save it as html5-video.0093

Now, let me give you just a quick background on videos on the Web.0104

Prior to Flash as a format, we had to make sure that we transferred any movies we had from any type of video camera into a couple of different formats for different operating systems.0108

It was a bit of a headache, because you always had to convert your movies.0124

When Flash came about, all of a sudden, we could use one tag; we could use the Flash plugin, which was on 98% of systems; and we were able to put it on any operating system and in any browser, and it would play with just a single chunk of code.0129

Since HTML5 videos have come out, and the HTML5 standard will not be finalized until 2014 (sometime in there), what we have to do now is play a few games again in order to get our movies to work using HTML5, because not all browsers support them.0148

So, yes, there is a video tag built into HTML5; but it is still a bit complicated trying to use it at this point, because it's nowhere near becoming a standard in all the browsers.0172

So, what we have to do as Web designers and web page creators is factor that into our planning; and that is what we are going to do here.0186

I have a Movies folder, and notice, my Movies folder has quite a few things in it; and this is what I was referencing.0197

What I have set up in here is this movie in quite a few different movie formats.0206

So, I have some text for us to pull out the actual coding, in order to work with these movies; and then, I can talk about it from there--because what happens is: this movie coding is rather extensive.0213

So, let me open up this text file and walk you through it, so you understand what is going on.0228

Now, I do have quite a bit of information here with some comments; and these comments in the text file are not exactly grey.0234

But I tried to add some comments in here so you could explain it, or get an idea of an explanation, based on my comments in here.0244

You can see there is a lot of code, and I didn't want you to have to type this all out yourself; so what we are going to do is: we are going to take this code and kind of backtrack from it.0256

If I do a copy on this (so I'll do a Ctrl or Command, A, Ctrl or Command, C to copy), I'm going to go back to my web page and, with my cursor exactly where I want the movie, I'm going to move over into code and paste.0268

Since this is all a text file of code, I need to be in Code View to drop it on.0289

Now, if I move into Design View, you can see it looks like at least there is a square for a movie.0296

I'll do a save; and let's take a look at what this code means, because now that it's on a web page, we have access to the grayed-out areas.0304

What we are doing here is: we are adding a video tag (and let me move this down so you can see), and within this video tag, there is some basic information--so the video tag itself is pretty simple.0314

First of all, we have an opening <video> tag, and we have a closing </video> tag way down here, with quite a bit of information in between.0332

What I am going to do is move back up to the top; and what this tells the video tag to do is add controls for your video.0344

So, within that box, when it goes into the browser, it tells the browser to show the controls.0354

Now, the other thing I have done is added a poster: basically, a poster is what is going to show before the movie starts.0360

And that allows me to insert whatever I want as an image while the movie is downloading; as soon as the movie is downloaded, it can start, but until then, I don't want it blank.0370

We also have the width and height for this video plugged in here; so the video tag itself is pretty easy.0384

Now, there are some other comments in this area that I will come back to.0394

But what we want to do is look at this in the various browsers.0401

I'll go ahead and save this; I'll preview it in Chrome; and let's take a look.0407

There is my video; I have my controls; so as a user, I can click and control this movie.0415

This is a hawksbill turtle eating down in Mexico; that is kind of fun.0425

Anyway, that HTML5 video works just fine; now, if I right-click this video and say "Save video as," and I'm in Google Chrome, notice the format is an mp4.0431

That is a Google Chrome format, the mp4.0450

So, in this list, this one here is the mp4 format; so within the video tag itself, I add a source attribute (or a source tag, specifically) with a source attribute also attached.0453

And this is the movie that Google Chrome is referencing.0471

Now, let's put it into a different browser.0476

I'll put this one into Firefox, and we'll take a look.0479

You can always right-click on these movies if you are curious, on a website, what format they are.0484

So, you can see, my movie is here, and it will play just fine on Firefox--not a problem.0490

But if I right-click (oops, I moved my mouse here--there we go), Save video as, notice: this one is an mp4.0498

I'll close that one up.0510

Now, what happens if I go out to my remaining two browsers?--we'll check with Internet Explorer 8.0512

And you can see, Internet Explorer 8 has a bit of an issue; it is not playing my video tag movie.0520

Let me go out to Safari and check that one out; I'm having the same problem here.0529

We know two of these movies are working just fine; the other two are not.0540

What is going on?--well, what ends up happening is: right now, I have this file, a Flash video, being used as a fallback.0545

So, it's going to search for an mp4; and then, other types of browsers may use WebM format or an OGV format.0557

I just upgraded the Firefox browser: it was using the OGV format previously--now it looks like there is some mp4 support built into Firefox.0570

But the problem with our information is this one right here; and what I am going to do is: this is a Flash fallback video (in other words, if the browser doesn't support HTML5, what we want to do is add Flash)...0584

But what I am going to do is remove all of this code here; and I am going to go ahead and insert...this is quite a bit of information, as you can see...so this is all for the Flash piece, from the first object, all the way down to the last object on line 57.0600

And I am going to delete this, and what I am going to do is use Dreamweaver to insert this instead.0623

So, go up to Insert, Media, Flash Video; and you can see, there was some additional information inside here, which was this little piece down at the bottom that was left on the page.0630

When I removed the Flash piece, this Javascript piece was also included, and was being used by that code.0646

It says, "Would you like Dreamweaver to find all instances of this?" and I'll say yes.0655

And what Dreamweaver did was found that information for me.0664

Now, this one is fairly easy; but let me show you what Dreamweaver did for us.0668

I'll double click in this matched-text area; and it literally highlights it within the code.0673

I'll go ahead and select that and delete; close this one up, and we'll go right back to our inserting Flash.0680

Dreamweaver was letting me know there was a little bit of extra code that I didn't delete.0690

I'll go back up, and we'll try inserting that FLV one more time.0696

I'll browse out to this one; and this is going to be the Sharks.flv; I'll go ahead and choose Corona Skin this time, to be different; Detect the Sizing; and Auto Rewind.0702

I'll click OK; I'll save this page; and let's take a look at it now and see if that fixed the issue.0717

And guess what, it did; so, if you have trouble copying code for that Flash fallback piece, don't be concerned about it--let Dreamweaver do the work for you.0728

What Dreamweaver did was fix a link to two files that the Flash video needed--and those were this Corona Skin and the FLV player.0744

It wasn't registering with the browser, so that reset that piece for me; and now let's take a look at it in Safari.0758

Now, Safari is supposed to be honoring non-Flash videos, actually--HTML5 videos; but you can see, this Safari browser is falling back on the Flash player.0768

This is a Windows Safari version; but you can always check to see what type of video is playing or being accepted as the format in the browser.0783

But that is how you can set up your files.0795

Now, the key is getting all of these into the various formats; so I have my original coding here.0798

This is the poster that shows when the page first loads; this is my Flash video that is going to show; and here are the four different formats (actually, this one is just the HD version of WebM).0808

These are the files that I need to convert my movies into, in order to work with HTML5 videos and their tags.0822

You can see, working with the HTML5 video tag isn't quite as simple as you might think; it does require a little bit of extra effort in pulling in all of these files, instead of just dropping in that FLV file.0831

But that is the coding for working with the HTML5 video tag, and also allowing for a fallback to a Flash file, in case it is not an HTML5 browser.0849

That is the HTML5 video tag, and specifically a separate format for that video tag for each individual browser.0865

Thank you for watching Educator.com; see you in the next lesson.0879