Lesson Twenty

In the next 2 videos, I’m going to show you how to stream videos from your website. This video will be showing you from a static HTML website and the next video will be from a WordPress site.

The first thing you do is to get the proper video format so that your video will stream or play on all major browsers. The formats you’re going to need are MP4 and WebM. If you do not have these 2 formats but you have a different format like say for example MOV or WMV or AVI, then you can use a file converter to get the MP4 and WebM. Now you can do a search for video file converter and let me just show you what I’m talking about here. For example on Google, and as you start typing in the search box you can also select video file converter free or if you’re on a Mac, video file converter for Mac. I’m on a PC so this isn’t going to do me any good.

In either case, use whichever one you are more comfortable with. I myself have used the one called Zamzar. Let me show you that one. That’s this one right here, that’s zamzar.com and this is ideal because you don’t have to download software and install anything on your computer, so this will work whether you’re on a Mac or a PC or Linux or whatever. The only drawback to this though is that there is a 100 megabyte file upload limit. They do have a pro version where you can get a larger file size uploaded but I’m trying to stick with the free stuff here. So if that’s an issue for you, then head on back to your Google search and find one that will work for you. In either case, you want to end up with an MP4 and a WebM format.

The MP4 format needs to be optimized for streaming and you can do this with a free program called handbrake which works on Windows and Macs, and that’s at handbrake.fr. So I’m going to go ahead and demonstrate how to use this real quick, so the first thing you want to do is go to source, select your video file, now go ahead and select this one here. It’s already an MP4 but you can do this with an AVI, WMV, MP4 and I believe even in MOV video format. Then you want to go ahead and select the destination by clicking on browse. Then go ahead and give the file a name. We’ll just go with that for now. Now then you want to make sure that on the output settings that the container is set to MP4 and this is important, you want to check the box here that says web optimized.

Under picture, here you want to have the display size set to whatever you want the end result to be, then all you have to do is just change this width here to the width that you want and it will automatically change the height, keeping the aspect ratio proper. If the source is a larger size than what you actually want the end result to be, then make the change here. Other than that you don’t mess with picture, filters but on video you want to make sure the video codec is set to H.264, frame rate is same as source and then under optimized videos you have this box checked and you can leave these and this alone. And under audio change the 160 bit rate to 128, leave the rest of the stuff alone.

Subtitles, chapters, leave alone and under advanced I changed the default reference frame from 3 to 4; everything else just leave it alone. And that’s it. Click on start and depending upon the power of your computer and the size of the file that’s being optimized will depend on how quickly this will take place but down here on the lower left corner will give you a progression as to how things are going.

Once you have your MP4 file optimized, then it’s a matter of uploading the MP4 and the WebM to your S3 bucket. Let’s go ahead and log in to our AWS console.

Come on down here and click on S3 and select the bucket that you want to upload these videos to. I’m just going to go ahead and upload them into this bucket, then click on upload. Click on add files then navigate to the location of the video files you want to upload and here’s the MP4 and the WebM that I’m going to use in this demo.

Click on open and before we start uploading there’s a couple of things we have to do. Under set details check the box next to use server-side encryption for that little extra layer of protection, and then under set permissions we need to click on add more permissions and make this public, so we click on everyone and then check the box next to open download and after these are done uploading, we’ll come back in and adjust the metadata to what it should be. So we’re going to start upload and I’ll pause the video until this gets done and we’ll be right back.

Now we’ve got those uploaded. I want to show you the metadata and what it needs to be set for. Let’s go to the WebM format first. Go ahead and select that. Come on up to properties and then go to metadata and under content type, you see this is what it’s going to look like on both the WebM and the MP4. We need to change this from application to video and from the type, from whatever that is to MP4, no I’m sorry to WebM, because that’s what this is. It’s the WebM and then click on save and the same thing for the MP4 – metadata, content type, video/MP4 and then click on save. We just need to get those URLs for both of these video files and just copy them on to a text document because we’re going to need them here in a second.

I’m just going to right click and copy link location or you can just highlight it and copy it, whatever floats your boat, and same thing with WebM and paste. There we are, we got both of them.

Now that we have our video files properly setup, we need to get the correct embed code that will play our videos across all web browsers. Let’s head on back over to Google and do a search for video embed code generator and if you’re familiar with any of these, just pick whichever one you like because the end result’s going to be the same. I’m going to use this one here and this is something that you do not have to download. It’s all online. Just click on this button here that says ‘launch embed code generator’ and over here on the left, by default HTML5 is selected. That’s the one that we want and under type select video then put the MP4 here next to MP4 and the WebM next to the WebM. There we go, MP4-MP4; WebM-WebM. This poster is the splash image or the intro image if you want one.

I’m going to leave that one blank. If you do use a poster image, then just make sure that it’s the same size as you videos. Like for example the videos are 640×360, just make sure that image is 640×360 and it won’t look so dorky. Speaking of size, under width we want this to be 640 and the height 360. Then the other settings just whatever you prefer. I prefer this – controls on, AutoPlay no, loop no, mute no, and then click on submit. Scroll on back up to the top right corner, there’s our code. Just click in there anywhere, right click, copy, and then paste this on your HTML page wherever you want your videos to show. I already have the index page opened up in my FTP client, which in this case I’m using CuteFTP. I think you can do the same thing with Filezilla. It’s just a little bit different, but I’ve got a place here to where I can paste that code.

Of course a lot of times you’ll probably be more apt to using an HTML editor like Dreamweaver or Composer to paste this code in there, save it and then upload it to your server. I’m just saving a step here just for the sake of speeding this video along and then right click and file save.

Now let’s go ahead and test this in all the browsers. Let’s start off with Firefox and there we go. Firefox we’ve got a go. Let’s try Chrome and instead of that black you would actually have the poster image. Let’s go ahead and click on play. There we are. So far 2 for 2. Now let’s go with Safari and Safari is working as well. Last but not least Internet Explorer and we’re working in Internet Explorer as well, very good.

And that’s the end of this video on how to prep, optimizing and stream your Amazon S3 hosted videos from a static HTML page that plays on all web browsers. Thanks for watching and you have a great day.