Today I’m going to show you a simple, cheap way to set up streaming video on your membership site (or non-membership site for that matter). I’ve set this up for several clients and I use it myself. I think you’ll agree it’s a groovy solution.
This set up is also good for mobile, meaning that the videos will scale to your members’ smartphone and/or tablet’s screen dimensions. And as you’ll learn in just a minute, it will save you money too. Winning!
This solution is Amazon S3 + Amazon CloudFront + JWPlayer
Here’s an example video I set up using the exact method you’re about to learn:
//
You’re free to jump straight to the tutorial but I really recommend you read the following section first. This is because I’ve highlighted some important pros and cons that may make this the wrong solution for your site, depending upon your needs.*
*There’s almost never a perfect solution that does everything you want and nothing you don’t.
A Better Way To Stream Your Video Content
Amazon S3 is a content delivery network (CDN) where you can upload and store your files. It’s a lot like the hard drive on your computer but S3’s storage capacity is virtually unlimited. S3 is also in “the cloud” rather than on your local machine, which means you can access your files from any device, wherever in the world you happen to be.
S3 has a sister service called Amazon CloudFront. CloudFront is basically just a collection of so called ‘edge’ servers. These servers are placed at key locations all over the world. When you upload your video on ‘how to be awesome’ to Amazon S3 without CloudFront enabled, it gets stored somewhere on a server in the USA. But if you upload your video and enable CloudFront distribution, then Amazon will send copies of that video to all of the edge servers world wide.
So whenever somebody in Thailand who is unsatisfied with their current level of awesomeness watches your video, they’ll download it from the server closest to them, rather than from a server somewhere in the United States. This translates to a faster, smoother experience for your member.
Amazon CloudFront has several unique advantages for streaming video. Sometimes when you watch a video online, you have to wait for it to load. You can’t scroll ahead and start watching at whatever point you wish until that part loads. So if you want to watch the final 30 seconds, you have to wait for the whole video to load before you can do so. This is called “progressive download” and it’s so 1.0.
How To Offer Your Members “True Streaming”
CloudFront, on the other hand, allows you to offer your members ‘true streaming’. This means that if Bob is watching a video hosted on your CloudFront account, he’ll be able to scroll anywhere in the video and it will start playing from that point on (just like a video on Youtube, Vimeo, Wistia, etc.)
CloudFront does this through a fancy shmancy protocol called RTMP streaming. In English, that means that the only part of the video that loads is the part being watched right now. So if you’re only using Amazon S3 (and not CloudFront), when I come into your members area, click ‘play’ on a video and then pause it while I go get a cup of coffee, the video will continue to load all the way until the end even if I never watch it! But if CloudFront is enabled, the video will not continue to load!
In a nutshell: with CloudFront you only pay for the bandwidth of video that actually gets watched. Not a penny more. Isn’t that groovy?
So not only do you save money when you use CloudFront, you also give the folks watching your vids a better, faster experience. And since it’s free to enable CloudFront in your Amazon account and to set it up, you might as well do it!
“What About Security For My Videos?”
Something I always strive to communicate to my clients is the fundamental imperfectness of any one solution. And this case is no different.
The ostensible issue with the ‘S3 + CloudFront + JWPlayer’ combo is that you don’t get airtight security for your video streams. If I go into your members area and right click “view source”, I’ll be able to see the URL of each video stream. So if I wanted to download all your videos, I could find the stream URLs, copy and paste them into my browser, and download them just like any other file.*
*This same security hole goes for non-video files. But non-videos files are super easy to protect using a free WordPress plugin called S3Media LinkSafe.
“But Vic! This still doesn’t solve the security issue for video streams…”
Maybe so, dear reader, maybe so. But here’s the rub: for the great majority of people, there’s absolutely no need to protect these download streams. Why do I say that…?
In a word, it’s because the people who want to steal and/or redistribute your content can and will do it easily anyway.
I do realize that some tiny percentage of people have extremely sensitive information in their videos OR have massively popular products that people are just queueing up to pirate. And thus, these rare individuals need all the security they can get. If this kind of situation applies to you, you’ll probably want to look into a fully hosted solution like Wistia or, for something with more marketing features, like EasyVideoSuite.
If this situation does NOT apply to you, I honestly wouldn’t worry about people stealing your streams. It’s truly uncommon. Ravi and Veena, the developers of Digital Access Pass, addressed this issue very convincingly on their blog. So if you’d like a bit more reassurance that protecting your streams is overkill, please take a gander at their breakdown:
Why All This Extra Security Is Overkill (opens in a new tab)
How To Configure Amazon S3 And CloudFront – Step By Step
1. Get an Amazon S3 Account
Click here to join S3. (Opens in a new tab)
It’s free to join but you’ll need to enter credit card info to go live since you get charged for bandwidth on a monthly basis.
2. Create a bucket.
Login and click on “S3“.
Click on “Create Bucket“. For the sake of this tutorial, let’s call our bucket “thailand” (but you can use any name you want).
Oops! As you can see in the screenshot above, it looks like “thailand” is already taken. That’s a reminder that the name of this bucket has to be unique across the entire S3 network. Ok, then let’s go with “thailandrockstar“.
3. Compress And Name Your Videos Properly
It’s vital that you compress and name your videos properly before uploading them to your bucket! Name your files using hyphens only (no special characters), lowercase letters, and numbers. Make the naming logical and memorable for yourself.
4. Upload your videos to your bucket.
Click on your bucket. Now click on “Upload“. Select all the files you want to upload. Do NOT hit “Start Upload” just yet. Click on “Set Details” and then click “Set Permissions”.
Check the box that says “make everything public“.
Now you can click “Start Upload”
5. Set permissions on your bucket (NOT your videos) to private
Navigate to your bucket and make sure none of the items within the bucket are selected. Now click on “Permissions”. Make sure they look like this (but with your name instead of mine):
As you can see, the only person with permission to list, edit or view permissions for this bucket is myself. We do this so people can’t simply list the contents of your bucket and see what’s inside.
*When I went through this step while writing this tutorial, I noticed that new buckets are set like this by default, so you may not even have to do this step. But it’s good to double-check.
6. Log into Amazon S3 and click on ‘services’ in the upper left hand corner.
Click on CloudFront.
Sign up if you haven’t already.
7. Create an RTMP distribution.
Click on “Create Distribution“. Select “RTMP” and click continue.
Click in the “Origin Domain Name” box and select your bucket from the dropdown. Don’t worry about any of the other settings. Simply scroll to the bottom and click “Create Distribution“.
It will take about 20 minutes for the distribution to process. Once it’s done the status will go from “InProgress” to “Deployed”.
In this step, you’ve created a streaming distribution that will apply to all the videos in the selected bucket. This is what’s going to allow you to give your members the ‘true streaming’ we talked about earlier.
8. Create a download distribution.
Follow the exact same steps as in #8 but select “Web” instead of “RTMP”.
The download distribution is the video stream that gets served to mobile devices and web browsers that don’t support Flash (the default mode for JWPlayer). Mobile devices and some wussy browsers can’t handle Adobe Flash, so they use something called HTML5 fallback instead.
9. Go into your WordPress dashboard and install JWPlayer
Go to plugins => Add New => Type “JW Player” (with a space between “JW” and “Player”) =>
Install the first plugin in the results list (make sure it’s the one pictured above). Activate the plugin.
10. Copy and paste the following bit of code into your post or page to embed a video stream:
Now you’re ready to insert videos into posts and page (and even OptimizePress lightboxes!). You MUST paste this code while your WordPress editor is in “Text” mode! If you try to paste it in “Visual” mode it won’t work.
Paste the following code in each place you want your video to appear:
<div id=”myElement”></div>
<script type=”text/javascript”>// <!
}],
width: “100%”,
aspectratio: “16:9”,
primary: “flash”,
});
// ]]></script>
Now you’ll need to change a few bits of the code above.
The red part immediately after “image:” is where you have to put the URL to your video’s thumbnail image. This part is optional. You could simply leave this field blank. But if you want an image in the video box before your visitor hits ‘play’, this is where the image URL would go.
Where it says “rtmp://xxxxxxxxxxxxxx” you’ll need to replace all the x’s with your RTMP distribution stream URL. You can find that by going to your S3 account. Then go to Services => CloudFront. Then in the row that says RTMP, under “Domain Name”, copy the string of characters before the “.cloudfront.net” (shown below) and paste them in place of the x’s.
Where it says “yourbucketname“, replace this with the name of your Amazon S3 bucket. And finally, where it says “awesome-video.mp4” replace with your video name.
Now you can simply copy and paste this code all over your site wherever you need to embed a video. Just replace the info to reflect the thumbnail you want and the video you want and you’ll be good to go. So long as all each video you go to embed is within the same bucket, you will NOT have to re-enter the bucket name or the RTMP stream URL since those remain the same.
Embedding More Than One Video Per Page
If you want to have several videos on one page, you’ll need to change the ‘MyElement’ bit in the code for each new stream you embed in both parts of the code.
Each individual video stream on a given page MUST have a unique name for ‘MyElement’ or it won’t play. You can name each ‘MyElement‘ bit anything you want so long as it differs from all the other ‘MyElement’ bits. The easiest thing is to just make it numerical, like this:
1st Stream On The Page:
<div id=”myElement“></div>
<script type=”text/javascript”>// <!
}],
width: “100%”,
aspectratio: “16:9”,
primary: “flash”,
});
// ]]></script>
2nd Stream On The Page:
<div id=”myElement2“></div>
<script type=”text/javascript”>// <!
}],
width: “100%”,
aspectratio: “16:9”,
primary: “flash”,
});
// ]]></script>
3rd Stream On The Page:
<div id=”myElement3“></div>
<script type=”text/javascript”>// <!
}],
width: “100%”,
aspectratio: “16:9”,
primary: “flash”,
});
// ]]></script>
…and so on. Make sure to change the “MyElement” part in both of the places it occurs within each embed code.
One final note. If you want to create and use folders within an S3 bucket, you’ll have to specify the folder your video is in for each embed code. *While your video file names can have hyphens in them, your folders must NOT have any hyphens in the name or your stream won’t work! One word folder names are best. See the red parts:
<div id=”myElement”></div>
<script type=”text/javascript”>// <!
}],
width: “100%”,
aspectratio: “16:9”,
primary: “flash”,
});
// ]]></script>
Note the syntax. There is no “/” preceding the folder name. If you put the slash, the video won’t load. Also make sure you update the folder name for both the RTMP stream and the regular S3 stream in each embed code.
None of your settings exist in S3. This article has nothing to do with S3. None of these options are there.