IntroductionPreviewing the project across browsers and devices| 00:04 | Hi! This is Chris Converse and this is a
course on creating an interactive video gallery.
| | 00:07 | So I want to start by showing the final
project that we are going to be creating.
| | 00:12 | In the Final Project
folder we have two HTML files.
| | 00:15 | We have an index_option_1 and index_option_2.
| | 00:18 | Inside of the includes, we have two
different JavaScript file options as well.
| | 00:22 | Both of these options have to do with how the
video player is going to work on mobile devices.
| | 00:27 | So we'll take a look at those in a
moment. But first let's come over to Safari
| | 00:30 | and take a look at how this
interactive experience is working in Safari.
| | 00:35 | So when I roll over each of these
thumbnails I get at a rollover state.
| | 00:38 | When I click on a thumbnail it
uploads a video up in a light box.
| | 00:42 | And then each browser is going to use
its own built-in HTML5 support to show the
| | 00:46 | video controls as well.
| | 00:47 | So clicking outside will make the video go away.
| | 00:50 | Click on the next video.
| | 00:51 | (Music playing)
| | 00:54 | Close that as well.
| | 00:55 | So this is how the user
experience looks in Safari.
| | 00:58 | In Firefox, instead of using MPEG4,
which is the video format that all of the
| | 01:02 | browsers and devices are going to use
except Firefox, we are going to be using
| | 01:05 | the Ogg Theora or OGV video file format.
| | 01:08 | So again, I can come in here and
clicking gets the same user experience.
| | 01:11 | The controls are going to look a
little different based on how Firefox's
| | 01:14 | controls are going to be
rendered as opposed to other browsers.
| | 01:18 | (Music playing)
| | 01:21 | These videos work great.
| | 01:23 | Let's come into Chrome.
| | 01:24 | Now Chrome doesn't allow auto play by
default, so we click on the video it
| | 01:28 | loads up but I do have to come down
here and click Play in the Chrome browser
| | 01:31 | to see these rendering.
| | 01:35 | Now if your browser doesn't support
HTML5 video we also have a Flash fallback
| | 01:39 | that we are going to be programming in.
| | 01:41 | So we have some Flash video players and a
video skin that you can put into your project.
| | 01:45 | So for browsers like IE 7 and 8 that
don't have HTML5 video support, what's
| | 01:49 | actually going to happen is it's
going to use Flash instead of HTML5.
| | 01:53 | So if I were to right-click on this,
I would see that we are actually using
| | 01:55 | Flash here instead of HTML5 video.
| | 01:59 | Now the options I was referring to
before have to do with how the different
| | 02:03 | mobile devices are going to handle video.
| | 02:05 | If we look at this running on an iPad,
you will notice that the iPad user's
| | 02:09 | experience is very similar to
that of the computer screens.
| | 02:12 | I tap on a video, an overlay comes up.
| | 02:14 | I can tap on the overlay, the video
will start to play right in line inside of
| | 02:18 | the FancyBox overlay, and then I can
also click the full-screen view to come
| | 02:23 | out of the container, go into full-
screen view using the device's video player,
| | 02:27 | and then condense that down
and go back to the lightbox.
| | 02:30 | The two options that we really were
talking about for mobile devices have to
| | 02:34 | do with the phones.
| | 02:35 | The Android platform doesn't support
HTML5 video unless we use an onClick
| | 02:40 | JavaScript event and we don't specify
the codec. And in both cases for the
| | 02:45 | iPhone and Android, we can see
that the video overlay comes up.
| | 02:48 | I can tap on the video and then they
will each jump into their respective video
| | 02:52 | players and play the video.
| | 02:54 | The second option has to do with
bypassing the overlay altogether since neither
| | 02:58 | platform supports playing the
video inside of the overlay.
| | 03:03 | So the second option is to just
change the link. Instead of having the link
| | 03:07 | invoke the overlay,
| | 03:08 | we are going to have the link change the URL
to go directly to the actual video file itself.
| | 03:13 | Now on the iPhone platform, this means
that it opens another window in Mobile
| | 03:17 | Safari requiring us to hit the Back button.
| | 03:20 | And during this course we are
actually going to show you how to do
| | 03:22 | JavaScript detection so you can
change the user experience depending on the
| | 03:25 | individual devices.
| | 03:27 | So I hope this sounds interesting to
you and if so let's get started with
| | 03:30 | the first movie.
| | Collapse this transcript |
| Using the exercise files| 00:00 | When you download the exercise files there
is going to be three items inside of there.
| | 00:03 | There is an Art Templates folder,
| | 00:05 | there is a code_snippets.html,
and a Final Project folder.
| | 00:09 | Inside of the Final Project are all
of the files that we took a look at in
| | 00:12 | the introduction video.
| | 00:14 | There are two HTML files, an
index_option_1 and an index_option_2.
| | 00:19 | Inside of the includes, there are
two option JavaScript files as well,
| | 00:22 | option_1 and option_2.
| | 00:24 | The option_1 JavaScript file is
imported in the option_1 HTML file and in the
| | 00:30 | introduction video, we talked about two
possibilities for including support for
| | 00:34 | the iPhone and the Android operating systems.
| | 00:37 | So each of these options
correlates to those options we looked at in
| | 00:40 | the introduction video.
| | 00:41 | During the course, at the end we
are actually going to add in these two
| | 00:44 | different options and talk about the
differences between the way these are
| | 00:47 | implemented and you can decide
which one you want to use in your
| | 00:50 | particular projects.
| | 00:51 | Let me close Final Project.
| | 00:53 | Code_snippets has the HTML5 video player
with the Flash fallback embedded inside of it,
| | 01:00 | so we are going to be using that
as sort of a basis and we are going to
| | 01:03 | be using JavaScript to create a
variable with all of that code and dynamically
| | 01:07 | inject that into our video player.
| | 01:11 | And in the Art Templates
folder we have a template_items.psd.
| | 01:14 | This is a native Photoshop file with the
slices already in place that create the
| | 01:17 | design of the player.
| | 01:19 | Of course you can modify this file or
use the basic code for the video player
| | 01:23 | and add your own design into your own
project. And with that, we will start
| | 01:27 | creating our project folders in the next
movie and begin developing our project.
| | Collapse this transcript |
|
|
1. Preparing the GraphicsExporting image slices from Photoshop| 00:00 | To start our project, let's
create a new folder on the desktop
| | 00:02 | called myVideoGallery.
| | 00:09 | Let's open that up and then inside
let's create two additional folders, one
| | 00:14 | called images, one called includes.
| | 00:22 | Now, with those in place, let's come
back to the exercise files, let's go into
| | 00:24 | Art Templates and let's
open up template_items.psd.
| | 00:27 | Now this Photoshop file has
some slices already in place.
| | 00:31 | I am going to use my magnification
tool here and just zoom up a little bit.
| | 00:36 | So we have three graphics we
are going to export from here.
| | 00:38 | Click on the Slice selection tool here.
I can double-click on the first slice.
| | 00:42 | This is going to be the play icon.
| | 00:44 | The one over here in the center is
going to be the ie_caption_transparency.
| | 00:48 | Since IE 7 and 8 don't support the
RGBA color specification from CSS3, we are
| | 00:54 | going to have an alternate CSS
file that's going to bring in this
| | 00:57 | semi-transparent PNG file.
| | 00:58 | So we can get a semi-transparent
caption, as we saw in the introduction video,
| | 01:02 | working in IE7 and 8.
| | 01:04 | And then lastly we have this filmstrip
graphic over here, this particular tile.
| | 01:10 | We have made sure to make sure that the
masking in the top area here matches the
| | 01:14 | masking at the very bottom.
| | 01:16 | So as this graphic tiles, depending on
the height of the overall player, we are
| | 01:19 | going to get a seamless transition
between the images tiling up and down and
| | 01:24 | this is going to be called
filmstrip_tile. Let's choose OK.
| | 01:28 | At this point, let's choose
File > Save for Web & Devices.
| | 01:30 | In the upper left-hand
corner here we see the Slice tool.
| | 01:34 | I am going to select the first slice, hold
the Shift key, select the other two slices.
| | 01:39 | In the upper right-hand corner let's
make sure we have PNG-24 as the Web graphic
| | 01:43 | format and then lastly let's
come down and choose File > Save.
| | 01:46 | Now on the desktop let's go
into myVideoGallery/images.
| | 01:50 | We will choose All User Slices down here
in the Slices setting, then choose Save.
| | 01:57 | We can see in the background the three
different slices up now have been saved out:
| | 01:59 | filmstrip_tile, ie_caption
_transparency and play_icon.
| | 02:03 | Let's come back to Photoshop.
| | 02:06 | Let's close our file.
| | 02:07 | So now let's close up our templates.
| | 02:10 | We won't need to be going back into
Photoshop for the rest of the course.
| | 02:13 | And now that we have all of our
graphics in place, in the next movie we are
| | 02:16 | going to start by creating a brand-new
HTML and CSS file and start building a
| | 02:20 | layout based on these particular graphics.
| | Collapse this transcript |
|
|
2. Setting Up the Project FilesCreating new HTML and CSS files| 00:00 | Now that we are ready to create our HTML
and CSS, let's move over into Dreamweaver.
| | 00:05 | If you prefer to do this course and a
code only environment we're also offering
| | 00:09 | the same course in Aptana Studio and
you can find that in the library as well.
| | 00:12 | So with Dreamweaver running,
let's come up to the File menu.
| | 00:16 | Let's choose File > New.
| | 00:18 | Under Page Type let's choose HTML.
| | 00:20 | If you are using Dreamweaver 5 or 5.5
you can choose HTML5 as a Document Type.
| | 00:27 | If you're using earlier versions of
Dreamweaver you can still create HTML5
| | 00:31 | documents; just Dreamweaver won't give you
any sort of code hinting to help you code along.
| | 00:37 | So if you're using an earlier version
of Dreamweaver CS5, you are going to want
| | 00:40 | to choose XHTML Transitional and then
we can update the DocType, which we will
| | 00:43 | take a look at in a moment.
| | 00:44 | So choose HTML5. Hit Create.
| | 00:47 | Now if I come over to Code view, you
can change the document type from XHTML in
| | 00:53 | earlier versions of
Dreamweaver to !DOCTYPE HTML.
| | 00:58 | So the doctype for HTML is just a really
simple statement that just declares HTML.
| | 01:05 | Switch back to Design View.
| | 01:07 | Next, let's choose File > New.
| | 01:09 | Let's create two CSS files.
Start by creating the first one.
| | 01:15 | Let's choose File > New
and create the second one.
| | 01:20 | With the second file selected or in
the forefront let's choose File > Save.
| | 01:24 | Let's save this into the includes
directory and let's call it video_gallery.css. Hit Save.
| | 01:36 | The other CSS file, let's choose File > Save.
| | 01:39 | We are going to call this video_gallery_ie.
| | 01:45 | This file is only going to be used for
Internet Explorer 7 and 8. Let's choose Save.
| | 01:51 | Lastly, let's come back to the
HTML file. Choose File > Save.
| | 01:55 | We are going to put this in the
main root of the VideoGallery folder.
| | 01:58 | We will just call this index. Choose Save.
| | 02:03 | Now that our CSS and HTML files are
created, let's go up to the Format menu, CSS
| | 02:09 | Styles > Attach Style Sheet. Browse.
VideoGallery/includes/video_gallery.css, then
| | 02:20 | click Choose, then say OK.
| | 02:23 | We have now created a link.
| | 02:25 | You can see the related files here in
Dreamweaver. video_gallery.css is now
| | 02:29 | being linked to from the index.html file.
| | 02:34 | At this point let's switch to Code View.
| | 02:36 | We are going to need to add a few lines
of code into here for Internet Explorer.
| | 02:40 | The first one we are going to add is
going to be a meta tag for IE9 and this
| | 02:44 | is going to tell Internet Explorer 9 that
it's okay to use its HTML5 rendering engine.
| | 02:49 | So let's start by creating a new
line after the existing meta tag.
| | 02:55 | Begin the tag, meta, space, http equivalent,
equiv, = "", then a forward slash and an ending tag.
| | 03:12 | Inside of the http equivalent we are
going to type X-UA-C, the word Compatible.
| | 03:25 | We are going to add a second attribute,
content = "", and inside the quotes we
| | 03:33 | are going to type IE=9.
| | 03:38 | So again, this will tell
Internet Explorer to use its HTML
| | 03:41 | rendering capabilities.
| | 03:43 | The next thing we need to add is an
HTML comment and inside of that comment
| | 03:47 | we are going to put a conditional statement
that only Internet Explorer can understand.
| | 03:52 | So before the ending head tag,
let's come down here and type <!--.
| | 04:00 | This is the beginning of an HTML comment.
| | 04:02 | Now inside of here we are going to
use two square brackets and inside of
| | 04:07 | here we are going to type if lt, for
less than, IE 9, then we are going to end
| | 04:20 | that particular tag.
| | 04:21 | So basically what we are saying here is
if the browser is less than IE 9, let's
| | 04:25 | hit Return, let's tab in.
| | 04:31 | First thing we are going to do is add
in that Google shiv we talked about in
| | 04:34 | the introduction video.
| | 04:35 | So we are going to say
script src for source = "".
| | 04:43 | We are going to end the tag, then
we are going to end the script tag.
| | 04:47 | Now the file source we are going
to point is up on Google's web site.
| | 04:55 | http://html5shiv.
googlecode.com/svn/trunk/html5.js.
| | 05:23 | This JavaScript file will talk to
Internet Explorer 7 and 8 and make them
| | 05:28 | recognize all of the new tags in
HTML5 through the use of JavaScript.
| | 05:34 | On the next line type a beginning tag,
type a link, rel for relative, = "".
| | 05:48 | We are going to type stylesheet.
| | 05:53 | Outside the quotes, new
attribute type= "text/css".
| | 06:05 | Then another attribute. href =
"includes/video_gallery_ie.css"/ and then end the tag.
| | 06:24 | Now after we have done that, let's add
another return and we want to end this
| | 06:30 | conditional statement
inside of another HTML comment.
| | 06:33 | So we are going to do a beginning tag,
exclamation point, two square brackets,
| | 06:39 | endif, the two words end if
condensed down into one word, two hyphens and
| | 06:49 | then the ending tag.
| | 06:51 | So basically the beginning of the HTML
tag starts here, the end starts here, and
| | 06:56 | this square bracket indicates to
Internet Explorer, which is the only browsers
| | 07:01 | that will support this particular
conditional statement, and it's basically
| | 07:04 | saying if this is less than IE 9 we are
going to import the Google shiv and we
| | 07:08 | are going to import that video_gallery.ie
file that we created so that we can do
| | 07:13 | things like use that
transparent PNG file for the captions.
| | 07:19 | With that in place, let's switch back
to Design view, let's choose File > Save All,
| | 07:23 | and in the next movie we will start
creating some CSS and HTML to create the
| | 07:28 | design of our gallery.
| | Collapse this transcript |
| Adding HTML anchor links for thumbnails| 00:00 | To get started with our layout, I
first want to add some HTML to the page.
| | 00:04 | So in Dreamweaver, we are going to come
down to the Insert panel. So you can get
| | 00:07 | to that by going to the
Window menu and choose Insert.
| | 00:10 | This panel you can also dock to the top
of your screen, which I've done here, which
| | 00:14 | turns the Insert panel into tabs.
| | 00:18 | So under Layout, let's come down to the
very first item and choose insert a div tag.
| | 00:21 | We are going to give this a custom
class name, video_gallery_container, then choose OK.
| | 00:33 | When you insert a div in Dreamweaver,
it gives you a sort of bounded box area
| | 00:37 | indicating that there is a div and
you put some default text inside so we
| | 00:40 | can get a cursor inside of here and make
sure that we can add things inside the div area.
| | 00:44 | We are going to select some text here.
| | 00:47 | Come down to the Properties panel,
Shift+3 for a pound sign, hit Return.
| | 00:53 | This is going to create a self link,
so I can see the actual anchor tag.
| | 00:56 | At this point let's switch to Code View.
| | 00:59 | Inside of CodeView, I am
going to format this a little bit.
| | 01:01 | I will tab in the div.
| | 01:04 | Let's come in and get rid of the
default text Dreamweaver we added in.
| | 01:06 | I will tab in the anchor tag, bring
the ending div out, and I also want to get
| | 01:12 | rid of the text inside of the anchor tag.
| | 01:14 | I just want it to be blank.
| | 01:17 | Lastly, let's get rid of href and let's
add class equals, beginning and ending
| | 01:22 | quote, and inside we are going to
use the class called video link.
| | 01:30 | With that in place, let's copy that,
again a paste, Command+V or Ctrl+V, five
| | 01:39 | more copies so that I have six anchor links.
| | 01:42 | After the anchor tags, let's add in
another div, class= "clear_both", and
| | 01:55 | then let's end the div.
| | 01:57 | This is going to be a class
that we are going to create
| | 01:58 | that's going to clear out all of the
floats from the anchor tags that we are going
| | 02:02 | to be setting up inside of our CSS.
| | 02:04 | At this point let's switch back to Design view.
| | 02:07 | Now in the Design view we
can't see any of the anchor tags.
| | 02:10 | They have nothing inside of them so
that their dimensions are now 0 pixels.
| | 02:14 | But what we are going to do in the
next movie is evaluate our sketch for
| | 02:17 | the design, modify your CSS files, and
lock onto the classes we just added to our HTML.
| | Collapse this transcript |
|
|
3. Preparing the Gallery LayoutSetting up and designing the outer container| 00:00 | Now before we start creating some of
the CSS rules, I want to refer back to a
| | 00:03 | sketch that we created
for this particular project.
| | 00:06 | So I always recommend creating a sketch.
| | 00:07 | This gives us the ability to sort of
figure out what the user experience is
| | 00:10 | going to be and give us a chance to
add some of the measurements in place so
| | 00:13 | that we know what we are
creating inside of our CSS.
| | 00:16 | So in the introduction video, we looked
at the fact that the outermost container
| | 00:19 | of this is going to be fluid or liquid,
meaning it can actually be stretched to be
| | 00:23 | whatever width the browser is or the
device you are looking at the gallery on.
| | 00:27 | But inside of the container, we do
want to have few measurements in place.
| | 00:30 | I want to set the top and bottom padding
to 25 pixels, meaning nothing inside of
| | 00:35 | the container can get
within 25 pixels of the edges.
| | 00:38 | The right-hand side we are going to
leave at zero because we are going to
| | 00:40 | set margins on the thumbnails, but
the left-hand side I want to set a
| | 00:43 | padding of 115 pixels.
| | 00:46 | That way we have enough room in the
left hand side to have that vertical tiling
| | 00:49 | filmstrip graphic we
created earlier in Photoshop.
| | 00:52 | Now the other measurements we are going
to be creating are going to be thumbnails.
| | 00:55 | They are going to be 200 pixels wide
by a 115 pixels tall and inside of the
| | 01:00 | anchor tags for the thumbnails we are
going to have a div to hold the caption
| | 01:04 | and an image tag to hold
the Play button graphic.
| | 01:06 | Now these HTML elements we are not
going to be adding into Dreamweaver.
| | 01:10 | We are actually going to inject those
with JavaScript later on in the course.
| | 01:13 | So now let's go back to
our Dreamweaver document.
| | 01:17 | Let's go back to the HTML file and in
the CSS Styles panel over here we are
| | 01:21 | actually going to create some new
rules inside of the video_gallery.css file.
| | 01:27 | Let's come down and enter
video_gallery_container.
| | 01:33 | Make sure it starts with a period. Let's click OK.
| | 01:38 | Now let's define the properties of this.
| | 01:42 | First let's come down to
the box model properties.
| | 01:44 | For Padding let's uncheck Same for all,
and let's add in those paddings we were
| | 01:48 | looking at in the sketch.
| | 01:48 | It's 25 on the top, 0 on the right,
25 on the bottom, 115 on the left.
| | 01:54 | Let's move over to the border settings.
| | 01:59 | Let's keep Same for all
for Style, Width, and Color.
| | 02:01 | I'm going to choose a solid, 2 pixel
and for color, I am going to type #444.
| | 02:06 | That's going to give us
that sort of dark gray color.
| | 02:14 | And lastly, let's come down to Background.
| | 02:16 | For the Background-color let's
use the eyedropper and choose black.
| | 02:19 | Background-image we'll choose Browse.
| | 02:24 | Let's choose filmstrip_tile.png inside
of the images directory. Click Choose.
| | 02:29 | For the repeat we are going
to set repeat on the Y axis.
| | 02:32 | We are going to set 0 position
for the X and 0 position for the Y.
| | 02:36 | Now at this point we will choose OK.
| | 02:39 | Now we can see in the background some of
the design is starting to take place,
| | 02:45 | the black background.
| | 02:46 | We can see the filmstrip tile
graphic happening over here.
| | 02:50 | The next rule we want to
create is that clear_both.
| | 02:52 | That's going to set the clear for all of
those thumbnails we are going to be creating.
| | 02:55 | Let's create a new rule, new class,.clear_both.
| | 03:03 | Let's come down to Box properties here
and we are simply going to come and set
| | 03:10 | both for the clear property
for this and then choose OK.
| | 03:13 | Now that we have all of the CSS in
place for the outermost container, in the
| | 03:17 | next movie we are going to start by
creating the CSS rules for the thumbnails.
| | Collapse this transcript |
| Conforming anchor links in thumbnail buttons| 00:00 | Now we are going to set up the
CSS rules for the thumbnails.
| | 00:04 | Let's come over to the video_gallery.css file.
| | 00:07 | Inside the Styles panel, let's choose New Rule.
| | 00:11 | In here, we are going to
come down and choose Compound.
| | 00:15 | We are going to type a.videoLink
with a capital L. Let's choose OK.
| | 00:22 | This means we are targeting anchor links
that have a class of video link on them.
| | 00:26 | There are a few things we are
going to want to set in here.
| | 00:30 | First let's come down to the Background.
| | 00:32 | I want to temporarily set a background
of light gray so that we can see these
| | 00:36 | anchor tags as they start to take shape.
| | 00:37 | Next let's come down to the Block properties.
| | 00:41 | Now anchor tags by default have
inline style properties, which means they
| | 00:44 | are only as wide as the content that's
inside of them that is making up the hyperlink.
| | 00:49 | Now in this case we have all of
these empty anchor tags so they are all
| | 00:52 | showing up as 0 pixels.
| | 00:54 | If we come in here to Display and
change the Display type from inline, which is
| | 00:58 | the default, to block, that's going to
change the way anchor tags behave and they
| | 01:02 | are going to behave more
like div tags or image objects.
| | 01:06 | Let's come over to the Box properties.
| | 01:07 | Let's add 200 pixels on
the Width, 115 on the Height.
| | 01:13 | We are going to click Apply at
this point and we will now see all the
| | 01:15 | anchor tags taking shape.
| | 01:17 | 200 wide, 115 tall, and they are
sort of lining up vertically now.
| | 01:22 | For Padding we are going
to set 0 for all of these.
| | 01:25 | For margin, we are going
to uncheck Same for all.
| | 01:27 | We are going to set 0 on the Top, 15 on the
Right, 15 on the Bottom, and 0 on the Left.
| | 01:35 | Click Apply again and
we can see them space out.
| | 01:38 | Let's come up to the Float properties
and choose Float left. Let's click Apply.
| | 01:43 | Now all of the anchor tags are
going to sort of flow side by side.
| | 01:46 | They are going to be 115 pixels on the
left, away from that repeating filmstrip
| | 01:50 | graphic, and the margins on the
individual objects will make sure that no
| | 01:54 | thumbnail gets within 15 pixels of
the right side of each of the individual
| | 01:58 | thumbnails or 15 pixels from the bottom.
| | 02:01 | Now we are going to have that
Play button and the caption inside of these objects.
| | 02:10 | So we are going to come down to the
Position settings and set the Positions on
| | 02:13 | each one of these to relative.
| | 02:15 | That means that the objects themselves
will play nicely in the HTML code with
| | 02:19 | all the other objects, but anything
inside with absolute positioning will
| | 02:23 | position itself relative to the
object, so each of the Play buttons will
| | 02:27 | position themselves based on each anchor tag
and not the higher container or the body tag.
| | 02:33 | Next let's go to Background.
| | 02:35 | We are going to be placing a
background video thumbnail graphic as the
| | 02:38 | background of the anchor tags and
while we are going to set the images with
| | 02:42 | JavaScript, I do want to
set the other properties here.
| | 02:45 | So we are going to set no-repeat.
| | 02:47 | We are also going to set
0 on the X and Y position.
| | 02:53 | Let's go to our Border and we want to
set a border because on our rollover state
| | 02:56 | we want the border to show up, but we
don't want to add a border on rollover
| | 03:00 | because that will cause all of
the thumbnails to shift around.
| | 03:02 | So instead we want to add a border
that we can't see in the normal state and
| | 03:05 | then have it change color on the rollover state.
| | 03:09 | So while keeping Same for all for Style,
Width and Color, let's come in and choose solid.
| | 03:14 | We are going to do 1 pixel and we are going
to come in here and choose black as the color.
| | 03:20 | And the last thing we want to
change, let's come down to Extensions.
| | 03:23 | What we want to do is under Visual
effect for the Cursor, since these anchor
| | 03:28 | tags don't have a href, some browsers
like Safari won't actually show you the
| | 03:31 | pointer tool when somebody
moves their cursor over top.
| | 03:34 | So we want to make sure that that's in place.
| | 03:36 | So under Cursor, let's type
pointer. Then we will click OK.
| | 03:43 | Now in order to test this, let's
come up to Dreamweaver's Live View.
| | 03:46 | So in Live View I roll
over each one of these items.
| | 03:49 | Now I can say I get a hand cursor and each
one of these is behaving like an anchor link.
| | 03:57 | Let's turn off Live View.
| | 03:58 | Let's create one more rule.
| | 04:01 | This will also be a Compound.
| | 04:03 | We want to create the hover
state for all of these thumbnails.
| | 04:09 | So a.videoLink:hover.
| | 04:12 | It's going to add the pseudo class to
those anchor tags with the class of videoLink
| | 04:18 | assigned to them.
| | 04:20 | Let's simply come in to the Border settings.
| | 04:24 | For Color, let's come in and
change it to white. Choose OK.
| | 04:28 | Again, let's come in to Live
View. Let's roll over these.
| | 04:32 | Now when I roll over each one, I can
see the border that's black, which appears
| | 04:36 | to be invisible, now changes
to while when I roll over these.
| | 04:41 | Let's come up in Live View.
| | 04:43 | Let's choose File > Save All.
| | 04:45 | Now there is one rule we are going
to need to set for Internet Explorer.
| | 04:47 | So let's go over to the video_gallery.css
and let's come in here and let's copy
| | 04:54 | the entire video container css rule.
| | 04:58 | Choose Edit > Copy.
| | 05:00 | Let's go over to video_gallery for IE.
| | 05:02 | Command+V or Ctrl+V to Paste.
| | 05:05 | What we need to do in the video_gallery,
Internet Explorer is not going to set
| | 05:10 | the height properly on this particular object.
| | 05:13 | So let's delete all of this text and
let's add in a height:100% and we are also
| | 05:22 | going to need to add a padding value.
| | 05:25 | padding-top of 20 pixels.
| | 05:34 | Let's choose File > Save and
then back to our HTML file.
| | 05:37 | Now that we have the CSS in place
for the thumbnails and the outermost
| | 05:42 | container, we are going to start the
next movie by creating our own JavaScript
| | 05:45 | file and hooking in FancyBox and jQuery.
| | Collapse this transcript |
| Adding jQuery and JavaScript to your project| 00:00 | To create our own JavaScript, we are
going to come up to the File menu in
| | 00:02 | Dreamweaver, come down to File > New.
| | 00:05 | Let's choose JavaScript from
the Page Type and click Create.
| | 00:10 | Right away, let's choose File > Save.
| | 00:14 | Make sure we're in the Includes
directory inside of myVideoGallery.
| | 00:21 | Let's name this video_gallery.js.
| | 00:25 | Now, let's go out to the exercise files.
| | 00:27 | Inside of Final Project, let's open up
the Includes directory here, and inside
| | 00:32 | of includes we want to bring over
the jQuery file and the FancyBox folder.
| | 00:38 | I am going to Option+Drag out a copy
of these over into my Includes directory
| | 00:43 | in the myVideoGallery.
| | 00:44 | Now, for FancyBox, we've got written
permission from Janis Skarnelis to include
| | 00:48 | this with our project.
| | 00:49 | So thank you Janis!
| | 00:51 | We also have a copy of jQuery.
| | 00:53 | You can also download jQuery from
jquery.com as well and you can learn more
| | 00:57 | about FancyBox on fancybox.net.
| | 01:00 | So now in the Includes directory we
have our jquery, fancybox, and the
| | 01:03 | video_gallery.js file.
| | 01:05 | Now, let's hook these into our main HTML file.
| | 01:09 | So let's come over to index.html.
| | 01:12 | Let's click into Code View and let's
scroll to the very top of the document.
| | 01:17 | Right after the video_gallery.css,
let's hit a Return, and in the Insert menu,
| | 01:23 | under Common, let's come over to the Script.
| | 01:26 | Let's click on Script for
insert a new JavaScript.
| | 01:30 | Under Source, we're going to click this folder.
| | 01:32 | The first file we need to bring in is the
jquery-1.6.1.minified, click Choose, click OK.
| | 01:40 | Let's hit a Return.
| | 01:42 | Let's add another script.
| | 01:43 | Let's bring in FancyBox.
| | 01:44 | Let's click Source, go to fancybox-1.3.4,
fancybox folder, and then here let's
| | 01:51 | come down and grab the packed
version. Click Choose, click OK.
| | 01:57 | Let's hit a Return.
| | 02:00 | Let's bring in the style
sheet associated to FancyBox.
| | 02:03 | Let's come up to the Format menu,
CSS Styles > Attach Style Sheet, Browse,
| | 02:10 | myVideoGallery/includes/fancybox-1.3.4/
fancybox folder, and come down and
| | 02:16 | choose the CSS file. Then choose OK.
| | 02:21 | Dreamweaver will default to putting
that right before the ending head tag.
| | 02:25 | Now lastly, we are going to
bring in our custom JavaScript file.
| | 02:28 | Let's come up to the
Insert panel. Insert JavaScript.
| | 02:31 | Let's come back out to the
Includes directory, video_gallery.js, then
| | 02:37 | click Choose. Then say OK.
| | 02:39 | Now that we've hooked in all of the
necessary JavaScript and CSS files, in the
| | 02:45 | next movie we are going to modify
our HTML a little bit and then start
| | 02:48 | writing our first scripts.
| | Collapse this transcript |
| Adding video information to the thumbnail links| 00:00 | Now to create the video thumbnails I
only want to use an anchor link and I want
| | 00:03 | the anchor link to have all the
information about the video, the size, and the
| | 00:07 | caption information.
| | 00:09 | So what we're going to do is add
attributes to the anchor tags inside of here
| | 00:13 | that will allow us to lock onto those
pieces in jQuery and build the thumbnails
| | 00:18 | and also have them trigger FancyBox
and play the video we want to watch.
| | 00:20 | Now, we already have the class
associated into each one of these.
| | 00:23 | So I'm going to come in here in the
first anchor tag and we're going to add
| | 00:29 | another attribute called videowidth="",
and this is going to be the width of the
| | 00:36 | actual video file this is going to link to.
| | 00:38 | The very first video was 640 pixels wide.
| | 00:41 | Next is going to be videoheight.
| | 00:46 | That's going to be ="360" pixels,
videofile, another attribute, equals, and here
| | 00:59 | we're going to type ocean_medium, space,
and then lastly, videocaption=, and
| | 01:14 | we'll say Caption for, and we
copy ocean_medium. It goes here.
| | 01:24 | So now that one anchor link sets up
its class, sets up the video width and
| | 01:29 | height, the video file, and the video
caption, and again we're going to pick all
| | 01:32 | that up with jQuery.
| | 01:33 | Now, back in the exercise files,
there's an HTML file called code_snippets.
| | 01:39 | Let's open that file up in Dreamweaver.
| | 01:41 | So in here are a bunch of different
pieces of code we're going to be using for
| | 01:44 | the rest of the course.
| | 01:46 | At the very top, I have all
of the anchor link attributes.
| | 01:49 | These link to all of the video files
we're including with this particular course
| | 01:53 | with all of the sizes and sample captions.
| | 01:56 | Let's start by grabbing
all of these anchor links.
| | 02:00 | We'll choose Edit and Copy.
| | 02:02 | This will just save you time from
having to type all this information in.
| | 02:05 | Let's switch over to our HTML.
| | 02:07 | Let's scroll down and let's
grab all of these anchor links.
| | 02:13 | Command+V or Ctrl+V to paste.
| | 02:14 | I'm going to format these a little bit.
| | 02:21 | Now, we'll get all of our anchor links in place.
| | 02:24 | Let's choose File > Save All.
| | 02:26 | Back to the exercise files.
| | 02:28 | We also want to take the video directory here.
| | 02:31 | Let's drag a copy of
those over into our project.
| | 02:41 | If we look inside the video directory,
we can see that we have a JPEG file
| | 02:45 | which is the thumbnail.
| | 02:46 | We have the cycling_large, cycling_
large.ogv, the two different file formats.
| | 02:51 | Again, MPEG4 for most of the
browsers in mobile devices, and the OGV, Ogg
| | 02:56 | Theora file for Firefox.
| | 02:57 | Now the file name here is matching
the file name inside the video file and
| | 03:03 | notice we're not using .JPEG, .MP4, or .OGV.
| | 03:06 | Again, we just want to know the exact name.
| | 03:08 | This will be the variable piece
we'll pull out, and then we're going to
| | 03:11 | construct the rest of the HTML
in the video player from that.
| | 03:14 | Now that we have all of the data that we
need inside of the anchor links, in the
| | 03:18 | next movie, we're going to write some
JavaScript to pick out these variables and
| | 03:21 | write additional HTML into these anchor links.
| | Collapse this transcript |
|
|
4. Finalizing the Thumbnail DesignAdding HTML to the thumbnail links with JavaScript| 00:00 | So now what I want to do is start over
in JavaScript and take each one of these
| | 00:05 | anchor links and I want to add an
image into each one of the anchor tags.
| | 00:10 | I want to add a div with the caption
and I want to set a CSS property of the
| | 00:13 | background image with the corresponding
thumbnail graphic, so that each one of
| | 00:17 | these anchor tags that are now 200 x
115 wide will have a background graphic
| | 00:22 | inside of them in addition to
the Play button and the caption.
| | 00:26 | So to start this, let's go
over to the video_gallery.js file.
| | 00:28 | So in here, we're going to start our
first jQuery statement, which is going to
| | 00:32 | be the document ready.
| | 00:33 | So I am going to type the dollar sign,
beginning and ending parentheses.
| | 00:38 | Inside the parentheses, type document.
Outside the parentheses, I'll type ready,
| | 00:47 | beginning and ending parentheses, semicolon.
| | 00:50 | Inside of the ready we're going to
type function, beginning and ending
| | 00:55 | parentheses, beginning and ending bracket.
| | 00:57 | Let's get the cursor inside of the
brackets and let's split that open.
| | 01:01 | We'll add a few lines into here.
| | 01:03 | So inside of here I want to search
through and find all of the anchor tags with
| | 01:08 | the videoLink class.
| | 01:09 | So we'll start it off with dollar sign,
beginning and ending parentheses, two
| | 01:14 | tick marks inside for
a string literal, a.videoLink.
| | 01:21 | Outside of there, we're going to type
each, beginning and ending parentheses.
| | 01:25 | Inside of the each, we're going to
type function, beginning and ending
| | 01:31 | parentheses, beginning and ending
bracket, semicolon at the end, and then we're
| | 01:35 | going to split that bracket open as well.
| | 01:37 | So now, inside of videoLink
each(function), which means each anchor tag that
| | 01:46 | jQuery finds, we want to do
this following set of instructions.
| | 01:51 | First, we're going to set up a variable.
| | 01:57 | The first one is going to
be called thumbnailFilePath.
| | 02:02 | We're going to set that equal to two
tick marks, video/, which is targeting the video folder.
| | 02:11 | After the string literal, let's add a
plus sign, dollar sign, beginning and
| | 02:16 | ending parentheses, jQuery statement
for this, which means the actual anchor tag
| | 02:21 | in each statement that's being found.
| | 02:23 | So we want to find (this).attr for
attribute, beginning and ending parentheses.
| | 02:31 | Inside there, two tick marks for
string literal, videofile and then plus,
| | 02:41 | two tick marks and a semicolon.
Inside the tick marks, .jpg.
| | 02:47 | So we're setting the thumbnailFilePath to
video/, the value of the attribute of video file, plus .jpg.
| | 02:57 | This will give us the actual JPEG
file that's associated to that video.
| | 03:00 | Next line, videoCaption variable is
going to equal, dollar sign, beginning and
| | 03:12 | ending parentheses, (this).attr
for attribute, beginning and ending
| | 03:19 | parentheses, semicolon.
| | 03:22 | Inside of the attributes,
two tick marks, videocaption.
| | 03:28 | Now, there are the two variables set up.
Now let's take each one of the anchor
| | 03:35 | tags and add some code into each one of them.
| | 03:37 | So with a dollar sign, beginning and
ending parentheses, (this).css, beginning
| | 03:46 | and ending parentheses, semicolon.
| | 03:49 | So now what this is basically doing is
setting CSS properties onto this object.
| | 03:55 | First, we're going to do two tick marks,
a comma, and then two tick marks again.
| | 04:01 | Those are going to be two
individual string literals.
| | 04:03 | The first one is the property of CSS
we're going to set, background-image.
| | 04:11 | The second one is going to be
the actual value of that.
| | 04:15 | So url, beginning and ending parentheses.
| | 04:18 | We're still inside the string literal.
Inside of the parentheses of the url statement,
| | 04:23 | we're going to put two more tick marks. To
end the first string literal, start a second.
| | 04:29 | Two plus signs.
| | 04:30 | Let's go grab thumbnailFilePath, hit
Copy, Command+C, or Ctrl+C and then Paste.
| | 04:36 | So now we're going to set the CSS
background to whatever that thumbnail path is.
| | 04:44 | Let's hit Return, dollar sign,
beginning and ending parentheses, (this).html.
| | 04:54 | So now we're going to add HTML inside
of the anchor tag. Beginning and ending
| | 04:58 | parentheses, semicolon.
| | 05:02 | Inside of the parentheses, two tick
marks for a string literal, and let's create
| | 05:07 | some HTML. Beginning html tag, div,
class, equals, two full quotes, caption.
| | 05:23 | Let's end that tag.
| | 05:24 | Outside the string literal,
let's hit a plus sign.
| | 05:27 | We'll hit a second plus sign.
Two more tick marks for string literal.
| | 05:33 | I am going to end the div tag.
| | 05:38 | Let's start a brand new tag. image,
class, equals, two quotes, play.
| | 05:50 | Outside the quotes, but still inside
the string literal, space, source, equals,
| | 05:57 | two quotes. Inside the
quotes, images/play_icon.png.
| | 06:10 | Outside the quotes, forward
slash and then end the tag.
| | 06:14 | Next, let's come up and grab the
videoCaption variable name, copy that to the
| | 06:18 | clipboard, and we're going to paste it
right here where we're concatenating the
| | 06:22 | two string literals.
| | 06:24 | So basically, we're going to
dynamically add a background-image property.
| | 06:28 | We're going to add a div with a class
of caption, with the actual caption text,
| | 06:33 | and then after that, we're going to add
an image with a class of play with the
| | 06:37 | source equaling the images play_icon.png
that we created earlier from Photoshop.
| | 06:41 | So at this point, let's choose File > Save.
| | 06:44 | Let's go back to our index.html file.
| | 06:48 | Let's click on Live View.
| | 06:49 | So then when we view this inside of
Dreamweaver, we're now seeing each of the
| | 06:54 | captions being picked up, cycling_
large, ocean_medium. The Play buttons are
| | 06:58 | being added in here as well.
| | 07:00 | Everything inside is still being
treated like an anchor tag, because everything
| | 07:03 | is inside of an A tag.
| | 07:05 | We see our Pointer tool, because we
set the CSS for cursor equals pointer.
| | 07:11 | Now, in order to be able to tell that
the code is actually being implemented or
| | 07:14 | added into here, what we're going to do
is come out of Live View, choose File >
| | 07:19 | Save All, and now let's come
down and preview this in a browser.
| | 07:22 | So now inside of Safari, if we go to
Safari's Preferences menu and in the far
| | 07:30 | right under the Advanced tab, you want
to make sure you turn on this tool called
| | 07:33 | Show Develop menu in menu bar.
| | 07:35 | What this will do is add this
Develop menu up here at the top.
| | 07:39 | But another nice feature here is we can
actually inspect this particular page
| | 07:43 | and see what's actually happening.
Since if we did a View Source, we would only
| | 07:47 | see the anchor tags,
| | 07:48 | all of the HTML being added by
JavaScript is happening in RAM and is part of
| | 07:52 | the Pages Document Object Model in
the browser, but again we wouldn't see
| | 07:56 | that in the source code.
| | 07:57 | So I'm going to right-click, come
down here, and choose Inspect Element.
| | 08:03 | When I do that, Safari is going to
give me this diagnostic tool here which is
| | 08:08 | going to allow me to see everything
that's happening inside of my document.
| | 08:12 | So notice the anchor tag. I can toggle
this open and I can see that I do have a
| | 08:16 | div and an image tag inside
of each one of these items.
| | 08:21 | So if I grab the very first one,
click on the div tag, I can see that
| | 08:24 | highlighted here, and the
Image tag highlighted here.
| | 08:27 | So again, even though these aren't in
my source code, jQuery is adding all
| | 08:31 | of these items in to each one of these
anchor tags when it sees the class videoLink.
| | 08:35 | Let's come back to Dreamweaver.
| | 08:38 | Let's preview this in Firefox.
| | 08:41 | If you happen to like Firefox more than
Safari, Firefox has a plug-in you can get
| | 08:45 | called Firebug which will put a
little icon down here in the lower right.
| | 08:49 | Firebug will do something very similar.
| | 08:51 | We can right-click, choose Inspect,
and see again exactly the div and anchor
| | 08:57 | tags that are being added by
JavaScript into our document.
| | 09:00 | Now that we're successfully injecting
HTML into our anchor tags, in the next
| | 09:04 | movie we're going to work on some CSS
to style these and position the items
| | 09:08 | inside of the anchor tags to match the layout.
| | Collapse this transcript |
| Styling the HTML inside the thumbnail links| 00:00 | Now we're going to add some CSS
rules to style those thumbnails.
| | 00:04 | Back in the index.html file
over here in the CSS Styles panel,
| | 00:08 | make sure you have the video_gallery.
css selected and not the jquery.fancybox.
| | 00:13 | Let's add a rule into video_gallery.css.
| | 00:16 | Let's come down to compound path
and what we're going to do is choose
| | 00:21 | a.videoLink div.caption.
| | 00:30 | So what this is going to do is only
target divs or the caption class if they're
| | 00:35 | inside of an anchor tag
with the video link class.
| | 00:40 | Let's choose OK. First thing we're
going to do is come down to Positioning.
| | 00:44 | We're going to turn on
absolute positioning for these items.
| | 00:47 | Let's come down to the Box properties. The
width we're going to set to 180 pixels wide.
| | 00:53 | Now for Padding we're going to
uncheck Same for all and for padding top
| | 00:58 | we're going to pick 15.
| | 00:59 | We're going to put 10 on the right,
10 on the bottom, and 10 on the left.
| | 01:05 | Now the reason we're making this 180 is
that the padding on the right and left
| | 01:09 | is going to add to the overall
dimensions of this object's width.
| | 01:12 | So 180 plus 10 on the right and 10 on
the left gives us 200, which matches
| | 01:18 | exactly the width of the anchor tag we
set in the a.videoLink with four anchor tags.
| | 01:25 | Let's come under Type. For Color let's
choose white, for Font-family let's come
| | 01:31 | and choose Arial, for Font-size we're
going to choose 12 pixels, and lastly down
| | 01:37 | on Positioning, we're going
to set the Bottom to 0 pixels.
| | 01:41 | This means that the object will be
absolute positioned, but will always want
| | 01:44 | itself to the bottom of the thumbnail.
| | 01:46 | So as we add more content for captions,
it's going to grow vertically, starting
| | 01:50 | from the bottom to upwards.
| | 01:53 | Let's choose OK at this point.
| | 01:54 | Now let's come up here and
choose video_gallery.css.
| | 01:58 | Let's go into Code View.
| | 02:02 | So in the code for the CSS, we do want
to add one attribute inside of here that
| | 02:06 | we can't do in Dreamweaver's interface,
although it has support for it, and that
| | 02:09 | is the RGBA color space for CSS3.
| | 02:14 | So under div caption after the bottom
setting of zero pixels, let's come in
| | 02:18 | here and start to type
background. Code hinting will come up.
| | 02:24 | background-color, semicolon, space.
| | 02:27 | We're going to choose rgba.
Beginning and ending parentheses, semicolon.
| | 02:34 | So rgba color is a way that
we can specify colors in CSS3.
| | 02:38 | Basically we set four parameters, the
three colors for red, green, and blue, and
| | 02:42 | then the final value for transparency.
| | 02:44 | So we're going to do 0, 0, 0, which is
black, no colors for red, green, or blue,
| | 02:52 | and then a comma and then the last one is
going to be transparency. I'm going to put in .5,
| | 02:57 | which means 50% transparent.
| | 02:59 | So we're basically painting the
background with a semi-transparent color.
| | 03:03 | While we're in the Code
View here, let's scroll up.
| | 03:07 | We also saw that we had rounded
corners on the container in the
| | 03:10 | introduction video.
| | 03:11 | So let's come up here and add some
around the corners and here as well.
| | 03:16 | So inside of video_gallery_
container we're going to add border radius,
| | 03:19 | Dreamweaver's code hinting is going to kick in.
| | 03:22 | It's supporting this in the Code
View, just not in the visual area.
| | 03:26 | So border-radius 12 pixels. Now
right now on the IE is supporting
| | 03:33 | straight-up border radius. Both
Firefox and Safari, their rendering
| | 03:38 | engines, which are WebKit for Safari
and Mozilla for Firefox, need to have
| | 03:43 | their own flag on in front of this.
| | 03:46 | So we're going to type
-moz-border-radius: 12px.
| | 03:59 | I'm going to copy that and paste it
and I'm going to change moz to webkit.
| | 04:03 | Let's switch back to Code
View. Back to Design View.
| | 04:13 | Now to test this so far, let's come up
to Live View. Now that Live View kicks in,
| | 04:20 | I can see that the captions are now
aligning to the bottom. They have a 50%
| | 04:24 | transparent background with white type.
| | 04:25 | Let's come out of Live View.
| | 04:28 | Let's go over to our video_gallery.css.
| | 04:31 | Let's create a new rule. Compound path.
| | 04:35 | We're going to do a.videoLink img.play.
| | 04:44 | So now we're targeting images that
have a play class if they're inside of an
| | 04:48 | anchor tag with the videoLink class.
| | 04:51 | Let's choose OK. In here we're
going to come down to Positioning.
| | 04:55 | Let's set position to absolute.
| | 04:57 | Let set the Top to 25 pixels and
let's set the Left to 75 pixels.
| | 05:06 | Choose OK. Let's come back to Live View. Now
we're centering each one of these items inside
| | 05:12 | of their anchor tag.
| | 05:14 | Now as I've been mentioning, Internet
Explorer 7 and 8 does not support RGBA
| | 05:19 | color space so getting that semi-
transparent background in IE7 and 8 can't
| | 05:23 | be done with this method.
| | 05:25 | So what we're going to do here is
we're actually going to create a class
| | 05:28 | inside of video_gallery.ie to target the div
caption and use the background graphic instead.
| | 05:34 | So let's go into video_gallery.css.
| | 05:39 | Let's scroll down and let's grab the
a.videoLink.caption. I'll just copy this whole rule.
| | 05:47 | Let's jump over to video_
gallery.ie.css. Set a few lines.
| | 05:52 | Let's paste that in.
| | 05:53 | Let's get rid all of the
attributes in there and here we're going to
| | 06:01 | type background-color: none, semicolon.
| | 06:11 | Next we're going to type background-
image. Hit a space. I'm going to come down
| | 06:12 | here and hit Browse.
| | 06:22 | Images directory, we're going to grab
the ie_caption_transparency, click Choose,
| | 06:26 | then a semicolon. Hit File > Save.
| | 06:31 | Let's come over to video_gallery.
| | 06:32 | Let's save that and then back to html.
| | 06:34 | Now that we have all of the CSS and
design work in place, we have our thumbnails
| | 06:40 | automatically creating background
graphics, creating the captions, putting in
| | 06:44 | all of the imagery, and we have
the CSS that's styling everything.
| | 06:47 | What we have left to do now is to create
the player code, have a place for it on
| | 06:52 | the page, and then invoke the
FancyBox for the individual videos.
| | 06:55 | So let's start by creating an area
for the player code in the next movie.
| | Collapse this transcript |
|
|
5. Setting Up the Video Player CodeCreating a div container to hold the video player code| 00:00 | Now FancyBox gives us a couple of ways that
we can look load content into the lightbox.
| | 00:04 | The method we're going to choose is
the inline method, where we can take code
| | 00:08 | that inside of the HTML page
and use that to load it in.
| | 00:12 | So we need to create a container in
order to hold our code and then we're going
| | 00:15 | to use that container to target with
jQuery and dynamically write the HTML that
| | 00:19 | we're going to need.
| | 00:22 | So to start let's switch over to
Code View inside of the index.html file.
| | 00:25 | Up to the div tag that's got the
video gallery container class on it,
| | 00:31 | let's start a new tag.
div styles equals two quotes.
| | 00:37 | Let's end the div tag.
| | 00:41 | Inside of the style we're going to
type display: none, so this will be
| | 00:49 | hidden from the viewers.
| | 00:51 | Inside of this div we're going to add
another div. ID equals two quotes, end that
| | 00:59 | tag, and the div tag.
| | 01:02 | The ID is going to be videoPlayer.
| | 01:06 | This is going to hold all of the HTML5
and Flash fallback HTML code that we'll
| | 01:11 | need to build activate our videos
in the multiple devices and browsers.
| | 01:15 | So in our next movie we're going to go
into JavaScript file and create the code
| | 01:19 | base that's going to populate this area.
| | Collapse this transcript |
| Setting up click event for thumbnails| 00:00 | Now in order to generate the HTML that
we're going to need to be placed inside
| | 00:03 | of the videoPlayer container here,
let's switchover to our video_gallery.js.
| | 00:10 | Over here I'm going to clean up
our script a little bit. Remove
| | 00:13 | some of the extra whitespace.
| | 00:15 | Now after the videoLink each function
we're going to create a brand new script.
| | 00:21 | Dollar sign, beginning and ending
parentheses, two tick marks for string literal.
| | 00:27 | .videoLink. Outside of the parentheses,
I'm going to type click, beginning and ending
| | 00:38 | parentheses, semicolon.
| | 00:40 | Inside of the parentheses,
function, parentheses annd brackets.
| | 00:46 | Let's split the brackets.
| | 00:50 | So now each time somebody clicks on an
anchor tag with a videoLink class, we're
| | 00:54 | going to run a series of instructions.
| | 00:57 | So first off we want to setup a
series of variables, so var videoFile.
| | 01:05 | That's going to equal dollar sign parentheses
this, .attribute. String literal inside
| | 01:17 | of the attribute, videofile.
| | 01:23 | Next variable, videoPoster. That's going
to equal dollar sign parentheses, this,
| | 01:34 | end parenthesis, .attribute,
beginning and ending parentheses semicolon.
| | 01:43 | Two tick marks for a string
literal inside of attribute.
| | 01:45 | We're going to put videofile in there as well.
| | 01:49 | Next line, variable videoWidth.
This is going to be equal to, we want to
| | 02:01 | make sure that this is specified as a
number, so we're going to type number,
| | 02:06 | beginning and ending parentheses,
semicolon. Inside of the parentheses,
| | 02:11 | dollar sign, beginning and ending
parentheses, this .attr, beginning and
| | 02:21 | ending parentheses, two tick
marks for string literal inside of the
| | 02:26 | attribute, videowidth.
| | 02:30 | One more, another variable. videoHeight.
This is also going to equal a number.
| | 02:41 | Beginning and ending parentheses,
semicolon, inside dollar sign, beginning and
| | 02:46 | ending parentheses, this, inside of
the parentheses .attr, beginning and
| | 02:53 | ending parentheses, string
literal, inside videoheight.
| | 03:01 | Now with our four variables setup, in
the next movie we're going to seup our
| | 03:04 | HTML code as a large variable and
then replace each of these variables into
| | 03:08 | that HTML block.
| | Collapse this transcript |
| Updating HTML5 video code and playing video in the lightbox| 00:00 | Now the next variable is going to be the
variable that's going to hold all of the HTML code.
| | 00:07 | So we are going to type var videoCode
equals two tick marks and a semicolon.
| | 00:17 | Now let's go back to the exercise files.
| | 00:20 | Let's open up the code_snippets.html.
| | 00:23 | What we are going to do in here is we are
going to be using this HTML5 player code.
| | 00:29 | So it starts off with the video tag.
The video tag has a width and height
| | 00:33 | specified, controls, autoplay. Autoplay
is not going to work in every browser.
| | 00:38 | For example, it doesn't work on mobile
devices and it doesn't work in Chrome,
| | 00:42 | but we can put it in here, because
it will be supported in some browsers.
| | 00:46 | And inside the video tag we
typically specify multiple sources.
| | 00:50 | The first source we are going to
pick is the video ogg or Ogg Theora format.
| | 00:55 | This is what's going to be used by Firefox.
| | 00:57 | After that we are going to pick MPEG4.
This is going to be used by all of the
| | 01:00 | other devices that we looked
at in the introduction video.
| | 01:04 | And then if neither of these work or
the browser doesn't support the video tag,
| | 01:08 | it's going to see this object and
embed tag, which is all of the code that
| | 01:11 | we need to run Flash.
| | 01:13 | So the same video file, the MPEG4, is
going to be loaded into an FLV player
| | 01:17 | embedded inside of a Flash video skin.
| | 01:19 | Now the way Flash takes in additional
variables is with a query string variable here.
| | 01:25 | So we have player.swf?.
| | 01:28 | And then we say videoFile equals
and we pick the actual file names.
| | 01:32 | All of the variables that we need to set,
I have put a letter x in here, so the
| | 01:36 | height, width, actual video file, the
skin, the individual players, everything
| | 01:41 | is specified in here with an x.
| | 01:42 | If we scroll down a little bit
further, what I have done here is I
| | 01:46 | condensed all of the whitespace out of
the code and I have actually gone and
| | 01:50 | replaced the axis with the
actual variables that we just created.
| | 01:54 | So we are going to select this entire block
of code here and copy this to the clipboard.
| | 02:00 | Let's switch back to video_gallery.js
and inside of the two tick marks for
| | 02:05 | the string literal, we are simply going to
hit Paste and paste all of this code in here.
| | 02:10 | So now all of this HTML code becomes
part of this one variable and each one of
| | 02:14 | these variable pieces that we've
defined up here is going to get replaced out.
| | 02:19 | So every time we click an anchor link
with a videoLink class, all of these
| | 02:23 | variables are going to get picked up
from the individual anchor we clicked.
| | 02:27 | This video code here is going to be
modified with all of those different values,
| | 02:32 | and after that's done what we are going
to do is specify that all of this code
| | 02:36 | get written to a
specific point in our HTML file.
| | 02:40 | So on another line let's type dollar
sign, beginning and ending parentheses.
| | 02:45 | Inside of here two tick marks for string
literal. Pound sign, which specifies an ID.
| | 02:50 | I am going to say videoPlayer.
| | 02:54 | That's the name of the div we added
to the HTML file, .html, beginning and
| | 03:01 | ending parentheses, semicolon, and let's
come up here and grab the videoCode name
| | 03:06 | and copy that to the clipboard.
| | 03:08 | Let's come down to the parentheses
inside of the html and hit Paste.
| | 03:14 | So now every time we click on that link,
after all of the variables are defined
| | 03:18 | and the videoCode has been modified, we
are going to take all of that code and
| | 03:22 | put it into the videoPlayer area.
| | 03:26 | Once that's done we need to invoke FancyBox.
| | 03:28 | Now typically FancyBox works by
attaching the fancybox class onto an object like
| | 03:35 | an anchor tag, but in this case
we are going to call it manually.
| | 03:38 | So we are going to use
$.fancybox, because we want to have all of
| | 03:46 | these things happen first.
| | 03:47 | We don't want it to happen on click.
| | 03:49 | So $.fancybox, beginning and
ending parentheses. Inside of here we are
| | 03:55 | going to do beginning and ending bracket.
| | 03:57 | Then we are going to split the bracket
open, put a semicolon after the parentheses.
| | 04:04 | Inside of fancybox let's add some
values. Two tick marks for string literal,
| | 04:12 | transitionIn :, space, two tick marks, fade.
| | 04:20 | That's going to be the
first parameter. Comma, next line.
| | 04:24 | Two tick marks, transitionOut :, space,
two tick marks, another string literal, fade, comma.
| | 04:42 | Two tick marks, string literal,
overlayColor, overlay, all lowercase, Color :, space,
| | 04:55 | two tick marks, #000.
| | 04:58 | This is going to be black. Comma, next line.
| | 05:03 | Two tick marks string literal,
overlayOpacity :, space, two tick marks, string literal,
| | 05:15 | .6 for 60%, comma. Then lastly, two tick marks,
href :, space, two tick marks, and in here we are going
| | 05:26 | to put #videoPlayer.
| | 05:31 | No comma on the last item, and
then we have the ending tag here.
| | 05:36 | So again, instead of having FancyBox
attached on the click event we are going to
| | 05:40 | let the click event run all of these
values, update the player code, and then we
| | 05:44 | are going to manually call FancyBox
and target the videoPlayer container that
| | 05:49 | holds all of the code.
| | 05:51 | So at this point let's go File > Save All.
| | 05:54 | Now let's switch back to
index.html. Let's choose File.
| | 06:00 | Let's preview this in our
browser. Let's hit Reload.
| | 06:05 | Now when I click on the link, we
should see the FancyBox pop-up and the
| | 06:09 | video start to play.
| | 06:10 | (Bicyclist: Yeah.)
(Car revving)
| | 06:16 | These controls down here
are the default for Safari.
| | 06:19 | As we look at different browsers,
| | 06:20 | we will see different sort of player controls.
| | 06:22 | This is up to each browser on how
they want to support HTML5 video
| | 06:25 | and what internal video
playback mechanism they have built- in.
| | 06:29 | Also notice the size of this.
| | 06:31 | I am going to click on another video.
| | 06:32 | which has a smaller size.
| | 06:34 | (Waves crashing)
| | 06:36 | (Music playing)
| | 06:39 | So each one of these videos has a
different size specified in the anchor links.
| | 06:42 | (Male speaker: To separate the oil
from the rest of the olives. Then this?)
| | 06:48 | (Music playing)
| | 06:51 | I am going to hop back over to Dreamweaver.
| | 06:53 | Let's choose File > Preview in
Browser just to make sure this is working in
| | 06:57 | Firefox with the OGV format.
| | 06:59 | Let's hit Reload, click on our links.
| | 07:04 | (Waves crashing)
| | 07:04 | (Music playing)
| | 07:09 | So those are working as well.
| | 07:10 | So now in the next movie we are going
to take a look at some code that we can
| | 07:13 | put into our JavaScript to change the
user experience on mobile devices and how
| | 07:18 | we can activate these HTML
videos to work in Android as well.
| | Collapse this transcript |
|
|
6. Choosing Experience Options for iOS and AndroidActivating video for Android and bypassing the lightbox| 00:00 | Now this user experience that we've
programmed for computer desktop browsers
| | 00:04 | will also have a very similar
user experience on the iPad.
| | 00:07 | Unfortunately, the emulators that we
run on our computers don't have access to
| | 00:10 | the actual hardware on the
devices they can decode video for HTML5.
| | 00:14 | So instead we made a quick recording of
what the user experience looks like on
| | 00:17 | an iPad. You will notice that the iPad
screen comes up, I can tap on a video.
| | 00:22 | We see the video come up in an
overlay, but it doesn't auto-start.
| | 00:25 | Auto-start doesn't work on most
mobile devices to save on bandwidth.
| | 00:29 | So I do tap on the video inside of the overlay
and then that will start the video to play.
| | 00:33 | Now on the iPad the video does play
inline, so placed right inside of FancyBox.
| | 00:38 | That means I can go in and hit the full-
screen mode and then use the built-in
| | 00:42 | QuickTime Player to go to full-
screen view, and then when I come out of
| | 00:45 | full-screen view it goes back into
playing inside of the FancyBox overlay.
| | 00:49 | And then tapping outside that area
will bring me back to the original page.
| | 00:53 | The iPhone is going to have a very
sort of similar approach, where we can see
| | 00:57 | the FancyBox come up, and when we tap
on the video, instead of playing inline
| | 01:00 | it will actually go to the other player.
| | 01:02 | Now Android can do the same thing but
Android requires we manipulate our code a
| | 01:06 | little bit in order to get that to work.
| | 01:08 | So when we go back to our
exercise files, we want to go back to the
| | 01:11 | code_snippets file, and if we scroll
down, the piece of code we want to try for
| | 01:16 | Option 1, which is to get the Android
environment to play much like the iPhone
| | 01:20 | environment, is we are going to
use the code here under Option 1.
| | 01:23 | What we are going to do here is create
a variable called checkBrowser and then
| | 01:28 | we can run a standard JavaScript
function to take the userAgent and then set
| | 01:32 | the entire string to lowercase, just in
case if there's any capital letters in
| | 01:35 | the device navigator's name.
| | 01:37 | Then we're going to set another
variable that says, is this Android?
| | 01:41 | And then we're going to index, the
userAgent, and look for the word android in there.
| | 01:46 | Then if it is greater than negative one,
which means it's true, it did find the
| | 01:50 | word Android, we are going to run an if
statement and say if Android is true we
| | 01:55 | are going to do two things.
| | 01:57 | First, we are going to take the codec
flag off of the source inside of the
| | 02:02 | HTML5, so when it says source MPEG 4,
| | 02:05 | we are going to take the type out of there.
So we are going to remove this attribute.
| | 02:10 | Next we are going to add an onclick, this.play.
| | 02:13 | This is a JavaScript code that needs to
be added on the video tag for Android.
| | 02:17 | Now these two things are not part of
the spec so far for HTML5. They don't hurt
| | 02:22 | anything, but I would rather remove
these only if it's Android and keep the code
| | 02:28 | in its pristine format for
the rest of the browsers.
| | 02:31 | So let's come in here and
let's select all of this code.
| | 02:35 | We are going to hit Copy.
| | 02:37 | Let's go back to video_gallery.js,
and after fancybox we can hit a few
| | 02:41 | lines and hit Paste.
| | 02:43 | I'll just format this in a little bit.
| | 02:47 | So now basically what's going to
happen is everything is going to happen as
| | 02:51 | expected before, and if we look in
the code up here at the top, we can see
| | 02:55 | here's the type="video/mp4".
| | 02:57 | We're going to actually remove this,
if this Android, and on the video tag
| | 03:03 | itself inside of here we
are going to add the onclick.
| | 03:07 | And now with this in place, I'll bring
up a video that's showing the iPhone and
| | 03:10 | the Android operating system, running
this particular project and showing the
| | 03:13 | common user experience.
| | 03:16 | So notice I can click on each of the
videos, the lightbox comes up.
| | 03:19 | Neither operating system will actually play
the video as an auto-play, but I can tap on
| | 03:23 | the video in the overlay and they
will each jump over to their respective
| | 03:26 | players, and play the video.
| | 03:27 | Now in the Android device I hit the
Return button to go back to the original screen;
| | 03:31 | on the iPhone I click the Done
button in the upper left-hand corner.
| | 03:35 | Both of them bring us back to the
original screen. I can tap anywhere outside of
| | 03:39 | the overlay and go back to the original screen.
| | 03:42 | Now back in Dreamweaver the second
option we are going to look at is instead of
| | 03:45 | having the overlay come up, if we're
on an Android device or an iPod or an
| | 03:49 | iPhone, we can instead change the link
to point right at the videos,so that
| | 03:55 | they play in their respective players
and we don't have that extra step of
| | 03:58 | looking at the overlay.
| | 03:59 | So to do that, let's go back
to the video_gallery.js file.
| | 04:04 | Let's come in here and delete
the Option 1 code we put in.
| | 04:08 | We are also going to take out the fancybox code.
| | 04:12 | Let's go back to our code_
snippets and let's go down to Option 2.
| | 04:16 | Inside of Option 2, we do something
very similar where we have a checkBrowser
| | 04:19 | variable and we check the UserAgent, set it to
lowercase, and then we are going to run three checks.
| | 04:25 | We are going to check for Android, we
are going to check for iPhone, and we are
| | 04:28 | going to check for iPod.
| | 04:29 | Now the iPad has a very similar play
experience as the browser so we are not
| | 04:33 | going to detect for that one.
| | 04:35 | Then in this line we are going to
check isAndroid with that two pipes here,
| | 04:40 | which is the Or condition, or is
this the iPhone, or is this the iPod.
| | 04:45 | If it is, we are going to change the
window location. This is JavaScript's way
| | 04:48 | of doing it refresh on the URL.
| | 04:51 | So even though the fancybox might
start, what's going to happen here when
| | 04:55 | the script runs is it's going to change
the URL of the browser to point to the video.
| | 05:00 | If any of these is not the case, so we
are on a computer or an iPad, then we are
| | 05:05 | actually going to run
FancyBox like we did before.
| | 05:07 | So we are going to copy from the
variable checkBrowser all the way through
| | 05:12 | the else statement.
| | 05:13 | We are going to copy that to the
clipboard, go to video_gallery, and right after
| | 05:17 | the player code, we are going to
paste all of this content in here instead.
| | 05:21 | I will format this in a little bit.
| | 05:27 | Now what this is going to do, I'll
bring up a video here showing what this
| | 05:30 | user experience will look like. The
webpage is going to load like before.
| | 05:34 | Now when I tap on the videos, they are going to
jump right to their respective video players.
| | 05:39 | So notice Android will jump right over
to the video player and it will even
| | 05:41 | rotate the video so it takes up
the most amount of screen real estate.
| | 05:45 | The iPhone will play the video in
its orientation mode, so here we are
| | 05:49 | looking at portrait mode.
| | 05:50 | Now the only real difference here is
when I hit the Back button on Android, we
| | 05:54 | go back to the web page.
| | 05:56 | When we hit the Back button on the
iPhone, we go back to a blank web page.
| | 06:00 | So what happens on the iPhone when we
tap the video and change the location with
| | 06:03 | JavaScript, it actually opens a new
window within the Mobile Safari browser.
| | 06:09 | So these are two really different sort
of user experiences. One solution might
| | 06:13 | be to only redirect the window
location if it's an Android device, since
| | 06:17 | Android's Back button will go right back
to the web page, and let the iPhone work
| | 06:21 | the way Option 1 works, which doesn't
require any additional coding from the way
| | 06:25 | the iPad and computer screens work.
| | 06:27 | Now that we've got our user
experience pretty consistent across all of the
| | 06:31 | HTML5 supporting browsers and devices,
in the next movie we were going to move
| | 06:34 | our Flash assets over for IE 7 and 8
and make a few minor tweaks for our CSS to
| | 06:39 | finish out the project.
| | Collapse this transcript |
|
|
7. Taking Care of the Final DetailsCSS tweaks and the Flash video player| 00:00 | Now, two last things we
want to do in our CSS file.
| | 00:02 | First, let's go back to a.videoLink in the
CSS panels with the index.html file open.
| | 00:09 | Let's come back to our Background
setting and let's come in here and take off
| | 00:11 | that background color.
| | 00:13 | We had put gray in there so that we
could actually see the dimensions of our
| | 00:16 | in-line anchor links being
changed to block display types.
| | 00:20 | So we'll just take that off.
| | 00:22 | Let's create one more rule.
| | 00:23 | Let's come down to Tags.
| | 00:27 | Let's choose the body tag.
| | 00:30 | Let's come in here to Background.
| | 00:31 | Let's just make the background black.
| | 00:35 | Under the box model, for Padding, let's
just put about 20 pixels of padding so
| | 00:39 | that the video probably
doesn't touch the outermost edges.
| | 00:42 | Now again, your video player can work
self-contained so you can put this into
| | 00:46 | any particular project or website design
you currently have as well. Let's click OK.
| | 00:52 | Lastly, let's come back out to our files.
| | 00:54 | So in the myVideoGallery folder are all of
the files we've been working on in this course.
| | 00:59 | In the Exercise Files, inside the Final
Project there are two additional files
| | 01:04 | we're going to need.
| | 01:05 | These are two Flash files that we
need to bring into our main root as well
| | 01:10 | and what these will do is if the
browser does not support HTML5 video, such as
| | 01:14 | IE 7 and 8, then what's going to
happen is our script is going to load in
| | 01:18 | this lynda.com video_player, this
first file here, and inside of there is an
| | 01:23 | FLVPlayback component that's going to
load the video_skin file, which gives
| | 01:27 | us all the controls.
| | 01:28 | So we are going to select both of these files.
| | 01:31 | I am going to hit Copy or Option+Drag,
paste them into our original file.
| | 01:36 | With all of these files in place, now
we have the full user experience of what
| | 01:40 | we looked at in the introduction video
available inside of the myVideoGallery as well.
| | 01:44 | Now with all of these files in place,
in the next movie we'll talk a little bit
| | 01:47 | about where you might want to go from
here, including resources on lynda.com for
| | 01:51 | more information on HTML5 video and Flash video.
| | Collapse this transcript |
|
|
ConclusionWhere to go from here| 00:00 | Now, if you are interested in more
information on video on the web, there are
| | 00:03 | two really great authors up on lynda.com.
| | 00:05 | One is Steve Heffernan who has an HTML5:
| | 00:07 | Video and Audio in Depth, and the other
is Lisa Larson-Kelley, who has a course
| | 00:12 | on publishing video with the Flash platform.
| | 00:14 | So, both of these resources will give
you much more in-depth information about
| | 00:18 | publishing both an HTML5 video and Flash video.
| | 00:21 | Now, in the course we just completed, if
you're going to be working with a series
| | 00:25 | of videos that are all exactly the
same size, you might want to go back,and
| | 00:28 | look at either the creating an
interactive infographic or the learn to create
| | 00:32 | your own photo gallery,
the first two courses I have on lynda.com.
| | 00:36 | In both of these cases, we have user
experiences where clicking on a particular
| | 00:39 | link actually changes the
HTML content within the page.
| | 00:43 | So instead of changing the photography
inside of the page or in the information
| | 00:48 | graphic instead of clicking and
changing the city information, you can actually
| | 00:51 | send that HTML5 code over
to these other areas as well.
| | 00:55 | So you can invoke new videos
within the same user experience.
| | 00:59 | So I hope you found this course
really inspiring and helpful and I really
| | 01:02 | appreciate you watching.
| | Collapse this transcript |
|
|
