Adobe Flash Media Playback (FMP), based upon Open Source Media Framework (OSMF), is a replacement for our former Contao extension for embedding Interlake's video player in web pages. Due to the numerous options for customizing and fascinated by its current design we're encouraged to clone that extension and tweak it to support Adobe's FMP instead. This new extension is available in Contao's repository named osmf.

Both extension share a common purpose, functionality and method for installing it, so most of what is written in article on Interlake extension applies here as well. The differences are found in name of introduced insert tag and set of options for customizing the player's appearance and behaviour. This article will focus on these differences ...

Step "3": Embedding Video Playback in a Webpage

The insert tag has been renamed to osmf, so previous tags like

{{interlake::videos/trailer}}

might be rewritten as

{{osmf::videos/trailer}}

to support this new extension.

Options for Customization

While some options like colour customizations are missing, FMP is providing some options for beneficially customizing functional aspects of video playback. This change is reflected by available set of options in insert tag.

This table is listing all options supported by osmf insert tag:

Option Scope Description Example/Default
width FMP & HTML5 width of video playback in pixels
 width=384
height FMP & HTML5 height of video playback in pixels
 height=288
controls FMP & HTML5 Enables rendering control bar. Disabling it might be desired on using custom HTML controls interacting with player.
 controls
autohide FMP Lets hiding control bar after short while without mouse moving over video playback canvas.
 autohide
fullscreen
 FMP Permits to switch to fullscreen mode.
 fullscreen
volume
 FMP Selects initial volume level in percent.
 volume=80
playbutton
 FMP Requests to render large icon on video canvas for improved promotion of clicking to start video playback. playbutton
overlay FMP Makes control bar rendered in a floating style on video canvas. This is ignored if controls are disabled above.
 overlay
autoloop FMP Selects to repeat video playback on meeting end of movie.
 noautoloop
autoplay FMP Enables instant playback on page load.
 noautoplay
buffer FMP Defines number of seconds to be fetch into local buffer prior to starting video playback. Increasing it may improve continuous playback in browsers with lower-bandwidth internet connection. buffer=5
name FMP & HTML5
 This option is selecting ID to be used on flash based player object to be addressed by scripting languages. The related HTML5 video tag gets a derived name with suffix "_html5".
 name=osmf
bgcolor FMP Selects colour to be rendered on video canvas. It's visible when there is no preview or curtain image. The colour is specified in HTML/CSS style, thus consisting of 6 hexedecimal digits with each pair representing amount of red, green and blue colour channel. bgcolor=000000
curtain FMP Addresses local image for being displayed after video playback has finished.
 curtain=tl_files/end.jpg

The following code is an example of how to combine video file selection and options in a single insert tag.:

{{osmf::videos/trailer,nooverlay,volume=60,autoplay,nofullscreen,width=400,height=300}}

Example: Video Tutorial on How To Install This Extension

Though the video shows installation of previous extension for Interlake player, it basically applies to the required procedure here as well. All you have to change is search term, which is "osmf" here.

{{interlake::videos/werbespot}}