Serving Private Videos via CloudFront

CloudFront is a CDN (content delivery network) and with 51 edge locations across the Globe it makes sure your videos are quick to buffer everywhere. It is very scalable from small to large business with easy pay as you go pricing, while also offering a certain degree of download protection.

Before you can serve your files using CloudFront:

• your files must be hosted on Amazon S3 bucket. Make sure you follow this guide from step 12. to the end and skip any steps regarding the "file protection": Serving Private Videos with Amazon S3
• make sure you have the latest FV Player Pro version (our pro module for FV Player, just purchase a license to get it)

This article shows you how to:

• Configure CloudFront keys for FV Player
• Setup a CloudFront HTTP distribution for your video 
• Setup a CloudFront RTMP distribution for your video
• Summary

Configuring CloudFront keys for FV Player

If your videos are public and you don't need access restrictions, you can skip this part.

1. We will have to setup the CloudFront Key Pairs (public and private key). Unfortunately IAM users are currently not allowed to create CloudFront key pairs, so you cannot use IAM users as trusted signers.

   Log in to your Amazon AWS Management Console and go to your profile -> Security Credentials.

   
   Access your Security Credentials

2. You will see a notice, that you are setting up the security credentials for your main account which has access to all of your Amazon Services. You need to agree to this.

   
   Continue to Security Credentials

3. You have to create a new CloudFront key pair (or use existing one, if you have stored your key files as you should). Select CloudFront key pairs.

    

   

4. You will see a popup from which you need to download "Private Key File" and store it securely because you will need it later.

5. Also get your Key Pair ID from the Your Security Credentials screen, now that the key was created.

   
   Don't forget your Access Key ID

