Today many websites include videos embedded in their pages. And there are many different ways for doing so. At the one hand there are portals like YouTube that provide opportunity to upload a video there and then get some code snippet to embed a reference to that remotely hosted video in any webpage. On the other hand there have been Adobe Flash-based video players for years now. Most CMS include a feature to integrate such an application for playing back video files hosted inside the CMS. Today more and more browsers start supporting native video playback according to new HTML5 standard thus requiring no separate Flash based videoplayer application and this way not even requiring Adobe Flash support in client's browser. Finally, this last option implies support for special mobile devices such as Apple's iPhone or iPad lacking any support for Adobe Flash.

Our little extension to CMS Contao aims to provide a mixture of all these ways. All video files are hosted in your CMS' backend. With a syntactically simple and well-structured insert tag it's possible to embed the video in your pages. The resulting code is either requesting to use Adobe Flash-based, freely available videoplayer from Interlake Media unless supporting one of the additionally provided video formats by HTML5 video support.

Installing Extension

  1. Log in to your Contao installation as an administrator and open Extension Repository. There you'll find out extension by looking for Interlake or selecting keyword Video from related dropdown.
  2. In result list choose "Interlake VideoPlayer" by clicking the name. This will open extension's detail view. Click on Install at end of this page.
  3. On install page you won't need to add any license key or similar, thus clicking on Proceed at bottom. A note will appear there as soon as all files of extension have been downloaded and installed to your CMS. Pay attention to any error messages there!
  4. To complete installation click on Proceed. You'll be told about database not requiring any updates, so click OK.
  5. This will guide you to the Extension Manager listing all installed extension. It should include Interlake VideoPlayer now. Check for any notes on failed installation here, again.

Usage

Step 1: Preparing Videos

Usually videos aren't locally available in a format suitable for web-based playback. Videos tend to be quite large and often used special encodings such as MEPG2-DV. Due to their size you'll need to downscale and downsample your video. Since your videos won't be streamed but downloaded here for playback, you need to consider bandwidth of your site's visitors as well as cost for higher traffic on your webserver. Due to the videos' format you'll need to convert them.

Basic Format: Flash Video (FLV)

Any video needs to be converted to a special format for playing it back in a Adobe Flash-based player such as the one used here. This format is known as FLV and files are considered to have lower-case extension .flv here.

Additional Support for HTML5

In HTML5 it's possible to directly point a supporting browser to a video's file URL for native playback. Since browsers support different formats and encodings by integrating different decoders you can't simply provide exactly one file for HTML5-based playback. Instead you have to provide several ones. Each of these file references include information on video's format so browsers may decide which one to use for playback according to its individual capabilities.

To support most of today's browsers in HTML5 video playback you'll need to provide your video in at least two to three different formats in addition to the one for Adobe Flash-based playback:

H264

H264 is currently supported by Apple Safari version 3.1+ (including iPhone/iPad), Google's Chrome version 3+ and Microsoft Internet Explorer version 9, which is still in development.

The H264 counterpart is considered to have lower-case file extension .mp4 residing in same folder as all other related videos.

On converting to H264 you should take care of selecting proper profile for encoding. Otherwise some devices and browsers basically supporting this format won't play back your H264 encoded file.

Ogg-Theora

This format is originating from Open Source community and is currently supported by Mozilla Firefox version 3.5 and above. Google's Chrome since version 3.0 and Opera version 10.5+ are supporting this format as well.

The Ogg-Theora counterpart is considered to have lower-case file extension .ogg residing in same folder as all other related videos.

WebM

WebM format has been developed specially for web based playback. It is currently supported by Google's Chrome version 6+ and Opera version 10.6+. Mozilla Firefox will be supporting this format in version 4+.

The WebM counterpart is considered to have lower-case file extension .webm residing in same folder as all other related videos.

