1. Understanding the ProjectWhat we're going to build| 00:00 | Let's take a quick look at the completed
project, so you can see where we're going.
| | 00:04 | If you're the type who likes to dive
right into the code and you've already
| | 00:08 | downloaded the exercise files,
you'll find the completed project in the
| | 00:12 | Chapter 1> 01_01 folder.
| | 00:15 | So here I have that page open in the
Firefox browser and I am going to scroll
| | 00:21 | down a little bit to we see our video.
| | 00:24 | Now truthfully, from the user point of
view, here's really nothing to see here
| | 00:29 | and that's how's it should be.
| | 00:30 | We want the integrated display of video
bumpers to be as transparent as possible.
| | 00:36 | So you see the video embedded on
this page, it's got a poster image that's
| | 00:41 | initially visible and a big old Play button.
| | 00:44 | Let's click it to start the show.
| | 00:46 | (video playing)
| | 00:55 | So as you can see, the video begins playing right away.
| | 00:58 | This is the intro bumper that runs 25
seconds and conveys the opening client message.
| | 01:04 | In concept, this would play before every video.
| | 01:08 | Now when it ends, the second video should start immediately.
| | 01:11 | Let me click Play again
(video playing)
| | 01:18 | and I'll scrub towards the end.
(video playing)
| | 01:25 | And that's the beginning of the second video.
| | 01:27 | The transition is nothing really out of the ordinary, I find.
| | 01:31 | So let's go ahead and play this for a little bit.
(video playing)
| | 01:43 | Now here we are at the end of the video
and we have a bumper out that's set up
| | 01:48 | to play after this one is done.
| | 01:50 | Let me go ahead, click Play and we will
play through to the end and see if the
| | 01:55 | final bumper shows up.
| | 01:57 | (video playing)
| | 02:03 | And there it is again, almost immediately.
| | 02:06 | Pretty cool, don't you think?
| | 02:08 | And it's all done with HTML5 and JavaScript.
| | 02:12 | No additional editing required.
| | 02:13 | Do you want to see how it's done?
| | 02:15 | Good, because I want to show you.
| | 02:17 | Let's go.
| | Collapse this transcript |
| Highlighted HTML5, CSS3, and JavaScript technologies| 00:00 | I want to spend just a moment
or two to talk about the key
| | 00:03 | technologies involved.
| | 00:05 | There are basically two in play here:
| | 00:07 | the HTML5 Video Tag and the
associated JavaScript DOM API calls.
| | 00:14 | Let's take a closer look at theVideo tag first.
| | 00:18 | theVideo tag is, to my mind at least,
actually both glorious and notorious.
| | 00:24 | If you can accept that an HTML tag can
have those types of qualities, Apple's
| | 00:29 | complete embrace of theVideo tag as a
native video player for the company's
| | 00:34 | super hot iPads and iPhones really gave
HTML5 a huge jumpstart and propelled the
| | 00:41 | overall acceptance of advanced browser capabilities.
| | 00:45 | It also ultimately caused the almost total
collapse of Adobe Flash as a video platform.
| | 00:50 | theVideo tag provides for a number of
attributes including standard ones such as
| | 00:56 | source, width and height as well as
video specific ones like auto play,
| | 01:02 | controls, loop and others.
| | 01:05 | Currently, theVideo tag supports three
different formats: MP4, webM and Ogg.
| | 01:13 | Although browser support is pretty widespread,
not all browsers support all formats.
| | 01:19 | Internet Explorer and Safari support
only MP4, Firefox and Opera support both
| | 01:27 | webM and Ogg but not MP4,
and Chrome supports all three.
| | 01:34 | Essentially, you're going to need all
three formats in order to make sure that
| | 01:38 | you've got full cross-browser compatibility.
| | 01:42 | If you need to convert your video files
to any or all of these formats, I can
| | 01:47 | heartily recommend the Miro Video converter,
free software for both Windows and Mac.
| | 01:55 | To ensure cross-browser compatibility,
the source tag is used and placed within theVideo tag.
| | 02:02 | The source tag specifies the SCR attribute,
the source, as well as the specific format.
| | 02:09 | Let's take a look at theVideo DOM API next.
| | 02:12 | A video DOM API includes a robust set of methods,
properties and events all accessed by JavaScript.
| | 02:21 | A typical JavaScript function includes
a variable that gets theVideo object,
| | 02:28 | as in here it's called theVideo, and then a
property method or event can be incorporated.
| | 02:36 | In the code on your screen we get
the width of the video and put it in a
| | 02:41 | variable called theVideoWidth and then
in the function pauseVideo we use the
| | 02:46 | Pause method for theVideo object to pause that video.
| | 02:52 | There are five different methods for theVideo DOM API:
| | 02:55 | load(), play(), pause(), addTextTrack()
and canPlayType(), which checks to see
| | 03:03 | which format the browser can play.
| | 03:05 | We've got a great number of properties
available so you can get or set the auto
| | 03:10 | play status, the current source, the
current time, duration whether the video
| | 03:15 | has ended and much more.
| | 03:17 | Likewise, there's a full slate of events
to pull from so you can easily track
| | 03:22 | the current state of the video
even down to a volume change.
| | 03:26 | So that's an overview of the technologies
we'll be tapping into for the project at hand.
| | 03:32 | Let's get underway.
| | Collapse this transcript |
|
|
2. Creating the Video BumpersSetting up the HTML| 00:00 | Time to lay the foundation for our Video Bumper Project.
| | 00:04 | In this lesson, we'll concentrate on the HTML
necessary to set up the video tag properly.
| | 00:09 | Not only will we enter the video tag in
all the necessary attributes but we'll
| | 00:14 | also add in all the required source tags.
| | 00:17 | Before we start, I do want to
give credit where credit is due.
| | 00:22 | This project is based on an article
written by Drew McLellan for 24ways.org.
| | 00:27 | Awesome work from Drew as always.
| | 00:32 | In my code editor, I have the index.htm
file from the Chapter 2_02_01 folder open.
| | 00:38 | I'm going to scroll down to around
line 66 and there you'll see a div with an
| | 00:46 | ID of videoContainer.
| | 00:48 | I'm going to place my cursor
within the div and enter my video tag.
| | 00:55 | As for attributes, I'll set the width and height first.
| | 01:00 | The width is going to equal 480,
no need to put the px or pixels measurement
| | 01:06 | unit there, and then the height will be 272.
| | 01:10 | Next, I'll add the controls attribute.
| | 01:14 | This will, of course, enable the
Play, Pause, Control and others.
| | 01:19 | Poster is the final attribute to add
and I'll need a path to an image for that,
| | 01:25 | that's going to be found in images/videoPoster.png.
| | 01:31 | Okay, I can close the video tag.
| | 01:33 | Within that video tag we'll add a
series of source tags, one for each of
| | 01:38 | the supported formats.
| | 01:40 | So source, now if you're using Aptana,
I do want to caution you not to attempt to
| | 01:46 | close the tag at this point, Aptana
automatically adds a actual closing tag,
| | 01:51 | whereas source is an empty
tag and doesn't take a tag pair.
| | 01:56 | So let's put in our attribute of source
and set that equal to assets/ and here
| | 02:04 | you'll see a listing of all the various assets.
| | 02:06 | There are nine different files here,
three for each of the segments that we have.
| | 02:13 | So you'll see three for bumper-in,
three for bumper-out and three for main.
| | 02:17 | We're going to be putting in the main ones here;
| | 02:21 | so I'll just hit m to scroll down to there
and put in my first one, which is MP4,
| | 02:25 | and we set the type="video/mp4",
and then we'll close this tag after space.
| | 02:36 | Okay, let's do our second one;
| | 02:39 | src is going to be also in the assets folder
and this time we'll put in the webm format
| | 02:48 | and give it a type=video/webm,
close the tag; one last source tag.
| | 03:02 | This time we pick up main.ogv.
| | 03:07 | Now the type here is not video/ogv but rather
video.ogg, a subtle but important difference.
| | 03:20 | Okay, that's all done.
| | 03:22 | I'll save the page and you're done with the HTML.
| | 03:25 | Now we're ready to begin adding the JavaScript.
| | Collapse this transcript |
| Prepping multiple formats| 00:00 | The main strategy to programmatically
play the initial bumper, even though the
| | 00:05 | main video is referenced in the source tags,
is to change the SRC or Source Value with JavaScript.
| | 00:12 | To do this, we'll use one of JavaScript's most
powerful features, Regular Expressions.
| | 00:18 | In this lesson, we'll also establish
the necessary variables as well as store
| | 00:23 | the primary video's name.
| | 00:25 | Here I have opened index.htm from
Chapter 2_02_02 and I'm going to scroll down
| | 00:32 | to the bottom because we'll put our
script tag down just above the closing body
| | 00:36 | tag there and what I'm going to do is
hit return a couple of times just to make
| | 00:42 | some white space, you can close that up a little bit later.
| | 00:45 | Now let's start by just opening up a script tag here.
| | 00:48 | I'll take advantage of that Aptana feature
that gives us the closing tag and
| | 00:53 | hit Return so I can put a little space in
between my opening and closing script tags.
| | 00:59 | And now I'm ready to start to enter in my code.
| | 01:02 | Now let's declare our variables.
| | 01:06 | The first variable is videos, sources
is the next, then a couple of single
| | 01:12 | letters, i for increment and l, that
we'll also be using as a incremental value,
| | 01:18 | orig will hold the original file name, current and modified.
| | 01:24 | You'll see how those flags are used throughout the code.
| | 01:28 | Next, I'll set up sources, my variable,
to the source tag objects.
| | 01:34 | So for that I'll need document getElementsByTagName,
then an opening and closing
| | 01:43 | parenthesis, single quotes within it,
and the tag we're looking for is source.
| | 01:48 | Once that's done, we can set up a for
loop that will go through each of the
| | 01:52 | source tags and perform a series of
tasks; for open and close parenth, i=0 to
| | 02:00 | increment it, l=sources length that
will loop through all the elements in our
| | 02:06 | array, i<l; and then increment i so i++.
| | 02:15 | Now let's add in our curly brace and start
entering the tasks that we want to perform.
| | 02:21 | The first such task is to put the
current src value in a variable named orig.
| | 02:28 | So I'll put in orig = sources and then
in square brackets i, that's the current
| | 02:35 | object in the array that we're looping
through, .getAttribute, parenthesis and
| | 02:41 | the attribute we want to get is the
source. Then we'll store that value in a new
| | 02:46 | attribute called data-orig, sources i.
setAttribute, parenthesis, the attribute
| | 02:56 | we want to set in single quotes is data-orig,
follow that with a comma (,) and
| | 03:04 | the value we want to put in there is the variable, orig.
| | 03:08 | Finally, we'll use regular expressions,
which I'd like to think of as search and
| | 03:13 | replace on steroids, to swap the
bumper in file name for each of the sources.
| | 03:18 | To do that, we'll start very similar
to the last line, source i.setAttribute,
| | 03:27 | and the attribute we want to set is src,
follow that with a comma (,).
| | 03:31 | Now the value we're going to put in there
we'll use the JavaScript replace
| | 03:36 | function in combination with a regular
expression to put the new file name in the
| | 03:40 | source value, orig.replace. We'll do
an open and close parenthesis and here
| | 03:47 | comes the regular expression.
| | 03:49 | The regular expression will definitely
appear complex, but when you break it
| | 03:53 | down it's really not that bad.
Basically, it will break the file name down into two parts.
| | 03:59 | The first part, before the period in a
file name, which is the basic name and then
| | 04:03 | the other part, after the period, which is the extension.
| | 04:07 | Let's write that by putting a escaping slash (/)
and then a set up of parenthesis.
| | 04:13 | This will group the pattern that is returned
by the regular expression and here we
| | 04:16 | do a \w+ and that will get whatever
is within a certain group of words.
| | 04:24 | After the next parenthesis, put
another backslash (\) and a period (.).
| | 04:29 | Now this period here is actually the dot in
between the basic file name and the extension.
| | 04:36 | So then, we put in another set of
parenthesis, and again, we're going to do a
| | 04:41 | \w+, exact same construct and after that
particular parenthesis a forward slash (/).
| | 04:49 | That part of the regular expression is now complete.
| | 04:52 | So I'll put a comma (,) and then the
main part of the file name that we're going
| | 04:56 | to be using, then we substitute
the basic name with bumper-in.
| | 05:01 | If your assets are named something other than
bumper-in, this is where you would change that.
| | 05:05 | Now still staying within the single quotes,
period and then $2.
| | 05:11 | The $2 tells the regular expression
to pick whatever the second grouping is
| | 05:17 | and that's the second \w+ that we see here,
which will be the extension and place it here.
| | 05:24 | Okay, that's all done.
| | 05:25 | I'll put a semicolon (;) there to close that out
and now the first part of our JavaScript is complete.
| | 05:31 | Be sure to save the file and let's move on
to connecting the main video in the next lesson.
| | Collapse this transcript |
| Connecting the main video| 00:00 | Now it's time to hook up our
JavaScript to play the videos.
| | 00:04 | We can do this, thanks to the Video
DOM API supported by all modern browsers.
| | 00:09 | The routine that we use will load the
videos and if they're played by the user,
| | 00:15 | listen for them to end.
| | 00:17 | When they do end, we'll swap out the
next video source and play it, unless it's
| | 00:22 | the last one of course. Sound zippy?
It is. So let's get to the code.
| | 00:27 | We're going to start our code where we left off.
| | 00:31 | I have opened here as an example, the
index.htm file from Chapter 2_02_03 and
| | 00:37 | we're going to put our next code
right after the close of a for loop.
| | 00:42 | First, let's get all the video objects
and I'll put them in my variable videos.
| | 00:48 | So I enter document.get ElementsByTagName,
open and close parenth and this time
| | 00:58 | the tag name is video.
| | 01:00 | Next, we'll loop through those objects.
| | 01:02 | Now this means that the routine
should work regardless of the number of
| | 01:05 | videos on your page.
| | 01:08 | So I'll start with a for followed by
an open and close parenthesis and then,
| | 01:13 | i=0, l=videos.length;
| | 01:24 | and the condition as long as i>l then
increment i. Afterwards, an open and close curly brace.
| | 01:35 | Now within the loop the first task is to load the video.
| | 01:39 | So videos i that will get whatever
the video is currently in the array.
| | 01:47 | After the square bracket .load and this
is one of those JavaScript API events we
| | 01:53 | were talking about, put in a semicolon (;).
| | 01:56 | Next, we'll add an EventListener,
which waits for the video to end.
| | 02:01 | This leaves the ability to start and
stop videos in the site visitors' hands.
| | 02:06 | Videos i.addEventListener, open and close parenth.
| | 02:15 | And what is the event that we're listening for?
| | 02:19 | It's the one called ended.
| | 02:21 | And then, what do we do when
that particular event occurs?
| | 02:25 | Following the comma (,) we started off
with a function, open and close parenth
| | 02:31 | and then the curly brace pair.
| | 02:33 | I'll scroll up a bit more.
| | 02:34 | Once the ended event has fired we'll get all of the sources.
| | 02:38 | The code to do this is almost the same as we have up here.
| | 02:42 | So let's go ahead and copy that and I'll paste it
as the first line here within my function.
| | 02:49 | Now we also want to loop through
these just as we did before.
| | 02:52 | So I'm going to go up and copy the
next line and then paste it in under here.
| | 02:57 | Now I want to add a closing curly brace here
then put my next set of code within that.
| | 03:04 | Now as we loop through the sources
we're going to get the attribute data-orig
| | 03:10 | that we previously set up and
put it in a variable named orig;
| | 03:14 | orig=sources i.getAttribute, open and
close parenth and then in single quotes
| | 03:26 | the attribute we're getting data-orig.
| | 03:30 | Now we can test to see whether there was
anything in the attribute data-orig or not.
| | 03:37 | If there is then, if orig exist that means
we're working within the main video
| | 03:44 | and not the bumpers and so we can
set the src attribute to that value.
| | 03:49 | So sources i.setAttribute, open and
close parenth, the attribute we're setting
| | 03:58 | source and the value we're putting in it is orig.
| | 04:03 | I'm going to put my cursor after the
if orig clause and create a new line.
| | 04:09 | And now, we're going to clear out
the data-orig attribute by doing
| | 04:15 | sources i.setAttribute data-orig comma (,)
I'm going to make sure to put my
| | 04:25 | comma (,) after the closing single quote there -
and just a empty pair of single quotes.
| | 04:32 | Now let's go pass the next curly brace,
which will take us out of the loop and
| | 04:38 | once that's all done we'll load the current video.
| | 04:44 | This will register whatever changes
that we've made and play it.
| | 04:51 | I just need to add a closing semi-colon (;)
here and we're done.
| | 04:56 | I know that's a lot to take in but we're almost home.
| | 04:58 | The last step is to play the final bumper
and we'll tackle that next.
| | Collapse this transcript |
| Playing the final bumper| 00:00 | All right we're in the home stretch.
| | 00:02 | All that's left is to load and play the final bumper.
| | 00:06 | But to do that we have to make sure we're
playing the main video and not the first bumper.
| | 00:11 | And then, we have to listen for that main video to end.
| | 00:15 | Sounds more complicated than it is, so let's go for it.
| | 00:18 | I have opened index.htm from the
Chapter 2 02_04 folder and we're basically
| | 00:24 | picking up where we left off in the previous video.
| | 00:27 | First, I'm going to bring my modified variable
that I declared in the first line of the script into play.
| | 00:35 | I'll use this variable to check to see
if the src attribute has changed after
| | 00:40 | the first bumper has played.
| | 00:42 | So I need a flag to set modified to false
and I'll put that right after line 102
| | 00:50 | where it says videos i.load.
| | 00:53 | Now once we have it set to false, the
condition under which we wanted to be true
| | 00:59 | is if we are playing the main video and
the source attribute has been modified.
| | 01:05 | After line 109 I'll make a new
line and put in modified = true.
| | 01:11 | Now I'm just going to create a new line
here to get rid of this unneeded white space.
| | 01:17 | We've already played bumper in and the main video.
| | 01:20 | Now let's add the code to set up bumper-out.
| | 01:23 | Well, this will be handled through an
else clause that triggers if we're not in
| | 01:28 | the main video anymore.
| | 01:31 | So on line 111 I'll enter in
else and then a curly brace pair.
| | 01:36 | Within the else clause we first we'll
get the src attribute and assign it to
| | 01:42 | the current variable;
| | 01:44 | current = sources i.getAttribute, open
and close parenth and single quotes and
| | 01:56 | the attribute we're getting, which is src.
| | 01:58 | Next, we want to check to see if that
source or src is equal to bumper-out.
| | 02:04 | So we'll use the JavaScript index of
function to check that condition.
| | 02:11 | So this is an if statement;
| | 02:12 | if current.indexOf open and close parenthesis
and what we're checking for is bumper-out.
| | 02:23 | Again, if your bumper out is named
something other than what I have in a moment
| | 02:29 | of clarity named bumper-out,
this is where you would change that.
| | 02:34 | So we'll check to see if it was found.
| | 02:36 | If it was not found, a negative one
will be returned by the index of function.
| | 02:41 | And if it's not found, we want to do
some stuff and the first thing that we want
| | 02:47 | to do is set the attribute of source
using our regular expression.
| | 02:54 | So for that I'm going to go up, grab my
regular expression here, come down and
| | 03:06 | paste it in and you want to be sure
to change bumper-in to bumper-out.
| | 03:11 | Otherwise, everything else is exactly the same.
| | 03:14 | Now after that line again we've modified the source.
| | 03:18 | So let's put in a modified=true and we
want to put in a else clause to go with
| | 03:26 | our if, so this becomes an if else clause now.
| | 03:29 | So if the condition is false we're going to
pause the video and set modified to false.
| | 03:37 | Finally, I need to wrap the load and
play functions that you see on lines 123
| | 03:44 | and 124 within if modified clause.
| | 03:49 | This will prevent endless looping.
| | 03:51 | So I'm going to create a little line in
front of that and put in if modified and
| | 03:58 | put in my closing curly brace after this load and this play.
| | 04:03 | Let me go ahead and just indent it a
little bit so it neatens up and we're all done.
| | 04:09 | Well, it's time for the moment of truth.
Oh, just a second.
| | 04:13 | I just spotted a problem on line 114,
the line that I copy and pasted in.
| | 04:19 | You always have to be very careful with these;
| | 04:22 | where I have orig.replace.
| | 04:24 | I actually want to make current.replace.
| | 04:29 | Otherwise everything else is as we set it up on this line.
| | 04:33 | Now we're ready to save it again
and let's try it out in the browser.
| | 04:42 | Okay, I'll scroll down.
| | 04:44 | There's my video with its poster image. I'll click play.
(video playing)
| | 04:55 | And our opening bumper is playing very smoothly.
| | 04:58 | So let me scroll towards the end of that, play again.
(video playing)
| | 05:06 | And we seamlessly go in to the main video.
| | 05:09 | Now let's scroll to the end of the main video.
(video playing)
| | 05:20 | And so is this video project.
| | 05:22 | That's our HTML5 Video Bumper Project.
| | 05:25 | Thanks for hanging in with me.
| | 05:27 | I think the code really showcases one of the
key benefits for using the HTML5 video tag.
| | 05:33 | Now anytime the client wants to update
their message all they need to do is cut
| | 05:38 | a new bumper, convert to the
needed sources and you're done.
| | 05:41 | It is awesome, don't you think?
| | Collapse this transcript |
| Troubleshooting| 00:00 | Testing often reveals problems that don't
surface during development that's why you test.
| | 00:06 | In this lesson, I'm going to go over
any issues that have been encountered and
| | 00:10 | discussed the fix and/or work around.
| | 00:12 | Currently, I'm only aware of one such problem
and that's with webKit browsers.
| | 00:17 | So it affects both Safari and Chrome.
| | 00:19 | I realize when testing Safari on a live site
that the initial bumper was never ready to play.
| | 00:26 | You'd see a loading message in the
video player status bar down in this area.
| | 00:33 | After some digging, I discovered that
the issue had to do with MIME types.
| | 00:38 | If your web host doesn't have the proper MIME
type set up for your video formats,
| | 00:42 | the video won't play.
| | 00:45 | Now you can solve this issue in one of two ways.
| | 00:48 | You can either set the MIME type
through your web host interface;
| | 00:51 | some host allow this while others do not.
| | 00:54 | Or you can take matters into your own hands
and create an HT access file to put in your site route.
| | 01:00 | Let me show you how.
| | 01:02 | Here in my code editor I have a new
text file open and I'm going to add my
| | 01:07 | three needed MIME types.
| | 01:09 | I'll use the keyword AddType and
then the MIME type that I want to add,
| | 01:16 | video/mp4 space and the extension .mp4.
| | 01:24 | Let's do that again.
| | 01:26 | This time for video/ogg .ogv.
| | 01:35 | One last time, AddType video/webm .webm.
| | 01:45 | Once that's done, let's save the file
in your site root and you would save it
| | 01:52 | as .htaccess, no extension just .htaccess.
| | 01:58 | The dot is important because it designates a system file.
| | 02:01 | Once you've saved the file, post it
online in your site root. That's it.
| | 02:06 | Your video complete with in and
out bumpers should be good to go.
| | Collapse this transcript |
|
|
