Click on any phrase to play the video from that point.
[ADOBE TV-tv.adobe.com]
Hi, I'm Greg Rewis, Principal Evangelist at Adobe,
and I'd like to talk to you about Creative Suite Web Premium 5.5,
specifically Dreamweaver CS5.5's support for native video.
Now you've probably heard a lot about
native video out there in the internet--it's all abuzz--with HTML5 video.
And Dreamweaver has that support built right in.
In fact, our designer called out a spot
for some native video on our layout.
Right now I've just simply got a page here
that, again, we're looking at in live view,
so we're seeing exactly the way that this page is going to render in the browser,
and this particular element is nothing more than an image.
Let's take a peek behind the scenes in our split view so that you can see,
yes, this is in fact just an image.
We want to get rid of that and replace it with some native video.
Now, when I say native I mean video that is
played back in the browser without the need for a plug-in.
So let's go ahead and take this and just delete it, actually, from our code
so that you can also see--I'll just back up a little bit.
I'm going to tap my return key, and you'll see that
Dreamweaver, again, is popping up my code hinting
as I begin to type my HTML tags.
And as I've mentioned in other videos,
Dreamweaver supports all those other great new elements of
HTML5 and of course one of them is video.
So let's go ahead and begin to type, and there we have our video element.
Now, when we use native video we need to make a decision
as to exactly which browsers we are going to support,
because with the video element, we actually have to encode multiple times
to cover all of the individual devices out there.
Now, when I tap my space bar, Dreamweaver is
providing code hinting for the video element,
and one of those, of course, attributes would be my src attribute.
We only use this attribute
if we are specifically going to support
a single browser or a single platform.
For example, if I knew that I was going out
only to idevices with this particular page, then I could
go ahead and fill out the src property.
But instead, what I'm going to do is I'm going to go ahead
and just end off my tag and ask Dreamweaver to
close that tag for me, and I'm going to add in a second element.
That is actually the source element.
Now this allows me to specify multiple encodings.
So I'm going to use the source element and then, again, an src.
Now the src, again, being the video that I'm going to link to.
I'm going to have Dreamweaver just browse me over here on to
my hard drive here, where I can find my video
folder and we'll look at
I've got three different encodings.
One is an MP4. This is an H264 file.
We'll go ahead and choose that as the first source.
Next I'll hit a space and add a second attribute which is the type attribute.
Now this is the to tell the browser
exactly what it is that it's looking at.
In this particular case, the video that is included in H264.
Now this is not a mandatory attribute,
but it is nice to give the browser a little heads-up
that, hey, this is actually what we're dealing with here.
I'll go ahead and close that source tag off,
and, again, I would add in another one--
another source tag, another src,
and so on because I again have to provide other encodings.
We'll provide an Ogg
which will be supported by our Firefox browsers.
And again, we'll do that same type
and video/ogg, which is our Ogg.
And then finally, we've heard a lot of talk in the
video community about another type of video,
and that would be our WebM.
We've already used our MP4.
Our WebM format that is supported by the latest versions
of Chrome and Firefox and Opera as well.
So we'll go ahead and just type that one,
and that is WebM.
Now with all of that done, we actually
are providing video to all of these modern browesers
that support native video and our devices,
such as our iPads or mobile devices.
And again, we can see this all happening right here inside of Dreamweaver.
I'm going to click back over into Dreamweaver.
Let's scroll down a little bit.
Of course, we're not seeing it. Oh, wait a second, a fish.
What is this? This isn't actually what I wanted.
Hmm, I do see some controls here.
Let's go ahead and play this.
Oh, my video is actually playing, but where did that fish come from?
Well, another one of those great things that we have to offer
with HTML5 is something called a poster frame.
I'm going to go ahead and set in a poster frame.
So we'll go back into our video element, and we'll type
'poster', and then we'll just browse over
to an image that we want to use.
So we'll just go into my image folder,
and I've actually got a video poster frame.
So we'll just scroll down and find that video poster, .JPEG.
There we go.
And that's actually what I prefer people to see
before they actually click to play the video.
Let's go ahead and reload and see our page there.
And there we go--much, much nicer.
Now, as I said, this is only going to be playing
for browsers that support native HTML5 video.
If we want to support, like Internet Explorer--
who wants to do that?
Well, sure, we probably all do.
And prior to Internet Explorer 9, I'm going to have to do something else
in order to provide a fallback for those browsers,
and Dreamweaver can help me out here as well,
because with Dreamweaver CS5.5 we have a new
insert element up here in my insert panel called Widget.
Now, by clicking the widget, what I"m going to do
is actually launch my widget browser.
Now the widget browser is a separate application
that connects up to the Adobe exchange
and allows me to download widgets or things that
other people have built in order to do things that
I don't simply want to do by hand.
And one of those things is a video player.
It's called the Kaltura Video Player.
In fact, the Dreamweaver team actually created
a version of the Kaltura Video Player
that provides fallback from HTML5 video
down to Flash when it is necessary.
So if I'm viewing on a device that does not support
HTML5 video or any browser, such as Internet Explorer that doesn't,
I can use that video player.
Now it's as simple as simply clicking
into my widget browser here.
And I can either run with the defaults that the
developer has given me, or I can create my own presets
by simply going into my configure options.
I can change the themes that I'm working with,
and that's going to show me differing loading screens, playing screens, and so on.
And all of this, once I'm done,
we're generating the code behind the scenes that I can either
copy, or if I would prefer, I can save that preset
so that I can use that over and over again
and simply insert it right back into my page.
And in fact, that's what I've already done back over here in Dreamweaver.
I'm actually using the Kaltura player
to fall back so that everyone is
going to be able to see my native video--
sometimes native, sometimes using Flash.
So I hope that makes you excited about HTML5 video,
native video, being able to deliver it, but even better,
being able to integrate it into your pages
using Dreamweaver CS5.5.
[ADOBE TV-tv.adobe.com]
