Facing a hard to solve WordPress
problem? On a tight deadline?
Let us take care of it for youFoliovision Pro Support
Closed Captions Button
Martin: “Hello gbowman, unfortunately this is currently a limitation of core Flowplayer. However…”
Fullscreen unavailable if player contained in Toggle
gbowman: “Hi – When the video was just embedded on the page…”
Martin: “Hello gbowman, you need to add this line into your .htaccess file…”
Player controls not displaying on RTMP live stream
Donald P.: “Alec, Sorry, I am out of town on a business trip right…”
how to add multiple subtitles for same video ?
Martin: “Hello Kushtrim, this is bit of a problem, as different browsers support…”
Issues with JustCloud.com
Martin: “Hello Ronald157, there should be no issue with your video file as…”
Martin: “Hello Wendy, if it's .htaccess then there is little our plugin can…”
Fix splash image on videos with different aspect ratio
Martin: “Hello Mateusz, thank you for a great suggestion! We will definitely fix…”
Issue getting back from fullscreen
Martin: “Hello Francois, indeed, just installing Photo Gallery breaks the fullscreen function of…”
Martin: “Hello dot4all, Unfortunately at this point we only do this when required,…”
- Closed Captions Button
This article shows you how to:
- obtain your Amazon AWS access credentials
- upload files with a proper mime type and set permissions for private access only
- setup a RTMP distribution for your video
- setup a secure CloudFront distribution for your video (work in progress)
The article is pretty long as it's a step by step guide.
Obtaining the Amazon AWS access credentials
If you don't want to protect your video against unauthorized downloads, you can skip to the next section of this document.
- First login into your Amazon AWS at https://console.aws.amazon.com/ and then click "IAM - Secure AWS Access Control" in the menu:
- Once the IAM screen opens, go to "Users" -> "Create New Users":
- Enter your IAM user name, make sure "Generate an access key for each User" is on and click "Create":
- Once the user is created, you will see a confirmation window. Click "Show User Security Credentials" in this window, that will shows you the "Access Key ID" and "Secret Access Key":
- Copy these keys and paste them into "FV WordPress Flowplayer Settings" -> "Amazon S3 Protected Content" on your website in a new browser tab. We will also need to bucket name, we create that in next section of this guide:
- Now that you have stored the keys, you can go back to your "Create User" dialog and click "Close Window". There will be one more confirmation window - it warns you that it's very important that you store these credentials, as you won't be able to get them later. You will have to create a new set of access keys for the user if you have lost these.
Last step is to make sure this user has read-only access to the files only. Once you close the above window, select your new user from the list, click the "Permissions" tab and "Attach User Policy" button:
Next select the desired permissions. Our player only needs to be able to read the video files, so select "Read Only Access":
Next windows lets you enter custom settings for the policy, just click "Apply":
This is what you will then see in the "Permissions" tab:
That's it. Now the access keys can be used to play private videos from your Amazon S3 account.
Uploading the files and setting their properties
There are tools which allow you to upload these files without using the web browser, but for smaller number of files you can just use the web interface:
- First login into your Amazon AWS at https://console.aws.amazon.com/ and then click "S3" in the menu:
Next you have to create your first bucket where you put your videos:
Select your bucket name (it must be unique), select your location and click "Create":
Once the bucket is created, you need to open it to upload files:
If you are interested in the file protection, also enter the bucket name into "FV WordPress Flowplayer Settings" -> "Amazon S3 Protected Content" -> "Amazon Bucket". Obtaining the access keys is described in the Obtaining the Amazon AWS access credentials section of this document.
You need to disable your caching plugin for logged in users otherwise your links might expire and members often won't be able to play the videos.
- If you use Hyper Cache, it already excludes logged in members from cache (read why we recommend Hyper Cache over other plugins)
- If you use WP Super Cache, turn on Settings -> WP Super Cache -> Advanced -> "Don’t cache pages for known users."
- If you use W3 Total Cache, make sure Performance -> Page Cache -> "Don't cache pages for logged in users" is on
Since protected content is usually for your registered site members only, this should not be a problem.
Once your bucket opens, you will see there are no files yet. You need to click "Upload":
You need to pick the files from your computer and click "Start Upload":
The files starts uploading, you will see a progress bar:
Once the file is uploaded, you will see it in the bucket. Click its name and the open its properties:
In the "Properties" pane, you can see the video URL and various file properties:
- You need to open the Permissions section and make sure "Everyone" is allowed to download and view the file. If it's not so, you can add "Everyone" by clicking"Add more permissions", then selecting "Everyone" from the drop down menu and checking "Open/Download" and "View Permissions". Don't forget to click "Save".
On contrary, if the file needs to remain private, make sure only your account is present in list of permissions and it has all the access. Obtaining the access keys required for playback of private files s described in the Obtaining the Amazon AWS access credentials section of this document.
Last step, double check that the file has the proper Mime type selected. Do so it the "Metadata" tab. This ensures maximum video compatibility. Here are the correct Content-Types (mime types) for various file extensions. It should not be application/octet-stream:
.mp4 video/mp4 .webm video/webm .ogv video/ogg .m3u8 application/x-mpegurl .m4v video/x-m4v
Fix the Content-Type if needed, save the changes. Now you can finally copy the file URL and just put it into our shortcode. Read out basic FV Flowplayer guide to see how to insert videos.
If the video doesn't play, make sure you check it out when you are logged in as admin. You will notice a message in the top left corner of the video. If it's green and "Video OK", it means our video checker found no issues.
Clicking that error reveals error details.
- Access to video forbidden (HTTP 403) - typically means that your video file is private and there are no keys for the bucket. Either make the video public or make sure you setup the access keys.
- The AWS Access Key Id you provided does not exist in our records - means that you provided a bad access key
That's it, the video is up and plays!
Setting up CloudFront distribution - RTMP
This is vital for speedier video buffering times and fast seeking (particularly in Flash mode). Use MP4 files for the RTMP distribution.
Note: We are currently working on adding steps for protected RTMP distribution and CloudFront
Let's start by setting up a normal RTMP distribution (no access restriction)
- First login into your Amazon AWS at https://console.aws.amazon.com/ and then click "CloudFront - Global Content Delivery Network" in the menu:
First you need to create a new distribution:
- In the first step, select "Streaming".
You can also select "Download" if you want to have a non-RTMP cloud distribution of your files. It will simply assign another cloudfront.net domain which you will be able to use with the same bucket for HTTP delivery of your files.
Next step is bigger:
- Origin Domain Name - this should offer you all of your buckets automatically. Pick the one you need.
- Restrict Viewer Access - in case you want to restrict the downloading and use access keys, set this to "Yes"
- Distribution State - make sure it's "Enabled"
- Once you create the distribution, it might the a while until the request is processed. You will see this in the list of your distributions - wait until it says "Deployed" in "Status" column. Once it's ready, copy the "Domain Name", it will form your basic RTMP URL:
Now you can follow our posting an RTMP video TMP 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
- Issues? The video might not play for you if there is some issue. If FV Flowplayer says "flash: Invalid RTMP URL" then doublecheck if:
- 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)
- "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
- if the file really MP4?
Setting up a secured CloudFront distribution
Work in progress, this allows you to use secure keys to manage access to your videos on CloudFront - both HTTP and RTMP. It's similar to Amazon S3 secure keys, but this requires key files.