Lesson Twenty-one

In this video, we’re going to stream a video file from our S3 account but this time we’re going to post the video on our WordPress site instead of a static HTML site like we did in the last video. Now there are loads of free and premium plug-ins out there for WordPress that make streaming your videos super easy and secure. I’m going to be using the free Flow Player plug-in for this demo.

Three things that I like for this plug-in – #1 it allows for your videos to play on all the major browsers, as long as you do as I show you, and #2 it keeps your videos secure because the video files on your S3 account are set to provide unlike in the prior video where we have to set them to public and #3 it’s free.

So let’s go ahead and get started. Now I’ve already logged in to the back end of my WordPress site and at this point I want to install the plug-in, so we go to plug-in, go to add new, and in here you want to type in ‘FV WordPress Flow Player’ and by the way this is the plug-in right here from the WordPress.org plug-in repository. Now I’ve already installed it on my site so I’m not going to do that and once it is installed and activated, under the settings tab you have the settings for that plug-in. Just click on that. You’ve got a lot of different customizations you can do with the free player as it is but I’m going to leave everything default except for down here under site wide flow player defaults, I believe the only thing that I changed here was the default video size.

I changed it to 640×360 and that’s it. You’ve got, like I said, a lot more stuff you can do with this player than just this, but whatever changes that you do make, make sure that you click on one of these guys that says ‘save all changes’ and I came down here and I added the security stuff for the Amazon S3 account. What you do is you put in the bucket name here that you want secured, the access key and the secret access key for that account and this is the expiration time right here set in minutes, which is important because most everything else is going to be set in seconds but we’re going to do it with minutes. Check that box and you’re good to go.

As far as getting this stuff, here’s what you want to do. And by the way, if we come over to the WordPress.org page where that plug-in is and if we scroll on down pretty close the bottom here, additional documentation, if we click on this user guide, I’m going to open that up under new tab, over here on the right #11 serving private videos with Amazon S3, this is going to describe for you in detail everything that I’m about to show you and there’s a ton of tutorials on this page so by all means bookmark this if you’re going to be using this particular plug-in, but here’s what we want to do. Come on back to our S3 account and I’m going to create a new bucket just for that plug-in, create bucket, give it a name, I don’t know if that’s taken or not, let’s see.

Okay we’re good. Now then I want to go to the bucket that I have those other video files in because that’s another thing, is that you want to have, just as what we did with the streaming videos on the static HTML page, you want to have at least a WebM video format and an MP4 video format that’s optimized. You want to go through the same processes that we did in the prior video on getting the WebM format and optimizing the MP4 file. I’m just going to go ahead and select these and copy them over to that other bucket and we’re done.

Now let’s just double check the metadata and the permissions here because the permissions remember have to be set to private. Check the properties, permissions, it’s set to everyone.

We want to get rid of that, make it back to the default private and let’s check the metadata, content type. Okay, so we’re good on the metadata and the permissions are set back to private. Let’s do the same with the WebM. Get the permissions back to private, save that and the metadata, just double check, and we’re good there.

Okay now that we’ve got our video files that are optimized and set to private and the metadata is good, and now then we need to create a user specifically for this particular plug-ins access to these video files, so let’s come on back to our AWS console. Go to IAM. This is similar to what we did in a prior video. Go to users. Create new user and we’re just going to name this the name of the plug-in just so I know what it is. You can name it whatever you want. And then we need the access keys here because that’s what we’re going to put in to our WordPress site here. So click on create.

Now then let’s just go ahead and download those credentials and we go ahead and put in the FV here so I know which one they are and then click on close. Now then just select that user that we just created and then click on permissions. Then to attach user policy. Read access only is the one that we want. Click on select and click on apply policy and we’re good.

Now let’s come on back to our WordPress site and let’s name this the proper bucket, that’s the one we just created, which is FV-plugin and let’s open up that CSV file that we downloaded that contains the access key and the secret access key. Now let’s select the access key, copy that into my clipboard. I think I’ve done this enough times already that you probably already know what to do and likewise with the secret access key and then save all changes.

Now let’s go ahead and grab those URLs to those videos because we’re going to need those here in a second. I’m just going to paste them into a text document. Go to properties and just right click and copy link location or just highlight it and then copy it then just paste it to a text document somewhere.

Now that we’ve got the URLs, let’s come on back to our WordPress site, go to post, add new and the same thing can be done with pages as well. Give it a name, make sure we’re in the visual tab, and then click on this icon here which is added as soon as you activate that plug-in. And then we’re going to go ahead and add one of these URLs first and then click on this to add the other one second. Just make sure you got the cursor blinking in there then paste that in there and then put the dimensions in here. I’m going to go with 640×360 and you can also put in a URL of a splash image, which basically is the intro image but I’m not going to do that. That’s pretty simple to do if you want to do that though. Then I want to add the WebM and then click on insert. Then click on publish and then view post.

Now we’re in Firefox right now so we’ll go ahead and test it using Firefox first. And you only get this if you’re logged in as the administrator. In other words anybody else that’s not logged in is not going to see this. There we go. Let’s go ahead and test this on the other 3 browsers, Chrome. And by the way that splash image would go here instead of that black box. There we go; and Internet Explorer. So far so good. And last but not least, Safari. There we go.

This is the end of the video on streaming videos from your WordPress site using video files that are set to private in your S3 buckets and will work on all the major browsers. Thanks for watching and you have a great day.