Preparations upfront for Footprint Player 1.x

Footprint Player logo

Before this extension can work properly, we need to configure a couple of things.When you previously used S3Media Stream on your site, you can let Footprint Player process the existing shortcode(under certain conditions). New users, please follow the tutorial below, the pdf is of no use to you:

Installation Footprint Player 1.x

Before install, backup your site. Then, install the extension like any other, in the admin section of your site. When installed, you will see an overview of options and in later versions also a "What is new" section.  The extension ships with Video.js 7.6.x. No extra license is required.  In fact, we decided to create this version because JW Player has the bad habit of changing license policy requirements increasingly since 2012.

Amazon Web Services setup

Even if you are familiar with AWS already, some of the information here will be interesting.
There are various scenarios to set up AWS, so here we show those that are common in all situations.  If additional settings are required, they are explained in the additional tutorials which explain how to publish video and audio.

Covered in this section:

  1. Sign up for an acount with AWS
  2. Set up a bucket
  3. Create a Private Keyfile
  4. Create a web distribution

 

1. Sign up for an account with AWS

Go to: https://aws.amazon.com/
If you already have an Amazon.com account, you see a Sign In or Create an AWS Account box like the one shown below (interface may be somewhat different):

sign up aws

Otherwise, you might see a Create a Free Account button. Clicking on that button results in the box shown above. Make sure you create a strong password because if a hacker gets in he/she can hold your account for ransom money, so you don't want to get into that predicament. After that, simply follow the instructions. The system will demand your credit card details but nothing is charged until you effectively use the service and usually, the first year you have a free tier on traffic and uploads. Once you have completed this, go again to https://aws.amazon.com/

On the top right,go to My Account and selected  AWS Managment Console:

preparations1

Once signed in, we can setup our bucket that will contain the files to work with.

2. Set up a bucket

The first time, you are presented with a big list of services, therefore it can be difficult to find what you are looking for. You can use the Search box to find the S3 service:

Create a bucket

Later on, services you have used are listed in the Recently visited services panel, as you can see above. Once you found it, click the S3 link.
If this is the first time, you only see a Create Bucket button, otherwise you may see a list of existing buckets like below:

Create bucket

Click the Create bucket button. You get the following popup form with options:

preparations2

  1. A bucket is more or less like a folder with the exception that the name must be unique all over the network of AWS. It is often best to use your domain name for the main bucket. When you type in a name that already exists, the form throws an error message. Simply try another name then.
  2. Region is the location where your bucket resides. Select one close to your own area, even if you have international visitors. More on that in Set up a web distribution.

The Copy from an existing bucket option can be useful if you have already set up a bucket with various settings and you want to copy those to the new one.

Click Next. A range of Configuration options show up. We concentrate on the ones that are important, the others are not discussed in this tutorials. Scroll down until you see Default Encryption:

preparations3

Select AES-256 Server side encryption. The AWS KMS-Managed encryption offers enhanced security and is covered in a separate tutorial as it is rather complex.  You can always change later. Click Next.

Default Block public access is selected(1). This is problematic when you want to use HLS or MPEG-DASH because it won't be possible to gve access to object via a semi-private web distribution. Nor will it be possible to make an obkject like a poster image public afterwards. Therefore, this setting must be unselected.
It doesn't mean you bucket will be public nor the objects in it:

preparations5

Make sure no box is selected under the Block public access option either. Later, when you have all your videos on board and processed you can change this setting if you want (although HLS will require at least access on object level even notwithstanding these objects are private). Click Next.

The following screen shows an overview of the settings for this bucket:

preparations6

Click Create bucket after you reviewed this. After that, you see your new bucket listed:

preparations7

If Objects can be public is shown, all is well so far. We leave the bucket alone for now.

Before we do anything else, we have to create a Private Key file for progressive download videos and protected download links because we are going to work with CloudFront edge servers. Apart from international access, CloudFront also outperfoms bucket links locally.

3. Create a Private Keyfile

We need a private keyfile to be able to create the signed URLs for web distributions via the extension. It is possible to work with a bucket instead and use the  Access key and Secret key, and indeed, our extension has settings for that, but performance of web distributions is better.
At the top right,you find your username (in this example Miracle Tutorials):

privatekey

Click on it and select My Security Credentials.

You get a popup message that asks you to create IAM users. Although this is a good measure if you want to work with buckets only, it has little consequence when using web distributions:

privatekey2

Click on Continue to Security Credentials. Now you get the following screen:

Security credentials

Click on CloudFront Key Pairs. This opens the Key file panel:

privatekey4

 You can only have a maximum of 2 CloudFront key pairs at any time. The first time, you don't have a key pair, so click on Create New Key Pair.
The next screen asks you to download the key pair files:

Download key pair files

The only one you need is the Private Key File. The Public one just contains the name of the Key Pair and it may lead to confusion later on. Click on the Download Private Key File. Don't change the name of the file because:

privatekey name explained

When you save the file, notice that it starts with pk- (1) and part 2 is the Key pair ID. If you were to change the name, the association between the Key pair ID and the private key file would be lost, therefore hard to remember later on. When saved on your computer, close the window of Create Key pair.
You see your Key Pair ID (now called Access Key ID) listed now, more or less like below:

privatekey7

Remark that the Access Key ID has the same name as the private key file itself and that this Key Pair is active now. We will need that ID and the content of the private key file later on when we complete the settings of S3Media Stream, so write down somewhere the Access Key ID. Now let us proceed to creating a web distribution:

