Embed a progressive download video (pseudo streaming)

ext plugin This hands-on manual explains how to setup simple public and private progressive download videos. For those used to S3Media Stream, this will very familiar. There is also a wizard in the article editor that generates the shortcode for you where th cursor is located.


The advantage of progressive download is that you can set it up rather easily and it plays practically in all circumstances.
We presume you have followed procedures in the Preparations upfront for Footprint Player and you've uploaded a video.

Open the article in which you want to place the video. Place the cursor where you want to add the video.
Note: in all shortcode examples on this site, there is a space after s3mediastream right before the end of the opening tag. This is to prevent the extension from showing a player on this site. Some examples show on several lines for convenience, but real shortcode should be on one line. Therefore, remove this space on your site if you copy the shortcode from here.

{footprint }....{/footprint}

The minimum attributes you probably need are:

  1. mediatype
  2. title
  3. mediafile
  4. aspectratio
  5. posterimage
  6. expireseconds

Basic example shortcode

{footprint }mediatype=video|title=This is the title|mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4|posterimage=https://.....myposter.jpg|aspectratio=16:9|expireseconds=600{/footprint}

mediatype=video (for progressive download video and HLS m3u8 manifests.)

title is optional, primarily for SEO. Currently, the title doesn't show up in the video area, but in one of the coming updates, we'll fix that.
This can contain any alphanumeric characters, including spaces. This is the only attribute that can contain spaces. Don't place spaces anywhere else in the shortcode.

mediafile is the full path to the video if you use a web distribution, like: 
mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4 
When placed in a folder within the bucket, precede the name by the folder path, like;
mediafile=https://dxxxxx.cloudfront.net/myfolder/myvideo.mp4

aspectratio is the relationship between width and height of the video. For HD, this is 16:9 and for SD 4:3. Any custom values are possible, like 160:85, 14:9 etc.
The player is responsive, therefore width and height are determined by the aspectratio and the template in which the video will reside. That said, you can limit the width via the Default settings in the plugin Content - Footprint Player.
Go to Extensions > Plugin Manager and locate Content - Footprint Player to set those defaults. Below you find an example with aspectratio excluded:

{footprint }title=This is the title|mediatype=video|mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4|posterimage=https://.....myposter.jpg{/footprint}

posterimage sets a poster image as the preview as you can see in the screenshot above. If omitted, you get a black rectangle instead (HLS adpative streaming shows the first frame of the video automatically). If you just fill in the name of the poster image, the extension presumes you placed it in the image folder of your Joomla installation, thus we could have:

{footprint}title=This is the title|mediatype=video|mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4|posterimage=myposter.jpg{/footprint}

expireseconds is a numerical value in seconds to create the signed URL for private video, like expireseconds=600.
Although you can set this as a default, you may want to set this per item, because it should be the length of the video in seconds with a little reserve.
this is especially important for iPad. Thus, for a video of 10 minutes, use 800 or there about.

{footprint }title=This is the title|mediatype=video|mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4|posterimage=https://.....myposter.jpg|expireseconds=800{/footprint}

The full list of shortcode attributes can be found here: Footprint Player - Shortcodes

Advanced settings

We continue to use the basic example, adding more atrributes as we go along.

Adding a watermark

Watermarks can be used sitewide or per instance. Generally, you may want to set this in the Default settings, only overriding it where needed. You could have the logo of your site in the default settings, while an individual instance could have an image of a book, linking to a Buy now page. 
This attribute has a set of 3 options that go together: logologopositionlogolink. Yet, they must be divided by a | pipe character, like this:

logo=mywatermark.png|logoposition=top-left|logolink=https://....... 

If you only use the name of the image for the logo, the extension presumes you placed it in the images folder of your Joomla installation. Subfolders are possible when you include them, like myfolder/mywatermark.png, which resort to: http://mydomain.com/images/mywatermark.png.
It is also possible to link a logo from external locations, like https://dxxxxx.coudfront.net/mywatermark.png
Note: the name watermark.png is reserved for the Dynamic watermark feature which shows the name of the user, IP address and date. This can be activated by downloading the watermark script in the download area. It is a separate script you have to place via FTP. See Dynamic watermark to prevent screen capturing.

