Now the next variable is going to be the variable that's going to hold all of the HTML code.
So we are going to type var videoCode equals two tick marks and a semicolon.
Now let's go back to the exercise files.
Let's open up the code_snippets.html.
What we are going to do in here is we are going to be using this HTML5 player code.
So it starts off with the video tag. The video tag has a width and height
specified, controls, autoplay. Autoplay is not going to work in every browser.
For example, it doesn't work on mobile devices and it doesn't work in Chrome,
but we can put it in here, because it will be supported in some browsers.
And inside the video tag we typically specify multiple sources.
The first source we are going to pick is the video ogg or Ogg Theora format.
This is what's going to be used by Firefox.
After that we are going to pick MPEG4. This is going to be used by all of the
other devices that we looked at in the introduction video.
And then if neither of these work or the browser doesn't support the video tag,
it's going to see this object and embed tag, which is all of the code that
we need to run Flash.
So the same video file, the MPEG4, is going to be loaded into an FLV player
embedded inside of a Flash video skin.
Now the way Flash takes in additional variables is with a query string variable here.
So we have player.swf?.
And then we say videoFile equals and we pick the actual file names.
All of the variables that we need to set, I have put a letter x in here, so the
height, width, actual video file, the skin, the individual players, everything
is specified in here with an x.
If we scroll down a little bit further, what I have done here is I
condensed all of the whitespace out of the code and I have actually gone and
replaced the axis with the actual variables that we just created.
So we are going to select this entire block of code here and copy this to the clipboard.
Let's switch back to video_gallery.js and inside of the two tick marks for
the string literal, we are simply going to hit Paste and paste all of this code in here.
So now all of this HTML code becomes part of this one variable and each one of
these variable pieces that we've defined up here is going to get replaced out.
So every time we click an anchor link with a videoLink class, all of these
variables are going to get picked up from the individual anchor we clicked.
This video code here is going to be modified with all of those different values,
and after that's done what we are going to do is specify that all of this code
get written to a specific point in our HTML file.
So on another line let's type dollar sign, beginning and ending parentheses.
Inside of here two tick marks for string literal. Pound sign, which specifies an ID.
I am going to say videoPlayer.
That's the name of the div we added to the HTML file, .html, beginning and
ending parentheses, semicolon, and let's come up here and grab the videoCode name
and copy that to the clipboard.
Let's come down to the parentheses inside of the html and hit Paste.
So now every time we click on that link, after all of the variables are defined
and the videoCode has been modified, we are going to take all of that code and
put it into the videoPlayer area.
Once that's done we need to invoke FancyBox.
Now typically FancyBox works by attaching the fancybox class onto an object like
an anchor tag, but in this case we are going to call it manually.
So we are going to use $.fancybox, because we want to have all of
these things happen first.
We don't want it to happen on click.
So $.fancybox, beginning and ending parentheses. Inside of here we are
going to do beginning and ending bracket.
Then we are going to split the bracket open, put a semicolon after the parentheses.
Inside of fancybox let's add some values. Two tick marks for string literal,
transitionIn :, space, two tick marks, fade.
That's going to be the first parameter. Comma, next line.
Two tick marks, transitionOut :, space, two tick marks, another string literal, fade, comma.
Two tick marks, string literal, overlayColor, overlay, all lowercase, Color :, space,
two tick marks, #000.
This is going to be black. Comma, next line.
Two tick marks string literal, overlayOpacity :, space, two tick marks, string literal,
.6 for 60%, comma. Then lastly, two tick marks, href :, space, two tick marks, and in here we are going
to put #videoPlayer.
No comma on the last item, and then we have the ending tag here.
So again, instead of having FancyBox attached on the click event we are going to
let the click event run all of these values, update the player code, and then we
are going to manually call FancyBox and target the videoPlayer container that
holds all of the code.
So at this point let's go File > Save All.
Now let's switch back to index.html. Let's choose File.
Let's preview this in our browser. Let's hit Reload.
Now when I click on the link, we should see the FancyBox pop-up and the
video start to play.
(Bicyclist: Yeah.) (Car revving)
These controls down here are the default for Safari.
As we look at different browsers,
we will see different sort of player controls.
This is up to each browser on how they want to support HTML5 video
and what internal video playback mechanism they have built- in.
Also notice the size of this.
I am going to click on another video.
which has a smaller size.
(Waves crashing)
(Music playing)
So each one of these videos has a different size specified in the anchor links.
(Male speaker: To separate the oil from the rest of the olives. Then this?)
(Music playing)
I am going to hop back over to Dreamweaver.
Let's choose File > Preview in Browser just to make sure this is working in
Firefox with the OGV format.
Let's hit Reload, click on our links.
(Waves crashing)
(Music playing)
So those are working as well.
So now in the next movie we are going to take a look at some code that we can
put into our JavaScript to change the user experience on mobile devices and how
we can activate these HTML videos to work in Android as well.