The new Video Tag
In this video we will jump right into HTML5's new video tag. By the end of this video you will know everything you need to know to add a new HTML5 video and get it to work on all modern browsers.
Video Transcript
00:00Alrighty, enough with the boring starter stuff for HTML5, it's time to start getting
00:05our hands wet and dirty and having fun.
00:07And one of the most great stuff about HTML5 is that really nothing is really hard, it's
00:12just fun.
00:13There's a few stuff that we have to be aware of, and the topic that we're going to cover
00:17right now is video.
00:18So we started off our file, very, very simple, and let's see how the tag works.
00:23The tag is incredibly simple.
00:25After we play around a bit with the tag, we'll move on to the JavaScript and we'll
00:29start having a lot of fun.
00:30Alright, so first off, we started off with the video tag itself.
00:34Now the video tag itself is a tag that you must open and close, which makes sense.
00:40And the video tag itself has a few properties.
00:42The first property is source.
00:44Now if I look just for a second into my folders, you'll see that I added into our files.
00:50Now we're at sample 5, I've added a video called whip.mov.
00:54So let's use it.
00:55We're inside of the video.html.
00:58All I really have to do is put into the source the path to that video, which would be videos.whip.mov.
01:05Now this video is already formatted and coded to be H264.
01:10That is the same format that we use also for videos, for flash videos, so we're in
01:15great shape.
01:16Now, unfortunately HTML5 is not as simple as that, even though we've just created the
01:20video and theoretically we should just have a video that's running and working and has
01:24no issues, right?
01:25Unfortunately, and I want to show this to you in Wikipedia.
01:30So I already have Wikipedia set up here in advance to see the different variations.
01:34Now there are three different codecs that are right now fighting among themselves who
01:39will be that HTML5 standard.
01:41Now none of them are actually the open source standard.
01:44Right now every browser is doing whatever it feels like, more or less.
01:48So you could see, but the good thing is that there are only three variations, hopefully
01:52soon that war will be over.
01:54Now we're at March 2012.
01:57So hopefully soon at some point there'll be a decision, the W3C will come up with their
02:01recommendation.
02:02They're basically just trying to find a codec that will work great, but also be free.
02:07And one of the problems with H264 is that it's not actually free, there's royalties
02:11and it's actually a property that belongs partially to Apple.
02:17And that's basically where we are right now.
02:19So the H264, although it will work on IE9+, and although it is planned to be removed
02:24from Chrome, but it works on Chrome now and it works on Android, but you never know
02:28if it's going to be removed again.
02:29It works on Safari obviously, because Safari is that Apple product, but it doesn't work
02:35everywhere else.
02:36So although right now we're running on a Safari browser, if we actually go to our
02:40video and refresh it just right after that, we make sure that we saved our file, which
02:44we did.
02:45And if I refresh my file, you'll see nothing is actually happening.
02:49But actually if I look into my source, we'll see here that I have here a video element.
02:53It's just not actually working.
02:55Now, if I go into my Safari, which is the Apple product and the Apple product that supports
03:00H264, and I'll refresh my screen suddenly, we'll see that we have a video and our video
03:05is frozen on the first frame.
03:07We don't have any controls, so we're having a little bit of issues, but we're actually
03:11starting to make progress.
03:12We could see our video.
03:13So for now we're going to focus only on Safari for a minute.
03:16Let's just get a few of the basics out there.
03:18And after we cover the basics, we're going to go back to seeing how could we solve
03:21that issue of having our videos actually work on all the various different browsers.
03:26All right, so back into our source code.
03:29So far, so easy.
03:30We created a source file.
03:31Now, I want to run through and really jet through a couple of other elements that basically
03:36work this way.
03:37Most of the elements are basically Boolean elements.
03:39If we add them in, they'll do something.
03:41If we don't add them in, they won't.
03:43Such as example, AutoPlay.
03:45What AutoPlay will do is automatically play our video.
03:48So if I save this and jump over again into my Safari browser and refresh my screen, we'll
03:54see that my video is now working.
03:56It's without sound just to keep our life easy, but we saw that little flicker that showed
04:00us that our video was working, right?
04:03So even though it doesn't look very much like it's playing, it actually is because in that
04:06video I am talking and it's muted out so we can't even see it, but actually it is
04:11AutoPlaying right now.
04:13All right, so let's move back into our source code.
04:16Now we saw how AutoPlay works.
04:18The next thing that I want to show you is actually the loop.
04:21Very simple as well.
04:22We're not going to delve too deep into it.
04:23There's no point in showcasing it for too long.
04:26And the next one after that is controls.
04:31Now controls as it named applies will basically enable the actual browser to put in its own
04:36built-in controller.
04:38So if we go back into our Safari, after we save that file, refresh it again.
04:43Now we'll see that our element has a controller and we could actually see that it's playing.
04:47We could see our little glasses moving even though it's not that obvious and we could
04:50jump along and we could pause.
04:52We could go back in time and that is our Apple player.
04:57We could also go full screen.
04:58All right, so back into our code, we've seen a few really quickly.
05:03Now obviously the loop one and let's see how, let's see if that actually really works
05:07for us, but hopefully it does, right?
05:09So if I put it all the way to the end and I let it play, you'll see that it goes
05:13right back to the beginning again.
05:14And that's exactly what we would want it to do if we set the loop to be in it.
05:19If we didn't want it to loop, we just wouldn't put the loop inside.
05:22Now the next simple elements that we actually wanted to look at really quickly is the width
05:27and height.
05:28So width is not a boolean.
05:29We actually will set the actual width and in our case, our video width is 576.
05:35We didn't really have to set this up, but we wanted to.
05:37We could have set it in a different size or if it's for styling reasons, we could
05:41have set it up.
05:42Obviously not a mandatory parameter.
05:46So this is the parameters of our video.
05:48No need to test it again because that's actually the same video that we have.
05:51Now the last item, well last two items I want to talk about before we start solving our
05:55issues with Firefox is I want to have an option to basically not autoplay.
06:02I don't want to autoplay, right?
06:05And I don't want it to loop, okay?
06:06But what I do want it, I want it to have a picture there that's not actually the
06:10video before the video starts playing.
06:13Now to do that, all I have to do is put in another JPEG or image of some sort that your
06:18browser supports.
06:19A JPEG obviously is widely supported so we could use a JPEG.
06:22So I have created a JPEG which is basically called poster.jpg.
06:26It's in the video folder as well.
06:28And very easily all I have to do is set my poster to be that video, that image.
06:35Now one thing to note, oopsie, one thing to note is that if I put autoplay there's no
06:41point in a poster, right?
06:42Because the poster will never be seen, that's why I had to remove it.
06:45So I'm going to take my controller slash poster.jpg to make sure that everything here
06:51is spelled correctly, save it out.
06:53And now even though, well let's first do this on Safari, if I refresh on Safari we'll
06:59see that we have now a nice intro so maybe we want to put here some copy or we want
07:04to put a frame that's deeper in the video.
07:06Another advantage of this is this enables us not to preload the video.
07:09So maybe we have a few videos on the site, we don't want users to preload those videos,
07:14we just want them to see an image to captivate them and hopefully get them to press onto
07:17our video and then to press and watch the video and then flip inside.
07:22Alright, so now that we're in this premise of enabling us to maybe not preload, maybe
07:27we have a lot of videos on the page and we don't want to burden the user's system.
07:33So the way we could add another, basically we could mandate the video player in our HTML
07:39code and we could basically tell it to not preload or to preload.
07:43So our preload will be called preloaded and it's not a boolean and we could send it one
07:48of three parameters or none, which basically means don't preload anything only when the
07:54user actually clicks on the video then they'll start, we'll start loading it.
07:57We could ask or for the metadata as one word or we could set it as auto.
08:02Now obviously if we set it to be auto play, we'll automatically override the preload because
08:06it has no relevance because if we're going to auto play we have to preload.
08:10So in the case of we don't have an auto play and we want to say hey, don't load this
08:14at all until I actually ask of you.
08:17Setting it to be preload equal none, we'll make sure that our video won't load in the
08:20background no matter what browser, our video won't preload in the background.
08:26Alright, so that really, that's everything, absolutely everything we need to know about
08:31the video node.
08:33Now there's one more element that we didn't talk about that we're going to talk about
08:37when we start talking about JavaScript, which is called media group.
08:41Now there's nothing to showcase it without JavaScript so we're going to look at what
08:45media group is at a later video.
08:47So before we wrap up this video about how to get the video in and how to start working
08:51with the video, we have one last problem left.
08:55Now our last problem left, as we said, we have here our video on our Firefox.
09:01But actually if we start to play our video, there's no video.
09:05It's not going to work.
09:06Why is it not working?
09:07Because Firefox does not support H.264.
09:11And Firefox, what does Firefox support?
09:13Firefox supports OAG and it supports also VP8.
09:18Alright, so it supports WebM and it supports OAG3OR if I'm saying that correctly.
09:25Now obviously this is not fun.
09:27If you look at my website, my website has over 50 hours of videos, I'm really reluctant to
09:33go over every single video or even deal with the extra file sizes on the systems.
09:40You don't have to because you could make a plan where, for example, our site, which
09:43is really geared a lot to Flash users.
09:47And even if not Flash users, who doesn't have Flash?
09:49It supports mobile devices and hopefully mobile devices such as the Apple-related ones.
09:56And the Apple-related ones have H.264, so we could have a backup plan only showing the H.264
10:01to the Apple-related devices and enable the Flash version one for all the rest, which
10:06obviously will have still some browsers, such as different mobile devices that don't
10:11have a Flash plugin installed in them, that wouldn't work.
10:13But that's a chance we're willing to take.
10:16Obviously every case in its own scenario.
10:18So in our case, if we want to go over and actually do this conversion for every single
10:21video, which we're actually going to do this in this example right now, it's actually
10:25incredibly simple.
10:26It just means more file sizes on your system, right?
10:29So let's see how that's done.
10:30So let's get this issue with this video sorted out.
10:32To do that, I actually downloaded an application and it's called Miro Video Converter.
10:37Now it works both on PC and Mac.
10:39It's completely free.
10:41I do encourage you to check it out.
10:42Very simple to work, very easy, very simple.
10:45It's not for a video editor.
10:46It's for just grabbing a video, such as our WIP video, which is actually an H.264.
10:52We could just basically just drag it right into the tool.
10:55Now if you want to find the link to the tool, you could find it in the source files, or
10:57you could Google it, or obviously you could come onto our website, and underneath the
11:03description of this video, we'll put up the link up, so it'll be easy for you guys
11:07to grab it.
11:08All right.
11:09So we set out, we're ready to convert.
11:10We're going to create the WebM.
11:11Basically all we have to do is select from the list the other devices or formats, and
11:15we could select the Theora and the WebM, which are really the only two we need
11:18because we have the MP4, which is the H.264.
11:21So we're going to start off creating the WebM, and we want to do this also for Theora.
11:29All right, perfect.
11:35So we just created both the Theora and the WebM, and now it's time for us to change
11:40our HTML code and see how could we deal with different formats in our HTML itself.
11:45Amazingly simple and actually really, really cool.
11:48All we really got to do is we're going to delete our source from here, and after we
11:52delete the source, we're going to go inside of our video element itself and create a new
11:57source element.
11:59That source element will have an attribute of src, and I'm just going to create three
12:04of them really quickly.
12:05Excellent.
12:08So you have your three sources.
12:10All we have left is now to put in all the video information.
12:13So our first one was video, our folder was videos, and our file was whip.mov.
12:23Our second file was also in the folder videos, whip, but this time around, let's see what
12:29our folder says.
12:30We have theora.ogv.
12:31Let's see what else we have here.
12:41So theora, and we have WebM.
12:44All righty, so again, videos, whip, webm.
12:52I think we covered it.
12:53Excellent.
12:54So now all we have left to do is save the file and actually see if it works.
12:57So now if we go into our browser, refresh our screen, it looks kind of good, but let's
13:00see if it actually works.
13:02We'll play along and excellent, and now we see that our videos are playing.
13:05One thing again to notice, notice how the video controller is completely different than
13:09the controller we saw inside of our Safari system.
13:12In our Safari, when we refresh, if we play it, we'll see that our Safari has a completely
13:17different layout.
13:18That's because every single browser has its own player.
13:21It's out of our control, and that's totally cool.
13:23If we really wanted to create something, we could create it using JavaScript.
13:27All right, now the last thing I want to talk about before we wrap this video of the preliminary
13:33getting ready before we start using JavaScript is one last issue that we have here is actually
13:39that let's imagine that our browser only supports this video format.
13:43For it to find that out, it actually has to go download this file or get its metadata,
13:47see, okay, this doesn't work for me.
13:49Go to the next one.
13:50Only then it's able to output the information.
13:52Now, the way to bypass that is actually to tell our browser what type of file it is.
13:59By telling it what type of file it is, we're going to bypass that information.
14:02Now, I'm not going to type it myself because I typed it earlier, and it's a lot to type.
14:07Again, you could always download this right from our source files.
14:11You never really need to change it.
14:14I'm going to just paste in our sources.
14:17Basically, it's just adding a lot of more information that basically just says that
14:20this is the type MP4 file, and this is the actual codec that's being used.
14:24Now, don't worry about what types of codecs because really these are the standard codecs.
14:29The H.264, that's what you have to write for.
14:32The Theora, that's what you need to write for.
14:34For the WebM, that's what you need to write for.
14:37Basically, after you did it once, all you have to do is copy paste.
14:40You really don't need to worry about it anymore after that.
14:44The only reason why we need it is because we want to save time for the browser.
14:47Now, the browser could quickly scan through, see this is the type of info it supports,
14:51and automatically go and get it.
14:53You don't have to worry about it.
14:55Now, what's a one advantage in this is imagine a browser that supports two different formats.
15:00Maybe the browser is better at decoding a certain format than another format.
15:05The browser could actually have its own choice of choosing which format to go for.
15:10Or, if you have a technical issue in one of the formats and it supports both formats,
15:15you might find that there's no file here and it'll just move on to the next file.
15:19It's actually really interesting to see what will happen with that.
15:22That covers the first part about HTML video.
15:26To be able to cover this in a proper way, I wanted to tie this in with Flash video
15:31because at the end of the day, Flash video is not going away, at least not for the near future.
15:35It's still a very popular format, mainly because you could add a lot of interactivity and ads
15:40and a lot of controls that are harder to do in HTML5 currently.
15:46That's one of the main reasons also you could see that Google is experimenting with an HTML5 player
15:51and a lot of other vendors are, but they're really sticking to those Flash players whenever they could.
15:55Even though they'll provide an HTML5 player on browsers that don't support Flash,
16:00they would still opt to use the Flash one just because also the proprietary information
16:07and all the libraries of video that exist for Flash that don't exist yet for HTML5.
16:13I just wanted to talk for a second. We're not going to actually do it right now,
16:17but if you do want to create a Flash player, you could always use the OSMF player,
16:22which we're actually using that in everythingfla.com.
16:25It's a really great player, obviously doesn't work on an iPad,
16:28obviously doesn't work on Apple-related devices, but it actually is quite sophisticated
16:33and makes life really, really easy where you just fill out a few pieces of information
16:38and you get embed code.
16:40Now, by the way, one thing to note about this is that you have to have your files on a server
16:44because their player is on a server.
16:47If it's not on a server, you won't be able to find it,
16:49so that's really the only thing you have to worry about.
16:52But talking back about our files, we're not going to actually go through and create an example.
16:56There's also a lot of ways of merging between or using HTML5 or Flash,
17:00which we might cover that in a later date if you guys want it.
17:03We're trying to keep the strict HTML5 topic, so we don't go off course
17:09because this title is going to be long anyway, so we don't want to go off course too much.
17:13But just so you know, there are many options,
17:15and sometimes when you're trying to figure out your best solution,
17:18it's not always about what's the newest technology,
17:20it's about what capabilities you have.
17:23For example, on a site where we're providing free videos,
17:26such as YouTube videos, we really want to put some ad revenue on it
17:30because that's the only way we can make any income.
17:32Obviously, as cool as HTML5 is, it's a little bit too much of a schlep
17:36to figure out how to add in all of our income streams.
17:40Flash absolutely, as a player, has a lot of room still as a main vendor,
17:46and obviously there's still competition going on.
17:49But then when you look at the really big sites,
17:51such as Netflix, Hulu, Google videos, and YouTube,
17:56you'll see that they're still using Flash or Silverlight.
17:58They're still using a proprietary software if it's because of licensing
18:01and because if they want to protect their proprietary information of the videos
18:05to make sure that people don't download it or to reduce the chances of that.
18:08Well, if we do it in HTML5, there's still some risks.
18:11Obviously, because the platform is an open source,
18:14and obviously because there's a lot more,
18:16it's a much younger field compared to Flash,
18:20which has a lot of options for protecting information
18:23and for advertising and for all these stuff
18:25that are kind of critical for a business.
18:27So, HTML5 videos are amazing, but still a little bit more work,
18:33and even more than that, you have to make sure
18:35that your player could do everything you want to
18:37and that the amount of work you have to put into it won't be as big.
18:41Now, there's definitely a couple of open source projects out there
18:44for video in HTML5, so if you guys are interested in it,
18:46just send us a note and we'll add a couple of links to them
18:49so you guys could look them up and see them.
18:51But there's actually quite a lot of very, very interesting projects
18:54that enable you to mix and merge between a Flash player or HTML5
18:59and switch them around based on priority if you want HTML5 served first
19:03and then only Flash or the other way around.
19:06So, that covers our tagging part of the HTML5 videos,
19:11and our next part is going to be all about code.