The logoposition has 4 locations: top-left, top-right, bottom-left, bottom-right

The logolink is always full path and it can go to any page.

{footprint }mediatype=video|title=This is the title|mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4|posterimage=https://.....myposter.jpg|expireseconds=800|aspectratio=16:9|logo=mywatermark.png|logoposition=top-left|logolink=https://mydomain.com{/footprint}

Adding a fallback video

Although rather rare, some older devices may not support the mp4 codec. You will know soon enough when a visitors complains about this. Footprint Player has 2 fallback options, namely source2 and source3. Fill in the full path to another version of the video, for example webm.  Thus we get:

{footprint }mediatype=video|title=This is the title|mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4|source2=https://dxxxxx.cloudfront.net/myvideo.webm|posterimage=https://.....myposter.jpg|expireseconds=800|aspectratio=16:9|logo=mywatermark.png|logoposition=top-left|logolink=https://mydomain.com{/footprint}

To make it totally bulletproof, you can add the thirdth source in ogg format, for example, like:

source2=https://dxxxxx.cloudfront.net/myvideo.webm|source3=https://dxxxxx.cloudfront.net/myvideo.ogv

Adding Captions/Subtitles

subtitles

It is possible to set a single or multiple language versions of subtitles/captions. This has 2 options that belong together; captionslink and captionsstate, Yet, they must be divided by a | pipe character, like the logo attribute. But captionsstate can be set via the Default settings plugin. Therefore, you don't need to add it in the shortcode but you can overrule the default setting if you like..
In order for subtitles to display properly accross browsers, we need to indicate, apart from the name, the language label and the language code. Therfore, we need to use a fixed convention for the name of the subtitle file ( .vtt format only).  For example: mysubtitle-English-en
where English is the label for the language and en is the language code. name, language label and language code are divided by a hyphen.

captionsstate (1 or 0) gives the choice to have the subtitles show immediately upon play (Captions behavior), or use the subtile behavior, which requires the user to activate subtitles via the CC button. Default is 0, meaning it doesn't show up automatically. Below an example with one subtitle file:

{footprint }mediatype=video|title=This is the title|mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4|
source2=https://dxxxxx.cloudfront.net/myvideo.webm|posterimage=https://.....myposter.jpg|expireseconds=800|aspectratio=16:9|logo=mywatermark.png|logoposition=top-left|logolink=https://mydomain.com|captionslink=mysubtitle-English-en|captionsstate=1{/footprint}

and here an example with 3 diferent language versions:

{footprint }mediatype=video|title=This is the title|mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4|source2=https://dxxxxx.cloudfront.net/myvideo.webm|posterimage=https://.....myposter.jpg|
expireseconds=800|aspectratio=16:9|logo=mywatermark.png|logoposition=top-left|logolink=https://mydomain.com|captionslink=mysubtitle-English-en,mysubtitle-Francais-fr,mysubtitle-Deutsch-de|captionsstate=1{/footprint}

Note that multiple subtitles are divided by a comma without space. Again, note also that the .vtt extension shouldn't be included. The web tools console will give an error when the naming convention is not respected. It also gives an error is the wrong kind of subtitle file is used or if it contains errors.

If the defaults are set, ommit the last two options, like this:

{s3mediastream }mediatype=video|title=This is the title|mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4|posterimage=https://.....myposter.jpg|expireseconds=800|aspectratio=16:9|logo=mywatermark.png|logoposition=top-left|logolink=https://mydomain.com|sharing=1|captionslink=https://dxxxx.cloudfront.net/mysubtitle-English.vtt{/s3mediastream}

When you are done adapting the example shortcode, save the article.  Does the video play on the front end?  Congratulations!
If not, check out below:

