DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

EXT:miflowplayer

Author:Ines Willenbrock
Created:2008-09-24T23:24:14
Changed by:Michael Schulze
Changed:2010-02-03T10:18:38
Classification:miflowplayer
Description:The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists. If your manual is NOT in english, see next tab "language" ---- forEditors (use this for editors / german "Redakteure") forAdmins (use this for Administrators) forDevelopers (use this for Developers) forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) see more: http://wiki.typo3.org/doc_template#tags ----
Author:Michael Schulze
Email:info@michael66.de
Info 4:
Language:en

img-1 img-2 EXT:miflowplayer - miflowplayer

EXT:miflowplayer

Extension Key: miflowplayer

Language: en

Keywords:

Copyright 2000-2009, Michael Schulze, <info@michael66.de>

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.org

Table of Contents

EXT:miflowplayer 1

`Introduction 3 <#1.1.Introduction|outline>`_

What does it do? 3

Getting started 3

`Screen shots 5 <#1.2.Screen%20shots|outline>`_

`Users manual 6 <#1.3.Users%20manual|outline>`_

`Configuration 7 <#1.4.Configuration|outline>`_

`Change log 10 <#1.5.Change%20log|outline>`_

Introduction

The miflowplayer extension enables an easy way to place videos on the webpage by using the Flowplayer. The Flowplayer is an Open Source (GPL 3) video player for the web. For more informations see http://flowplayer.org .

The basic version of the Flowplayer which includes the Flowplayer logo on fullscreen or in the background is free to use. Commercial use is allowed. All licenses including these without any branding can be found here: http://flowplayer.org/download/index.html

What does it do?

One frontend plugin enables the player and you can choose any FLV or F4V video you want. You can define the standard configurations (like size or elements in the control bar) in TypoScript and overwrite them in every plugin. At the moment only the default skin of the Flowplayer is available.

Multiple videos on one page are supported.

img-3

img-4

Getting started

Install extension

Install the latest version from the Repository and include the static EXT-templates.

img-5

No additional database tables or fields are needed and the extension only creates an upload folder for videos and images.

Screen shots

img-6 img-7

Users manual

First you have to choose the plugin Flowplayer which is available in the “New content element wizard”. Then choose the video file and the video is ready. All settings you don't edit will be chosen from the TS-Setup.

If you want you can define a preview image. This image is only shown if the autostart option is disabled (in tab “Player(Clip)”). By default autostart is disabled.

Configuration

In TS you can set every configuration from the Flowplayer. At the moment playlists are not supported. All possible configurations for the Flowplayer can be found here: http://flowplayer.org/documentation/configuration/

((generated))

((generated))
Example

The original Flowplayer configuration (Javascript) is like this:

flowplayer("player", "flowplayer.swf", {
    clip: {
             autoPlay: false,
            autoBuffering: true
 }
});

The TypoScript-Setup is:

plugin.tx_miflowplayer.player {
   // All configs for the flowplayer video
     config {
            param {
                     clip {
                              autoPlay = false
                            autoBuffering = true
                        }
           }
   }
}
tt_content.list.20.tx_miflowplayer_player < plugin.tx_miflowplayer.player

You can define any parameters from the Flowplayer you want. Another example for the controlbar:

flowplayer("player", "flowplayer.swf", {
        plugin: {
           control: {
                  height: '24px',
                     opacity: 1.0,
                       borderRadius: '0px',
                   autoHide: "always",
                       play: true,
                 volume: true,
                       mute: true
          }
   }
});

In Typoscript-Setup:

plugin.tx_miflowplayer.player {
       // All configs for the flowplayer video
     config {
            param {
                     plugin {
                            controls {
                                  height = '24px'
                                     opacity = 1.0
                                       borderRadius = '0px'
                                        autoHide = "always"
                                       play = true
                                 volume = true
                                       mute = true
                         }
                   }
           }
   }
}
tt_content.list.20.tx_miflowplayer_player < plugin.tx_miflowplayer.player
General Video Settings
plugin.tx_miflowplayer.player.config.video
width