Step 2: Uploading Video

  1. In Contao backend open File Manager and select a dedicated folder for your video files or create one. E.g. it might be folder called "videos" residing in root folder of Contao's file manager view.
  2. Upload your FLV video file to that folder. Repeat this for all other converted copies of that file.
    Ensure to have proper extension prior to uploading file since changing extension isn't available in Contao's file manager anymore!
  3. Optionally take a snapshot of your video and save it in JPEG format using lower-case file extension .jpg. Upload this file to the same folder as the video file(s).
  4. Make all uploaded files' sharing name excluding extension as required.
  5. Write down relative pathname of used upload folder and those files' shared filename resulting in your video collection's relative pathname. E.g. consider your files being called trailer.flv, trailer.mp4, trailer.ogg, trailer.webm and trailer.jpg all residing in subfolder videos used as an example before. Then relative pathname of this video collection to remember is 
    videos/trailer

Step 3: Embedding Video Playback in a Webpage

Open an article of your choice. Select a proper content element from resulting list view or add another one. It might be of type "text" or any other supporting input of insert tags. At any point in your text insert the following code, a so-called "insert tag":

{{interlake::videos/trailer}}

This example here matches considerations above. The careful reader might realize the relative pathname of video collection previously uploaded for embedding now. On saving changed content element and switching to preview now a video player appears instead of entered insert tag inside your page. The resulting size of video playback is the quarter of PAL-SD by default.

Options for the Insert Tag

The size of video playback as well as other customizations are available for adjustment by using additional arguments in used insert tag. In insert tag given for example above there is a single argument, only: the pathname of video collection to be played back. It might be extended by further optional arguments separated by comma from each other.

The extension supports several options basically grouped in two different kinds. First there are options requiring a value assigned. And second there are boolean options not taking any value but either enabling or disabling an associated feature. The former options consist of a name, an assignment operator and a syntactically fixed value. The latter consist of a name on enabling the related feature and might be prepended by prefix "no" to explicitly disable it.

Furthermore only a few options affect HTML5 playback. Most are affecting playback in integrated player from Interlake, only. Options "width" and "height" are affecting either.

Here comes the list of currently supported options:

Option Scope Description Example/Default
width Interlake & HTML5 Width in pixels of video playback width=384
height Interlake & HTML5 Height in pixels of video playback
 height=288
controls HTML5 Enables browser's controls. nocontrols is available for hiding them, which is required when there are controls embedded separately in HTML document
 controls
stop Interlake Shows or hides (nostop) stop button control.
 stop
scrub
 Interlake Shows or hides progress bar providing instant navigation. scrub
volume
 Interlake Enables volume control.
 volume
shading
 Interlake Selects to use gradients for player background and buttons.
 shading
overlay Interlake Requests to have control bar rendered on top of video.

By disabling this option the control bar is rendered below video and thus might require adjustment to selected height of video playback.

 overlay
time Interlake Shows remaining time of video playback.
 time
autoplay Interlake Selects to instantly start playback on page load.
 noautoplay
buffer Interlake Sets length of video to load prior to starting playback.

Increasing this value delays start of playback but supports buffers to be loaded sufficiently for hassle-free playback on clients with limited bandwidth.

 buffer=5
name Interlake This option selects name to use internally on Adobe Flash-control. It is improving support for interacting with control from external JavaScript code embedded in page. name=interlake
bgcolor Interlake The option selects background colour of Adobe Flash-control. This option has no affect on clients using uptodate releases of Adobe Flash-player due to using transparent background mode supported then.

Colours are provided in the usual HTML-style by a sequence of 6 hexadecimal digits each pair providing colour value per channel.

 bgcolor=000000
playercolor Interlake playercolor selects background colour of player, e.g. visible as a frame around video.
 playercolor=808080
buttoncolor Interlake Adjusting colour of player button controls is available by this option. buttoncolor=ffffff
iconcolor Interlake
 This option sets colour to use on rendering icons and text.
 iconcolor=ffff00

The following example is changing video size to 400x300 pixels and adjusting some of the controls and behaviours in using Adobe Flash-based video player:

{{interlake::videos/trailer,notime,level=60,autoplay,nostop,width=400,height=300}}