Trouble shooting

Problems with shortcodes when pasting

Sometimes, the added code changes into a link in the visual editor.  if that happens, select the code and break the link because it prevents the video from showing up since the editor added unwanted code.

You recognize it when it looks like this:

break link2

Sometimes, the short code is partially linked.  Remove any links within the short code without removing the short code itself.

Hidden formatting in shortcode

Sometimes when you copy and paste short codes from other documents,hidden formatting may be included. The player may show up as a black rectangle or not at all. Check the short code in Code view and remove any formatting.  Or simply select the shortcode and push the Remove formatting icon as a matter of routine.  It saves you from the aggrevation of goig back and forth.

The media could not be loaded, either because the server or network failed or because the format is not supported

You made a typo in the path to the video or you forgot to include expiringseconds with a private video. Or something is wrong with the format of the video. You may need to reconvert it. Before you consider that option, set source2 with another format. If that plays, your primary video has a codec problem(if the link is correct).

Crossdomain access denied

It generally has nothing to do with crossdomain settings because the player doesn't use Flash for this mediatype.  Usually a problem with permissions on AWS or the wrong path to a video is generated. Or it may have something to do with the signed URL.
It is important to realize that the expiring time has no real relationship with the length of a video or audio. Once the video is linked to in the player, it will play the whole movie, even if that is three hours. But if you leave the page open for ten minutes before you click, the player will throw an error because the link is expired by then.

Consider, if you play a range of videos on one page, you need to calculate how much time it will take for the visitor to play them all and base your expiring time on that with some reserve. Otherwise, some of the videos will refuse to play. When the visitor refreshes the page, new URLs are generated, starting from scratch again.
Another important consideration is that the expiring time is calculated according to your server.  If the time is off, the expiring will not happen on the dot. In general, it is a good idea to build in some reserve time. 

Player or controls look out of place

 

Many themes/templates define their own styles for video and audio. Although our player uses its own css classes, theme’s rules may override those of the player.  In that case, you need to adapt the theme.
We cannot give you support for this because there are thousands of themes out there. Ask the template author to make the template compatible with videojs.

Player doesn’t show

Check whether the aspectratio is set correctly. With shortcode from older versions of S3Media Stream, this may have been set to a percentage or just a number. The format should be like this: aspectratio=16:9 or aspectratio=16:2 or aspectratio=4:3, etc.

Have an undocumented error?

Contact us at via the contact form and we'll respnd as soon s possible.

ext plugin This hands-on manual explains how to setup simple public and private progressive download videos. For those used to S3Media Stream, this will very familiar. There is also a wizard in the article editor that generates the shortcode for you where th cursor is located.


The advantage of progressive download is that you can set it up rather easily and it plays practically in all circumstances.
We presume you have followed procedures in the Preparations upfront for Footprint Player and you've uploaded a video.

Open the article in which you want to place the video. Place the cursor where you want to add the video.
Note: in all shortcode examples on this site, there is a space after s3mediastream right before the end of the opening tag. This is to prevent the extension from showing a player on this site. Some examles show on several lines for convenience, but real shortcode should be on one line. Therefore, remove this space on your site if you copy the shortcode from here.

{footprint }....{/footprint}

The minimum attributes you probably need are:

  1. mediatype
  2. title
  3. mediafile
  4. aspectratio
  5. posterimage
  6. expireseconds

Basic example shortcode

{footprint}mediatype=video|title=This is the title|mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4|posterimage=https://.....myposter.jpg|aspectratio=16:9{/footprint}

mediatype=video (for progressive download video and HLS m3u8 manifests.)

title is optional, primarily for SEO. Currently, the title doesn't show up in the video area, but in one of the coming updates, we'll fix that.
This can contain any alphanumeric characters, including spaces. This is the only attribute that can contain spaces. Don't place spaces anywhere else in the shortcode.