Property

width

Data type

integer

Description

The default width of all videos. This could be changed in every plugin.

Default

480

height

Property

height

Data type

integer

Description

The default height of all videos. This could be changed in every plugin.

Default

360

Parameters
plugin.tx_miflowplayer.player.config.param
key

Property

key

Data type

string

Description

If you buy a license than the key has to be placed here.

Default

clip.autoPlay

Property

clip.autoPlay

Data type

boolean

Description

Chose true or false as default for all videos.

Default

false

clip.scaling

Property

clip.scaling

Data type

string

Description

Setting which defines how video is scaled on the video screen. Available options are:

  • fit: Fit to window by preserving the aspect ratio encoded in the file's metadata.
  • half: Half-size (preserves aspect ratio)
  • orig: Use the dimensions encoded in the file. If the video is too big for the available space, the video is scaled using the 'fit' option.
  • scale: Scale the video to fill all available space. Ignores the dimensions in the metadata. This is the default setting.

Default

“fit”

clip.loop

Property

clip.loop

Data type

boolean

Description

Repeat the video.

Default

False

clip.autoBuffering

Property

clip.autoBuffering

Data type

boolean

Description

Flag indicating whether loading of clip into player's memory should begin straight away. When this is trueand autoPlay is falsethen the clip will automatically stop at first frameof the video.

Default

false

clip.fadeInSpeed

Property

clip.fadeInSpeed

Data type

integer

Description

Time in milliseconds to fade from zero to full opacity upon commencement of video playback.

Default

2000

clip.fadeOutSpeed

Property

clip.fadeOutSpeed

Data type

integer

Description

Time in milliseconds to fade from full to zero opacity upon completion of video playback.

Default

2000

canvas.background

Property

canvas.background

Data type

string

Description

Defines the background of the video stage

Default

'#000000'

plugins.controls.autoHide

Property

plugins.controls.autoHide

Data type

string

Description

Hides the controlbar by viewing. Chose “always” or “never”.

Default

“always”

plugins.controls.play

Property

plugins.controls.play

Data type

boolean

Description

Shows the play button

Default

true

plugins.controls.stop

Property

plugins.controls.stop

Data type

boolean

Description

Shows the stop button

Default

false

plugins.controls.volume

Property

plugins.controls.volume

Data type

boolean

Description

Shows the volume bar

Default

true

plugins.controls.mute

Property

plugins.controls.mute

Data type

boolean

Description

Shows the mute button

Default

true

plugins.controls.time

Property

plugins.controls.time

Data type

boolean

Description

Shows the time

Default

true

plugins.controls.fullscreen

Property

plugins.controls.fullscreen

Data type

boolean

Description

Shows the fullscreen button

Default

true

plugins.controls.playlist

Property

plugins.controls.playlist

Data type

boolean

Description

Shows the playlist buttons (not supported yet)

Default

false

plugins.controls.scrubber

Property

plugins.controls.scrubber

Data type

boolean

Description

Shows the timeline

Default

true

plugins.controls.width

Property

plugins.controls.width

Data type

string

Description

The width of the controlbar in % or px

Default

'98%'

plugins.controls.bottom

Property

plugins.controls.bottom

Data type

integer

Description

Margin-bottom in px

Default

5

plugins.controls.left

Property

plugins.controls.left

Data type

string

Description

Position of controlbar (default center)

Default

'50%'

plugins.controls.borderRadius

Property

plugins.controls.borderRadius

Data type

integer

Description

Round corners of the controlbar

Default

15

Feel free to add more configurations in your TypoScript.

Change log

((generated))

Beta 0.1.1

Bugfix: Now the JS-Output is correctly, so the IE7+ can handle it.

Beta 0.1.0
  • First version of documentation
  • Clearing Static TypoScript Setup:
Beta 0.0.4

Bugfix: In version 0.0.3 the href attribute of the A-Tag was broken so no video could be shown if no preview image was selected.

10