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]