mediafile is the full path to the video if you use a web distribution, like: 
mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4 
When placed in a folder within the bucket, precede the name by the folder path, like;
mediafile=https://dxxxxx.cloudfront.net/myfolder/myvideo.mp4

aspectratio is the relationship between width and height of the video. For HD, this is 16:9 and for SD 4:3. Any custom values are possible, like 160:85, 14:9 etc.
The player is responsive, therefore width and height are determined by the aspectratio and the template in which the video will reside. That said, you can limit the width via the Default settings in the plugin Content - Footprint Player.
Go to Extensions > Plugin Manager and locate Content - Footprint Player to set those defaults. Below you find an example with aspectratio excluded:

{footprint }title=This is the title|mediatype=video|mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4|posterimage=https://.....myposter.jpg{/footprint}

posterimage sets a poster image as the preview as you can see in the screenshot above. If omitted, you get a black rectangle instead (HLS adpative streaming shows the first frame of the video automatically). If you just fill in the name of the poster image, the extension presumes you placed it in the image folder of your Joomla installation, thus we could have:

{footprint }title=This is the title|mediatype=video|mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4|posterimage=myposter.jpg{/footprint}

expireseconds is a numerical value in seconds to create the signed URL for private video, like expireseconds=600.
Although you can set this as a default, you may want to set this per item, because it should be the length of the video in seconds with a little reserve.
this is especially important for iPad. Thus, for a video of 10 minutes, use 800 or there about.

{footprint }title=This is the title|mediatype=video|mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4|posterimage=https://.....myposter.jpg|expireseconds=800{/footprint}

The full list of shortcode attributes can be found here: Footprint Player - Shortcodes

Advanced settings

We continue to use the basic example, adding more atrributes as we go along.

Adding a watermark

Watermarks can be used sitewide or per instance. Generally, you may want to set this in the Default settings, only overriding it where needed. You could have the logo of your site in the default settings, while an individual instance could have an image of a book, linking to a Buy now page. 
This attribute has a set of 3 options that go together: logologopositionlogolink. Yet, they must be divided by a | pipe character, like this:

logo=mywatermark.png|logoposition=top-left|logolink=https://....... 

If you only use the name of the image for the logo, the extension presumes you placed it in the images folder of your Joomla installation. Subfolders are possible when you include them, like myfolder/mywatermark.png, which resort to: http://mydomain.com/images/mywatermark.png.
It is also possible to link a logo from external locations, like https://dxxxxx.coudfront.net/mywatermark.png
Note: the name watermark.png is reserved for the Dynamic watermark feature which shows the name of the user, IP address and date. This can be activated by downloading the watermark script in the download area. It is a separate script you have to place via FTP. See Dynamic watermark to prevent screen capturing.

The logoposition has 4 locations: top-left, top-right, bottom-left, bottom-right

The logolink is always full path and it can go to any page.

{footprint }mediatype=video|title=This is the title|mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4|posterimage=https://.....myposter.jpg|expireseconds=800|
aspectratio=16:9|logo=mywatermark.png|logoposition=top-left|logolink=https://mydomain.com{/footprint}

Adding a fallback video

Although rather rare, some older devices may not support the mp4 codec. You will know soon enough when a visitors complains about this. Footprint Player has 2 fallback options, namely source2 and source3. Fill in the full path to another version of the video, for example webm.  Thus we get:

{footprint }mediatype=video|title=This is the title|mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4|source2=https://dxxxxx.cloudfront.net/myvideo.webm|posterimage=https://.....myposter.jpg|expireseconds=800|aspectratio=16:9|logo=mywatermark.png|logoposition=top-left|logolink=https://mydomain.com{/footprint}

Adding Captions/Subtitles

It is possible to set multiple language versions of subtitles/captions. This has 2 options that belong together; captionslink and captionsstate, Yet, they must be divided by a | pipe character, like the logo attribute. But captionsstate can be set via the Default settings plugin. Therefore, you don't need to add it in the shortcode but you can overrule the default setting if you like..
In order for subtitles to display properly accross browsers, we need to indicate, apart from the name, the language label and the language code. Therfore, we need to use a fixed convention for the name of the subtitle file ( .vtt format only).  For example: mysubtitle-English-en
where English is the label for the language and en is the language code. name, language label and language code are divided by a hyphen.

