CloudFront is a CDN (content delivery network). With its 127 edge locations across the Globe, it makes sure that your videos are quick to buffer anywhere. It is very scalable from small to large businesses, and offers easy pay as you go pricing, while it also provides a certain degree of download protection.
If your videos are public and you don’t need access restrictions, you can skip the CloudFront keys part.
We will have to setup the CloudFront Key Pairs (public and private key). Log in to your Amazon AWS Management Console and go to your profile -> Security Credentials.
You have to create a new CloudFront key pair (or use the existing one, if you have stored your key files, as you should). Scroll down to CloudFront Key Pairs and click Create CloudFront key pairs.
You will see a popup from which you need to download both the Private and Public Key file and store them securely because you will not be able to access them later.
Also, get your Key Pair ID from the Your Security Credentials screen, now that the key was created.
Now that you have both the Private Key File and the Access Key ID – go to WordPress 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 entire 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 that 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 once you’re finished creating the CloudFront distribution.
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
First, login into your Amazon AWS at https://console.aws.amazon.com/ and then type “cloudfront” into the Find Services search field. Click Enter.
Create a new distribution by clicking Create Distribution.
Click Get Started and use the Origin Settings 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 “/”.
In S3 bucket access set Yes use OAI (bucket can restrict access to only CloudFront)
Origin Access identity – pick or create an OAI to match your bucket. (If you already have another CloudFront distribution which is using the same bucket, you can pick it’s Access Identity.)
Bucket policy – pick Yes, update the bucket policy.
Scroll down and use the following settings for Default Cache Behavior:
Object compression is optional and only compresses HLS streams.
For Restrict viewer access make sure to pick Yes, Trusted signer, Self. To ensure signed URLs work properly.
For Cache key and origin requests use the following:
Pick Legacy cache settings and make sure to include the following headers: Acess-Control-Request-Headers, Access-Control-Request-Method and Origin, to allow HLS playback.
You can keep all the other settings unchanged. If you wish to set up your own domain name, see this part of the guide.
Then hit the Create Distribution button.
You will see that your distribution is being created. Select it and hit Distribution Settings to figure out what is the CloudFront domain name.
You need to copy the Domain Name here and put it into Settings -> FV Player -> Hosting -> CloudFront (Pro) -> CloudFront domain.
CloudFront settings
NOTE: If you already have some other domain name there, just put in a comma symbol behind it and add the new one.
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)
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
Select the General tab, then click Edit.
Now you can enter your domain which you will point to your CloudFront domain (use C Name record in your DNS Zone).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.
Embedding Videos To Your Posts
Now you can embed your videos. To avoid having to input your links manually, make sure to enable the S3 browser.
In FV Player Editor, click Add video:
Once in the media library, pick the Amazon S3 tab
Find your video and click “Choose”.
Done. Now your video will be streamed via CloudFront with signed URL (download protection). The video URL visible in page’s 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.
Troubleshooting
If you’re facing playback issues, make sure to deselect Settings -> FV Player -> Setup -> Sitewide Flowplayer Defaults -> Disable Admin Video Checker, click Save All Changes and open your post for viewing.
Look for “Checking video…” in the top left corner of the player. Does it say “Video OK”?
Does the video play? If not, what does the checker say? If unsure, send us a report or write us an e-mail.
This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
Necessary Cookies
Strictly Necessary Cookie allow you to log in and download your software or post to forums.
We use the WordPress login cookie and the session cookie.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.
Support Cookies
Foliovision.com uses self-hosted Rocket.chat and self-hosted Freescout support desk to provide support for FV Player users. These cookies allow our visitors to chat with us and/or submit support tickets.
We are delighted to recommend self-hosted Rocket.chat and especially Freescout to other privacy-conscious independent publishers who would prefer to self-host support.
Please enable Strictly Necessary Cookies first so that we can save your preferences!
3rd Party Cookies
This website uses Google Analytics and Statcounter to collect anonymous information such as the number of visitors to the site, and the most popular pages.
Keeping this cookie enabled helps us to improve our website.
We reluctantly use Google Analytics as it helps us to test FV Player against popular Google Analytics features. Feel free to turn off these cookies if they make you feel uncomfortable.
Statcounter is an independent Irish stats service which we have been using since the beginning of recorded time, sixteen years ago.
Please enable Strictly Necessary Cookies first so that we can save your preferences!
Leave a Reply