Using the shortcode wizards

It can be a hassle to write shortcode by hand, especially if you want to integrate poster image, subtitles, logo etc. For this, we created the Shortcode Wizards which you will find in your article editor. Depending on the template used in the admin section and the editor itself, the wizards show either up as buttons underneath the editor or as a submenu:

wizard buttons

But these wizards may also show up next to the icons of the editor or in the Insert menu of the editor depending your configuration. Above we show it how it looks in JCE Editor.

Insert Footprint Player opens the wizard to either embed a single video, audio or a protected download link.
Insert Footprint Playlist opens the wizard to embed a dynamic playlist with video or audio up to 20 items.

in both cases you can add as many instances on a page as you want, but don't overdo it.. Especially playlists create quite some output code, so you best limit it to 5 or 6 playlists on one page. Esthetically, single videos are better than playlists with VideoJS, so if you don't need many videos per page, refrain from using playlsts.

When you click on a wizard, it opens a popup with various options. There are useful hints for each field when you move the mouse over the ?-icon:

wizard hint2

Although each wizard shows a lot of options, you are not obliged to use them all. Once you have successfully inserted a shortcode that works fine on the front end, you can copy it and just change the mediafile, posterimage and eventual captionslink. That way, you can set up a lot of videos quite quickly.

Embedding an HLS adaptive streaming video with the wizard:

Click on the Insert Footprint Player button.  The popup opens. We have to fill in the following fields:

  1. title
  2. Media Type
  3. Media file
  4. URL expiration

All the rest is optional.

For the title you can fill in anything. It is the only field that may contain spaces. This field is primarily for SEO purposes and a reminder for you what the video is about.  In later updates the title will be shown in the video area upon display.

Media type: select Video (HLS,...)

Media file: This is the manifest of the video, usually called index.m3u8 (there is a tutoral on how to prepare a video for HLS streaming.). Give the full path to this file, like https://dxxxxx.cloudfont.net/myfolder/index.m3u8. Where myfolder is the folder where the video segments and manifests reside. 
URL expiration isn't strictly needed, since we are using a semi-private web distribution for this, but it doesn't hurt. Expressed in seconds, like 600 (10 minutes)

Poster image: although the player shows the first frame of the video automatically with HLS and MPEG-Dash, you perhaps want to set a poster image that is more explanatory or interesting. You'll have to prepare this image upfront and upload it either in the images folder of your Joomla installation or in the bucket/folder where the HLS segments reside. Thus, it can be either simply myposterimage.jpg if it resides in the images folder on your site, or the full path if it is located elsewhere, like https://dxxxxxcloudfront.net/myfolder/myposterimage.jpg.

If nothing else if required, scroll down until you see the blue Insert Shortcode button and click on it. The wizard now inserts the shortcode where the cursor is located, for example:

{footprint }title=This is my first video|mediatype=video|mediafile=https://dxxxxx.cloudfront.net/myfirstvideo/index.m3u8|expireseconds=600|posterimage=myposterimage{/footprint}

Note that we added a space after footprint in the first tag so that it is not transformed into a video player on our site. This space won't be there when you use the wizard.

All other fields are explained in the Footprint Player - Shortcodes overview and various tutorials.