subtitles

If you only use one language, this choice won't show, but best use this convention anyway.

captionsstate (1 or 0) gives the choice to have the subtitles show immediately upon play (Captions behavior), or use the subtile behavior, which requires the user to activate subtitles via the CC button. Default is 0, meaning it doesn't show up automatically. Below an example with one subtitle file:

{footprint }mediatype=video|title=This is the title|mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4|source2=https://dxxxxx.cloudfront.net/myvideo.webm|posterimage=https://.....myposter.jpg|expireseconds=800|aspectratio=16:9|logo=mywatermark.png|logoposition=top-left|logolink=https://mydomain.com|
captionslink=mysubtitle-English-en|captionsstate=1{/footprint}

and here an example with 3 diferent language versions:

{footprint }mediatype=video|title=This is the title|mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4|source2=https://dxxxxx.cloudfront.net/myvideo.webm|posterimage=https://.....myposter.jpg|
expireseconds=800|aspectratio=16:9|logo=mywatermark.png|logoposition=top-left|logolink=https://mydomain.com|captionslink=mysubtitle-English-en,mysubtitle-Francais-fr,mysubtitle-Deutsch-de|captionsstate=1{/footprint}

Note that multiple subtitles are divided by a comma without space. Again, note also that the .vtt extension shouldn't be included. The web tools console will give an error when the naming convention is not respected. It also gives an error is the wrong kind of subtitle file is used or if it contains errors.

If the defaults are set, ommit the last two options, like this:

{s3mediastream }mediatype=video|title=This is the title|mediafile=https://dxxxxx.cloudfront.net/myvideo.mp4|posterimage=https://.....myposter.jpg|expireseconds=800|aspectratio=16:9|logo=mywatermark.png|logoposition=top-left|logolink=https://mydomain.com|sharing=1|captionslink=https://dxxxx.cloudfront.net/mysubtitle-English.vtt{/s3mediastream}

When you are done adapting the example shortcode, save the article.  Does the video play on the front end?  Congratulations!
If not, check out below:

Trouble shooting

Problems with shortcodes when pasting

Sometimes, the added code changes into a link.  if that happens, select the code and break the link because it can prevent the video from showing up since the editor added unwanted code.

you recognize it when it looks like this:

plugin-interface8

Sometimes, the short code is partially linked.  Remove any links within the short code without removing the short code itself.

Hidden formatting in shortcode

Sometimes when you copy and paste short codes from other documents,hidden formatting may be included. The player may show up as a black rectangle or not at all. Check the short code in Code view and remove any formatting.  Or select the shortcode and push the Remove formatting icon.

File cannot be found

You made a typo in the path to the video or you forgot to include expiringseconds with a private video.

Format not accepted or a similar message

Something is wrong with the format of the video. You may need to reconvert it. 

Crossdomain access denied

It generally has nothing to do with crossdomain settings because the player doesn't use Flash for this mediatype.  Usually a problem with permissions on AWS or the wrong path to a video is generated. Or it may have something to do with the signed URL.
It is important to realize that the expiring time has no real relationship with the length of a video or audio. Once the video is linked to in the player, it will play the whole movie, even if that is three hours. But if you leave the page open for ten minutes before you click, the player will throw an error because the link is expired by then.

Consider, if you play a range of videos on one page, you need to calculate how much time it will take for the visitor to play them all and base your expiring time on that with some reserve. Otherwise, some of the videos will refuse to play. When the visitor refreshes the page, new URLs are generated, starting from scratch again.

Another important consideration is that the expiring time is calculated according to your server.  If the time is off, the expiring will not happen on the dot. In general, it is a good idea to build in some reserve time.