6. Now that you have both the Private Key File and the Access Key ID - in worpdress admin panel of your webpage go to Settings > FV Player Pro > Hosting > scroll down to CloudFront (pro). Enter your Access Key ID and Private Key File which was downloaded in step 4 (copy the whole content of it, it should start with "-----BEGIN RSA PRIVATE KEY-----" and ends with "-----END RSA PRIVATE KEY——). Our plugin now automatically checks if the key is inserted in the right format.
   Note: The key files need to be opened in a simple text editor, such as Notepad on Windows. On Mac, you will have to convert it to a TXT file, so it the system opens it instead of trying to add it to your keychain.

   
   Private key

   You will also need your CloudFront domain name, you will get that one as the CloudFront distribution is created.

7. You cannot view your private key for security reasons. It is recommended to change your private key every 90 days. To enter the new key, simply copy the new one ("Click to put in a new one"). Click Save All Changes.
   

   
   CloudFront settings

Setting up CloudFront HTTP distribution

1. First login into your Amazon AWS at https://console.aws.amazon.com/ and then type "cloudfront" into the Find Services search field. Click Enter.
   

    

    

   
    

    

   

2. Create a new distribution by clicking Create Distribution.

    

   

3. Make sure you pick the Web type (not RTMP) and use the settings from the following screenshot: 



• Origin Domain Name - pick your Amazon S3 bucket here.
• Origin Path - optional. If you want CloudFront to request your content from a directory in your Amazon S3 bucket or your custom origin, enter the directory name here, beginning with a "/".
• Restrict Bucket Access - set to Yes if you want the download protection. However make sure you update all your links to the files which use Amazon S3 bucket URLs to the CloudFront URLs!
• Make sure to whitelist following headers(Acess-Control-Request-Headers, Access-Control-Request-Method and Origin) to allow HLS playback.
• Origin Access Identity - if you want download protection set to Create a New Identity.
  • if you already have another CloudFront distribution which is using the same bucket, you can pick it's Access Identity.
• Grant Read Permission on Bucket - set to Yes, Update Bucket Policy.
• Restrict Viewer Access - if you want to restrict downloading and use access keys, set this to "Yes".

Then hit the Create Distribution button.

4. You will see that your distribution is being created. Select it and hit Distribution Settings to figure out what is the CloudFront domain name.

   
   CloudFront creating in progress

5. You need to copy the Domain Name here and put it into Settings > FV Player > Hosting > CloudFront (Pro) > CloudFront domain.

   
   CloudFront general settings

   If you already have some other domain name there, just put in a comma symbol behind it and add the new one.

   
   CloudFront settings

6. If you also want the download protection you probably already put in the following, but it's time to double-check:

   • CloudFront private key file (step 6. of Configuring CloudFront keys for FV Player)
   • Access Key ID (step 5. of Configuring CloudFront keys for FV Player)

7. Last thing is to go back to the CloudFront distribution settings and adjust the Behaviors. Pick your Behavior and click Edit.

   
   Adjusting CloudFront behavior

8. In the Behavior settings, we set it so that the CloudFront Key Pair is required to access the files and that your user has the right permission. If you want to use some other Amazon account for the CloudFront file access, you can use the Specific Accounts option.

   You also need to allow CORS in your S3 bucket with HLS streams and then in CloudFront distribution set the Cache Based on Selected Request Headers to Whitelist and add all three possible options in the table that will appear below.

   

   These CloudFront configuration changes usually take a few minutes to finish, so just check the main distributions screen.

9. If you want to use your own domain name for the CloudFront, you have to go back to the distribution settings and edit the General properties:

10. Select the General tab, then click Edit.

    

11. Now you can enter your domain which you will point to your CloudFront domain (use C Name record in your DNS Zone).

    
    CloudFront - custom domain name and SSL

    You will also need to enable the SSL - pick "Custom SSL Certificate" and enter your domain name. Hit the "Request or Import a Certificate with ACM" and you will get a new wizard in which you need to enter that domain and use either DNS or Email validation. We recommend using the DNS validation.

    Be careful about the record value - it has to end with a dot symbol, otherwise your domain name might be appended to it.

    
    Domain validation in ACM

    Once the certificate is validated you might need to start over with the custom domain setup. For "Custom SSL Client Support" pick "Only Clients that Support Server Name Indication (SNI)" as that option is sufficient. 

    The changes will take a bit of time to save. Once done, you will be able to open your files using your own domain.

12. Now you can embed your videos. To insert a new video click the FV Player icon and the dialogue window will appear. 

    
    Insert  FV Player

13. Insert the video link. The link should be in form:  {something}.cloudfront.net or your mapped domain CNAME (for HTTP only, see step 10).

    
    Inserting CloudFront URL to FV Player's shortcode editor

14. Alternatively you can type in the shortcode like this:

    [fvplayer src="https://mydomain.cloudfront.net/Swan+Lake+Reloaded.mp4"]

Done. Now your video is streamed via CloudFront with signed URL (download protection). The video URL visible in page HTML doesn't contain the CloudFront Signature and thus it can't be downloaded (your video URLs are safe from simply grabbing their URL using "show page source" web browser function).

You can check a couple of example videos in this demo.

Setting up RTMP on CloudFront

This is vital for speedier video buffering times and fast seeking in browsers which only play MP4 files in Flash. Use MP4 files for the RTMP distribution.

Note: Since Flash is deprecated we don't recommend setting this up as it's just extra hassle. Browser with Flash will play the HLS streams just fine and HLS is the format you should really be using these days instead of MP4.

1. First login into your Amazon AWS at https://console.aws.amazon.com/ and then type "cloudfront" into the Find Services search field. Click Enter.
   
   

    

    

    

    

   

   
    

2. Create a new distribution by clicking Create Distribution.

    

   

3. Select RTMP and click on Get Started:
   
   

    

   

4. Fill in the required data:

    

   

   
   CloudFront -  New distribution properties

   • Origin Domain Name - this should offer you all of your buckets automatically. Pick the one you need.
   • Restrict Bucket Access - set to yes if you want to restrict the downloading.
     • then also set Origin Access Identity to Create a New Identity. If you already have another CloudFront distribution for your Amazon S3, select Use an Existing Identity and pick it from the drop down menu.
   • Restrict Viewer Access - if you want to restrict downloading and use access keys, set this to "Yes".
   • Distribution State - make sure it's Enabled. Click Create Distribution.
5. Once you create the distribution, it might take while until the request is processed. You will see this in the list of your distributions. 
   

   
   CloudFront Distribution is in progress

6. Wait until it says Deployed in Status column. Once it's ready, copy the Domain Name value:
   

   
   CloudFront Distribution is ready

   You need to put it into Settings > FV Player > Hosting > CloudFront (Pro) > CloudFront domain. If you already have some domain in there, just put in a comma symbol behind it and add your new domain name. 

7. Now you can follow our posting an RTMP video guide. The RTMP Server and RTMP Path is as following:

   • RTMP Server - rtmp://domain-name-copied-above.cloudfront.net/cfx/st
   • RTMP File Path - file path within the bucket. If your bucket is called my-bucket and you have a video directory inside of it with sample.mp4 file in it - use video/sample.mp4. If the file is directly in the bucket, only enter its file name
   • If you setup your RTMP with access restrictions, you need to enter your domain (like d2yv7j6ywk4678.cloudfront.net) in Settings > FV Player Pro > Hosting > CloudFront (Pro) > CloudFront domain. If you need more domains, separate them with commas.
8. Issues? The video might not play for you if there is some issue. If FV Player says flash: Invalid RTMP URL, then double-check it.
   If the video appears to be loading, but never starts playing, double check it.
   Best way of testing a RTMP video is to insert a new player, enter the RTMP information and nothing else and try playing that in a Flash enabled browser. If you enter both MP4 and RTMP, your browser might be picking the MP4 (you can see that in browser developer tools though).
   • you are using the correct CloudFront domain name (see step 5. above, it's pretty ugly)
   • the distribution status is Deployed (see step 5. above)
   • double check your access keys, or if you don't use download restrictions, check that Restrict Bucket Access and Restrict Viewer Access is set to No (see step 4. above)
   • check your video file permissions on Amazon S3
   • check the same permissions for all the directories which contain the video file
   • is the file really MP4?

Summary - Practical example

After you have configured everything properly, here's a quick check:

1. If your CloudFront distribution d2yv7j6ywk4uii.cloudfront.net is configured to serve files from Amazon S3 bucket fv-flowplayer-cloudfront (configured in Setting up CloudFront distribution - RTMP [step 4])
2. And your Amazon S3 video URL is https://s3-us-west-2.amazonaws.com/fv-flowplayer-cloudfront/Swan+Lake+Reloaded.mp4 (obtained in Uploading the files and setting their properties [step 10])
3. Then your CloudFront video URL is https://d2yv7j6ywk4uii.cloudfront.net/Swan+Lake+Reloaded.mp4

   If you configured the CloudFront with download restriction (Restrict Bucket Access), the file should not open when opened in your browser - just copy and paste the video link into your browser location bad and try to open it.

4. Additionally - if you also have a domain mapped to CloudFront via a C NAME record, for example video-cdn.foliovision.com, then the video URL is http://video-cdn.foliovision.com/Swan+Lake+Reloaded.mp4
5. Then you just enter it like

   [fvplayer src="http://video-cdn.foliovision.com/Swan+Lake+Reloaded.mp4"]

   or use the shortcode editor.
6. Quick check:
   1. Make sure you deselect Settings > FV Player > Setup > Sitewide Flowplayer Defaults > Disable Admin Video Checker, click Save All Changes and open your post for viewing.
   2. Look for "Checking video..." in the top left corner of the player. Does it say "Video OK"?
   3. Does the video play?
   4. If no and you are using both HTTP and RTMP distributions - make sure you use the same "Origin Access Identity" for both and set "Update Bucket Policy" again.