Converting Video for HTML5 Video Player
Enough of the boring intros and getting started with html5 its time to get our hands real dirty and its actually really fun. in this video we break into the world of html5 video. we start by the formats that are supported in html5 and then move into creating our first html5 video player. We start off with a video that is already formated at h.264 a perfect format for many web needs(and the ideal flash encoded video to date) but yet it doesnt' work on every browsers we explore why and see how we can fix that. we then use the tool mirovideoconverter an opensoruce tool that will make our life easier so we can expore our video to all the formats we need. by the end of this video you will know everything you need to know about how to create a html5 video player with all the posible configurations. how fun is that. but this topic is not over the hype over html5 video wasn't only about the capability to display video but it runs deeper and in the next chapter we will look into the counter part the JavaScript part of controlling the video.
Video Transcript
00:00Welcome back and before we continue I want to create a couple of new videos so I've created a
00:04new demo video just that has a little bit more movement so it's easier for you guys to see when
00:09something is happening. So I'm going to grab the Miro. I have a newer version of that Miro video
00:15converter. It's still free. I'm just going to grab that demo video, drop it right inside,
00:20and I'm going to select what formats which basically I'm going to click on the format menu.
00:24I'm going to select video. I'm going to select already have the MP4 so I'm going to select the
00:28AUG. I'm going to convert to AUG and then I'm going to select the WebMD. I could use the HD
00:39version, convert that to WebMD. Notice how it's on the new version of Miro. You have actually a
00:44couple of selections where you could actually create custom variations for mobile devices
00:49but we're not going to worry about that. We're just going to create the basic video players.
00:53All right so once we created the video players and the conversion is completed,
00:56I'm just going to click on the show files to get the files and I'm just going to grab them
01:01and send them right over into our document. Now one thing to note also in the settings of Miro,
01:07if you click onto the settings you'll see that you could create a thumbnail as well.
01:11I've created a thumbnail in advance so I'm just going to grab one of the thumbnails.
01:16It really doesn't matter which one so I'm just going to rename it just as PNG
01:21and I'm going to grab that demo that PNG and just drop that in the same folder.
01:25We could close that up and now we have the demo in all the different variations and the demo.png.
01:31Now something to note if you worked with the older converter and the newer converter now that
01:35we're in the HTML file itself, we're going to and I created a new HTML file which is called
01:40video-js.html. If you're a 02geek.com member you could download the source files. If not
01:47just try to file along with us and type as we're typing along. So one thing that I want
01:52to do is I want to make sure that the file names are correct so I'm just going to change
01:57the whip file to be demo and I'm going to change the whip file to be demo and demo one more time.
02:04Now I'm going to get rid of all the detailed codec information because the browsers are smart
02:09enough to figure that out on their own. So I'm just going to leave the information that just
02:13tells them what file format it is, which one is the mp4, one is the og and one is the webm.
02:18Now all that's left for me is to make sure that I have the right file names.
02:22So I'm going to go inside of the file and just start with the og1, copy the full file name and
02:27just make sure that I have the full file right name because the names change in the different
02:31versions of Miro as more file formats are adding in. They kind of modernize the way they format
02:39the names. You could or rename the files that Miro converter gives you or just manually update
02:45them as we just did right now together. Now last but not least before we continue onwards
02:51is I want to update the video size which was it's actually going to be if I just open up my
02:56properties here for a second, get info, we'll see that the video format is 640 by 360. So I'm
03:04going to update that to 640 by 360 because that's our new video. I want to change the poster as
03:12well from poster.jpg. Let's check what's the form, what's the name of our file which is demo.png.
03:18So I'm going to change that now into demo.png. We're going to save that. All that's left before
03:24we start working really on our JavaScript and creating something that's a little bit more dynamic
03:30is just to make sure that the files are still running on Firefox and Safari and if you're on
03:34Windows make sure it's working also on Windows. But we do know that it does work so we're just
03:39going to double check it once. We'll see that a new file has been added, the new screen has been
03:45added as well and once we click on video play nothing happens. But if we try this out now on
03:58Safari as well and we click on refresh and we click on play we'll see that it does work on Safari
04:05but we're having some sort of a problem in Safari. So Firefox is working but Safari is not.
04:13So let's try to dig a little bit deeper into that. Before that I'm just going to click on
04:16refresh one more time. I could see the CSS is not being loaded but that's fine and our problem
04:23must be that our file is just not loading up correctly. So let me just go back into the
04:27files and confirm that we are working with the right files. So demo.mov is the file name that
04:34we're working with. If I go into the finder I'll see okay my mistake is that it's actually .mp4
04:40and this is one of those stuff that it kind of made me nervous because we thought that
04:44everything works but really this happens to developers all the time so I prefer not editing
04:48these type of videos because it makes you see that these type of mistakes happen all the time
04:52as a developer. All right so now that we discovered what the problem was I could go ahead and just
04:57rename the file to be .mp4, save the file up again and now we could go back again into Safari
05:03and see why wasn't it working in Safari. Now how did I know it must be something to do with
05:07the file name or the file format. First is I already knew that it's an h264 file. Now before
05:13I continue talking let's just make sure that it loads. When I click on play you'll see that now
05:17it works on Safari as well. Now the reason why I knew it was because it worked in Safari meaning
05:23that the file was working but our video for Safari wasn't working while it was working on Firefox
05:30meaning that it's probably the video itself the format that is specific to Apple is not
05:36working and the format specific to Apple as we learned in our previous video is h264 which was
05:42our mov file which actually we wanted it to be an mp4 so all I had to do is rename our file
05:48rename our source inside of our html page to get the file to work. All right now that we got that
05:54sorted out it's time for us to start really building that dynamic javascript play and pause
05:58as you can see inside of our preview video inside of this video. All right so let's get
06:03back into our editor and what I want to do is I want to start first by cleaning up our code a bit
06:08you'll see that in our and and I haven't talked about this although we talk about this in our
06:13javascript training in general training in general we're going to have open our console at all times
06:19the way you get into the console is if you have the developer version of safari or firefox
06:24console then you have access to it just by right clicking and inspecting elements and then
06:29selecting the console area. If you don't know how to do it just ask us and we'll redirect you to one
06:35of our javascript training videos where we show you how to work with the inspectors but we're
06:40going to assume that you know how to set that up and we're going to continue from there and a lot
06:44of our training now depends on the fact that you could open your console and see what's going on.
06:48So one of the things that we could see in our console right now is that the file failed to load
06:52our css file the reason for that is is because we don't really have a css file we were just
06:57showing that as a demo as we were going on in our training so I'm just going to delete that
07:02external css file and let's just clean up our code about I'm going to delete all these extra
07:07information that was in our base video as well.