4. Create a web distribution

Go to the top left of the screen and select Services:

web distribution

Use the search box to locate CloudFront:

web distribution2

Now, you get the panel of CloudFront distributions. The first time, no distributions are listed but in this example you see a few:

web distribution3

Click on Create Distribution. There you are presented with two options:

web distribution4

We leave RTMP alone as requires Flash. Select the Get Started button in the Web option. This opens a rather big list of options. Most of them can be left alone, though. We only concern ourselves with the ones we need for now:

web distribution5

By the way, when you click in the i-icon at the right, it gives a little info about each options. The Origin Domain Name is the bucket you want this web distribution for. When you click in that field, it lists all available buckets.Choose the one you just created.
As soon as you do that, you see  options change and a new one is added:

web distribution6

1. The Origin ID is automatically filled in so, we can leave that as is. The Origin Path is not needed on general.
2. Set the new option Restrict Bucket Access to Yes, because we want to make this distribution private.
As soon as you do that, a new option appears:

web distribution7

The Origin Access Identity is used to grant permission to the web distribution to access files from the bucket.

web distribution8

  1. Since you have no Origin Access Identity yet, select Create a New Identity. Otherwise, choose one from the Your Identities list(previous screenshot), because it makes little sense to make multiple Identities, which only leads to confusion (we have been there).
  2. When you create a new identity, the Comment field is filled in automatically for you.  You may give it another name if you like.
  3. For Grant Read Permission on Bucket select Yes, Update Bucket Policy. This will create a policy on the bucket that formally declares that the web distribution may use its files.

Now we look into the options below that.  Scroll a little down until you see this the Default Cache Behavior Settings:

web distribution9

  1. Viewer Protocol Policy regulates how requests for files are treated. You may want to set this to Redirect HTTP to HTTPS, unless you have no SSL certificate (leave it to HTTP and HTTPS in that case)
  2. Allowed HTTP Method should be set to GET, HEAD, nothing else. 

Forward Headers is explained in the tutorial for HLS adaptive streaming. We leave that alone for now.
Scroll down until you see Restrict Viewer Access (Use Signed URLs or Signed Cookies):

web distribution10

Select Yes. This shows an new option:

web distribution11

 Make sure Trusted Signers is selected. Scroll down until you find Logging:

web distribution12

If you turn this on, it is best to create a different bucket for that because this generates a lot of files (each hour). It is best to keep media and logs separated.
Perhaps best leave alone for now, but if you have a second bucket, you can select it in the Bucket for Logs field, for example:

web distribution14

You can set a prefix for the log files to distinguish them from other logs in the Log Prefix field. We are done now, so scroll down until the end of the page and click the Create Distribution button:

web distribution13

 

The web distribution is now in progress.  This will take at least 20 minutes before it is implemented. Click on the Distributions link on the top left to see the status of the distribution you just made:

web distribution15

On the right in the of the distribution list, you see the status of your distribution:

web distribution16

When the status says Deployed, the distribution is ready for use. But we are not going to wait for that, now it is time to fill in the settings of Footprint Player component.

3. Configure Component Footprint Player settings

Open a new tab and go to the admin section of your site and select Components > Footprint Player Settings.

settings

  1. For the Key Pair ID, dig up the Access Key ID you wrote down earlier on.
  2. Locate the Private Key File you have saved and open it. It looks more or less like this:

privatekey9

Copy ALL content of that file, included the beginning and end comments or it won't work. And paste it into the Private Key Content field.

Below that, you see MISCELLANEOUS:

settings2

About text and About link determine the right click context menu of the player on the front end. You can set the About text to any name, but keep it short.
The About link can go to any page you like.

Encrypt paths obfuscates the links in the source code so that the link is not readable for humans, although various developer tools like Firebug and others easily reveal this. It is originally developed to prevent special characters in the signed URLs from being translated into Unicode by other plugins or templates, which otherwise results in an invalid signed URL. But for non-technical visitors it helps to hide the links. You may want to set this to YES once your first media plays successfully. Support may need to see the link if there is a problem.

S3Media Stream legacy is for users who have, or had, S3Media Stream installed and want Footprint Player to process the existing shortcode. This is a quick way to keep embedded media working on your site. It is important to note that S3Media Stream and Footprint Player cannot be active at the same time. Together, you'll get the white screen of death as soon as you set this option to YesThere are two things you need to keep in mind when enabling this:

  1. Footprint Player shortcode won’t be rendered nor exposed when S3Media Stream Legacy shortcode is enabled.
  2. Secondly, certain attributes in S3Media Stream legacy shortcode will be ignored, like stretching, width, height, RTMP streaming (transforms into progressive download if HTML5 Fallback is set), sharing, VR360 (is in the pipeline).

However, on general it should give a good result and save many hours if you have a lot of S3Media Stream shortcodes on your site. We cannot guarantee that we will sustain this option forever, but as long as there are no major changes in the online video industry, we keep this alive.
You are however advised to change {s3mediastream} into {footprint} tags, whenever you have the chance. We are preparing a tutorial how to do this switch properly.

Click Save when you are done. This concludes the set up tutorial. Congratulations, it was a long voyage, no? :-) 
You are ready now to proceed and view the tutorial for the type of media (or protected download link) of your choice.