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: Media Center

Author:Kasper Skårhøj
Created:2002-11-01T00:32:00
Changed by:Patrick Rodacker
Changed:2009-11-18T10:48:46.430000000
Author:Patrick Rodacker
Email:patrick.rodacker@the-reflection.de
Info 3:
Info 4:

EXT: Media Center

Extension Key: media_center

Copyright 2008, Patrick Rodacker , < http://www.the-reflection.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.com

Table of Contents

EXT: Media Center 1

Introduction 1

What does it do? 1

Screenshots 2

Requirements 4

Player License 4

Credits 4

Users manual 4

Installation 4

Static template 4

Constant Editor 5

Media Center Files 5

Inserting Plugin 8

Typoscript mode 8

Streaming 8

Configuration 8

Flexform Configuration 8

Typoscript 11

Export 13

Known problems 13

To-Do list 13

Changelog 14

Introduction

What does it do?

This extension provides a Media Center as frontend plugin using the JW FLV Media Player showing multiple media files.The key features are:

Integrating JW FLV Player 4.2.90 with full control over the available configuration settings

Intelligent width and height settings depending on playlist positioning (right, bottom, over)

Playlist of media files supporting thumbnail, title and description for each file

New Record “Media Center File” defining local or external files

Support of different media file types: FLV7 video, FLV8 video, Youtube video, MP3 audio, JPG images, GIF images, PNG images

File references to local files instead of copied files in the upload branch for large video files (the path has to be assigned as relative or absolute path manually using the link wizard)

Rendering playlist of the content element as RSS feed (various formats supported, see Configuration section).

Multiple players on one page

Flash detection and output of alternative contente element for flash versions not matching the required version using the swfobject 2.1 http://code.google.com/p/swfobject/

noscript output for users with disabled or missing javascript browser support using via content element selection

Skinnable layout of the player. Extension ships with five example skins.

Support for multilingual media center files

Screenshots

img-1

The first image shows the Media Center player with the playlist position set to right .

img-2

The second image shows the Media Center with the playlist position set to bottom .

img-3

The third image shows the Media Center with the playlist position set to over .

Requirements

  • The clients browser must support Javascript
  • The JW FLV Player 4.2 needs at least an installed flash 9.0.0 compatible plugin at clients side.

Player License

The JW Players are licensed under a Creative Commons license. It allows you to use, modify and redistribute the script for noncommercial purposes. For all other use, buy a commercial license .

You must buy a commercial license if:

Your site has any ads (AdSense, display banners, etc.)

You want to remove the players' attribution (eliminate the right-click link)

You are a corporation (governmental or nonprofit use is free)

You are a content management system

» Buy a license

Existing license owners and 4.2

The 4.x version of the JW Player introduces a new commercial license . On this page , existing license- owners can download a FREE new proof-of-license PDF by providing their email address.

Credits

Thanks to Jeroen Wijering for the developing the awesome JW FLV Player.

Thanks to Mark James for the silk icon set of the fam fam fam line, which provide the icons for this the Media Center extension.

Thanks to Veit Briken for the great feedback and testing during the initial development.

Users manual

Installation

The installation of the extension is easy as usual. Just import the extension (key: media_center ) from the TYPO3 Online Repository (TER) and install it using the Extension Manager in the backend of your TYPO3 installation. Make sure you make the updates during installation process to apply the needed database changes. Elsewehre use the compare function of the database section within the install tool.

Static template

include the static template (Media Center) in your main Typoscript configuration:

img-4

Constant Editor

use the constant editor to configure the settings via typoscript. All configuration settings can be overriden via the flexform configuration of the plugin (see next chapter).

Attention: Empty settings and settings with value=0 of the flexform configuration will be ignored!

The next image shows the first part of the constant editor (32 settings available in total):

img-5

Media Center Files

The extension introduces a new record Media center file. For each file in the playlist you have to create a Media Center File record at first.

I recommend to create a separate page from type “SysFolder” and use it as storage for the media files. Use the List Module to create a new record. Select “Media Center File”:

img-6

The file definition offers different fields, organized in three tabs:

Tab: File

If you select a local file, the media file will be copied to the upload/tx_mediacenter folder (standard TYPO3 behavior). If you want to integrate external files or use references to local files, you have use the url to external files (file_url) field and enter the absolute or relative path manually. Attention: If a local file is set, the path in url to external files (file_url) will be ignored. There is no validation of the external file settings so far, so be careful with the path and the filename !!!

img-7

Tab: Description

enter a title which will be displayed in the playlist (required)

  • insert an image which will be used as preview image in the video area, and as thumbnail in the playlist
  • enter a description for the playlist
  • enter the name of the author (person, company, or something else)

img-8

Tab: Language & Access

  • language
  • hide
  • time period
  • access

img-9

Inserting Plugin

Insert a new content element and choose Insert Plugin. Select Media Center as plugin and add at least one Media Center File to the playlist in the Media Files tab of the flexform Configuration of the plugin.

img-10

Typoscript mode

If you want to integrate the player using typoscript only, you don' net to create any media file records or content element. Just set the typoscript constant renderingMode to typoscript and define the path to a file using the constant file as well. This could be either a local path to a single media file or to a playlist (e.g fileadmin/mediapool/videos/video.flv ) or an external path to a media file or playlist.

Streaming

If you want to integrate an external streaming server to deliver the media files, use the plugin in Typoscript mode, set the file to the file name on the streaming server and set the flashvar streamer to the external url. A simple typoscript setup could look like this:

page.30 < plugin.tx_mediacenter_pi1

page.30.renderingMode = typoscript

page.30.file = bunny.flv

page.30.flashvars.streamer = rtmp://edge01.fms.dutchview.nl/botr

Skins

If you want to use a custom layout or simply want the playlist to not display thumbnails the extension offers an easy way to integrate a new look and feel using a different skin from the default one. There is a flashvar skin which could be used to setting a local or external path to a swf skin file. Use the constant editor or the flexform configuration as described in the configuration section.

This extension ships with several example skins located at

EXT:media_center/lib/mediaplayer/skins

Example: If you want to have a playlist where no thumbnails are displayed and the single entry is only about one line high, you go for the skin simple.swf. Just set the following path to the skin configuration (constant or flexform) and your done:

typo3conf/ext/media_center/lib/mediaplayer/skins/simple.swf

Plugins

The JW FLV Player version 4.2.x introduces a new plugin architecture which enables simple integration of third party plugin to extend the basic functionality of the player. Use the flashvar plugins to enter a comma separated list of plugin keys. See configuration section for details.

Have a look at http://www.longtailvideo.com/AddOns/?category=plugins for public available plugins.

Multilingual support

Since version 1.0.2 the plugin supports multilingual media center files when using the default renderingMode tt_content . Make sure to set the constant languageParameter to the language linkVar you have assigned for your site.

Configuration

As described in the user manual, the configuration could be done easily via flexform configuration of the plugin.

Flexform Configuration

As mentioned before, it is possible to override every setting made by the constant editor using the flexform configuration of the plugin itself.Attention: Empty settings and settings with value=0 of the flexform configuration will be ignored!

Tab: Media Files

  • Add at least one Media Center File to the playlist
  • Since Version 0.1.3 you can add page records to the playlist. In this case, the inner sorting is based on the manual order of the Media Center File records on the included page

img-11

Tab: Layout

  • Height:: set the height of the plugin. Attention: the height setting will be added to the playlist size if the playlist position is set to bottom
  • Width: width of the video area
  • Playlist Size: variable (widthif playlist position set to right, height if playlist position set to bottom)
  • Playlist position: none (default), bottom, over, right
  • Background Colour: overall colour of the flash movie
  • Controlbar: position of the control bar (botteom, over, none)
  • Url to logo file: include a logo overlay, which will be rendered over the video area. Use a large transparent image if you need to position the logo at another location. The transparent image must have the size of the video area. Position the logo onto the transparent image and include it here see: http://www.jeroenwijering.com/?thread=10578
  • Url to swf skin file: url to a swf skin file see: http://www.jeroenwijering.com/?item=Skinning_the_JW_Player http://code.longtailvideo.com/trac/wiki/FlashSkinning

img-12

Tab: Behaviour

  • autostart : automatically start the player on load.
  • bufferlength:number of seconds of the file that has to be loaded before starting.
  • caption: on/off state of the captions. Is saved as cookie.
  • displayclick: what to do when one clicks the display. Can be play , link , fullscreen , none , mute , next .
  • fullscreen:set to true to enable fullscreen.
  • item: playlistitem that should start to play. Use this to set a specific start-item.
  • mute: mute all sounds on startup. Is saved as cookie.
  • quality: enables high-quality playback. This sets the smoothing of videos on/off, the deblocking of videos on/off and the dimensions of the camera small/large. Is saved as cookie.
  • repeat: continously repeat playback of the file/playlist.
  • schuffle: shuffle playback of playlistitems.
  • stretching: defines how to resize images in the display. Can be none (no stretching), exactfit (disproportionate), uniform (stretch with black borders) or fill (uniform, but completely fill the display).
  • volume: startup volume of the player. Is saved as cookie.

img-13

Tab: External Communication

  • abouttext:text to show in the rightclick menu. Please do not change this if you don't have a commercial license !
  • aboutlink ( ` http://www.jeroenwijering.com/?page=about <http://www.jeroenwijering.com/?page=about>`_ ): url to link to from the rightclick menu. Do not change this if you don't have a commercial license !
  • linktarget: browserframe where the links from display are opened in. Some possibilities are '_self' (same frame) , '_blank' (new browserwindow) or 'none' (links are ignored in the player, so javascript can handle it).
  • streamscript: location of an external PHP file to use for HTTP streaming. If set to lighttpd , the player presumes a Lighttpd server is used to stream videos.
  • tracecall: name of a javascript function that can be used for tracing the player activity. All events from the view, model and controller are sent there.

img-14

Tab: Fallback

  • No Flash:assign several content elements which will be shown if the clients browser has no flash plugin installed
  • No Script: assign several content elements which will be shown if the clients browser does not support javascript

img-15

Typoscript

All typoscript settings of plugin.tx_mediacenter_pi1 use constants and can be set by the constant editor.

plugin.tx_mediacenter_pi1

renderingMode

Property

renderingMode

Data type

string

Description

the mode the plugin should be rendered. Could be tt_content or typoscript. Set to typoscript if you want to include the player using typoscript setup and without any content elemen. If you set this to typoscrip make sure to set the file settings as well.

Default

tt_content

file

Property

file

Data type

string

Description

path to a local file or playlist. Only used if renderingMode is set to typoscript

Default

wrap

Property

wrap

Data type

string

Description

wrap of the the player.

Note: the player will be included by default in a <div> tag with a unique player id, this allows to inset multiple players on one page and is needed, because the player will be inserted by the Javascript SWFObject

Default

noscriptInsideWrap

Property

noscriptInsideWrap

Data type

string

Description

Wrap of the noscript content inside the <noscript> tags

Default

width

Property

width

Data type

int

Description

width of the div container for the Google Earth plugin window. This can be any valid value for the css setting width (e.g. 500px or 50%)

Default

400

height

Property

height

Data type

int

Description

width of the div container for the Google Earth plugin window. This can be any valid value for the css setting width (e.g. 300px or 100%)

Default

300

wmode

Property

wmode

Data type

string

Description

the wmode setting for the flash movie. Can be set to window , opaque and transparent

Default

window

[tsref:plugin.tx_mediacenter_pi1]

Flashvars

For all available flashvars have a look at:

http://code.longtailvideo.com/trac/wiki/FlashVars

plugin.tx_mediacenter_pi1.flashvars

playlistsize

Property

playlistsize

Data type

int

Description

size of the playlist, width if playlist is set to right, height if playlist is set to bottom, otherwise ignored

Default

200

playlist

Property

playlist

Data type

string

Description

position of the playlist. Can be set to bottom , over , right or none .

Default

none

controlbar

Property

controlbar

Data type

int

Description

position of the controlbar. Can be set to bottom , over and none .

Default

bottom

skin

Property

skin

Data type

string

Description

location of a SWF file with the player graphics.

Have a look at EXT:lib/mediaplayer/skins for several example skins shipped with the extension. Useful, if you want to display a condensed playlist without thumbnails and a single line for title / description (e.g. skin simple.swf)

Default

autostart

Property

autostart

Data type

string

Description

automatically start the player on load.

Default

false

bufferlength

Property

bufferlength

Data type

int

Description

number of seconds of the file that has to be loaded before starting.

Default

1

caption

Property

caption

Data type

string

Description

on/off state of the captions. Is saved as cookie.

Default

true

displayclick

Property

displayclick

Data type

string

Description

what to do when one clicks the display. Can be play , link , fullscreen , none , mute , next .

Default

play

icons

Property

icons

Data type

string

Description

set this to false to hide the play button and buffering icon in the middle of the video.

Default

true

item

Property

item

Data type

int

Description

playlistitem that should start to play. Use this to set a specific start-item.

Default

0

mute

Property

mute

Data type

string

Description

mute all sounds on startup. Is saved as cookie.

Default

false

quality

Property

quality

Data type

string

Description

enables high-quality playback. This sets the smoothing of videos on/off, the deblocking of videos on/off and the dimensions of the camera small/large. Is saved as cookie.

Default

true

repeat

Property

repeat

Data type

string

Description

set to list to play the entire playlist once and to always to continously play the song/video/playlist. There's no option to repeat a single entry in a playlist yet.

Default

none

shuffle

Property

shuffle

Data type

string

Description

shuffle playback of playlistitems.

Default

false

stretching

Property

stretching

Data type

string

Description

defines how to resize images in the display. Can be none (no stretching), exactfit (disproportionate), uniform (stretch with black borders) or fill (uniform, but completely fill the display).

Default

uniform

volume

Property

volume

Data type

int

Description

startup volume of the player. Is saved as cookie.

Default

90

abouttext

Property

abouttext

Data type

string

Description

text to show in the rightclick menu. Please do not change this if you don't have a commercial license !

Default

linktarget

Property

linktarget

Data type

string

Description

browserframe where the links from display are opened in. Some possibilities are '_self' (same frame) , '_blank' (new browserwindow) or 'none' (links are ignored in the player, so javascript can handle it).

Default

streamer

Property

streamer

Data type

string

Description

location of an external PHP file to use for HTTP streaming. If set to lighttpd , the player presumes a Lighttpd server is used to stream videos. location of a server to use for streaming. Can be an RTMP application ( here's an example ) or external PHP/ASP file to use for HTTP streaming . If set to lighttpd , the player presumes a Lighttpd server is used to stream videos.

Default

tracecall

Property

tracecall

Data type

string

Description

name of a javascript function that can be used for tracing the player activity. All events from the view, model and controller are sent there.

Default

plugins

Property

plugins

Data type

string

Description

a powerful new feature, this is a comma-separated list of swf plugins to load (e.g. yousearch,viral ). Each plugin has a unique ID and resides at plugins.longtailvideo.com . Go to the LongTailVideo AddOns section to find and add plugins.

Default

backcolor

Property

backcolor

Data type

string

Description

background color of the controlbar and playlist. This is white with the default skin.

Default

frontcolor

Property

frontcolor

Data type

string

Description

color of all icons and texts in the controlbar and playlist.

Default

lightcolor

Property

lightcolor

Data type

string

Description

color of an icon or text when you rollover it with the mouse. If you set this, also set the frontcolor , so the rollovers also have a rollout.

Default

screencolor

Property

screencolor

Data type

string

Description

background color of the display.

Default

[tsref:plugin.tx_mediacenter_pi1.flashvars]

Export

The following settings are needed to be included in the url for the playlist and are therefore included in the setup part of the typoscript code. Settings could be set using the constant editor as well

plugin.tx_mediacenter_pi1.export

typeNum

Property

typeNum

Data type

int

Description

typeNum of the pageObject used for the xml (rss) export of the playlist

Default

66

languageParameter

Property

languageParameter

Data type

string

Description

set this to the language linkVar you have configured for your mutlilingual site

Default

L

[tsref:plugin.tx_mediacenter_pi1.export]

Constants only:

The following settings are set by constants and are needed for the export of the playlist as xml. Normally you don't need to change these.

plugin.tx_mediacenter_pi1.export

pageObject

Property

pageObject

Data type

string

Description

PAGE object used for xml (rss) export of the playlist

Default

media_center_export

format

Property

format

Data type

string

Description

defines the format used for the export of the playlist. Possible values are:

XSPF, mRSS, iRSS

Attention:

- Captions are only supperted using the XSPF export format, which is default export format since version 0.1.6

- iRSS does not support thumbnails and start settings

For more information have a look at:

`http://code.longtailvideo.com/trac/wiki/FlashFormats#Playlistformats <http://code.longtailvideo.com/trac/wiki/FlashFormats#Playlistformats> `_

Default

XSPF

channelTitle

Property

channelTitle

Data type

string

Description

title node as child node of the channel node in the xml (rss) file

Default

Media Center RSS Export

Export

The export is done using the one of the following export formats:

Known problems

  • When using a mixed playlist with audio (mp3) and video files, sometimes the sound of the video file continues when a video in the playlist has been clicked. Seems to be a problem of the JW FLV Player
  • there seems to be a problem when using only images and trying to set autostart to true. Also the duration seems not to work with images.
  • there are several youtube video related issues: http://www.jeroenwijering.com/?thread=11538 http://www.jeroenwijering.com/?thread=11544

To-Do list

  • use export to subscribe to media center as rss feed
  • add support for DAM files
  • enable preview of the player when in editing mode in backend

Changelog

0.1.0

Version

0.1.0

Description

Initial release

0.1.1

Version

0.1.1

Description

  • added german translations
  • added t3lib_extMgm::allowTableOnStandardPages('tx_mediacenter_item'); to ext_tables.php so Media Center files can be created on standard pages as well

0.1.2

Version

0.1.2

Description

  • bugfix: added htmlspecialchars() to title, description, channelTitle of playlist
  • bugfix: added utf8_encode() to url from file_url
  • bugfix: corrected german autostart description (was upside-down)
  • bugfix: removed flaws in german translation

feature: added link wizards to file_url and link fields of Media Center File records

0.1.3

Version

0.1.3

Description

  • feature: allow to add pages to the media files section of the plugin flexform configuration
  • feature: added link wizards to logo, skin and aboutlink fields of flexform configuration
  • bugfix: playlist size (height and width) calculation based on playlist positioning
  • feature: added new flexform sheet for fallback content assignment of content elements which override standard error texts
  • feature: made Media Center File records sortable in the Backend

0.1.4

Version

0.1.4

Description

bugfix: changed required flash version back to 9.0.0 (was set to 10.0.0 for testing purposes before)

0.1.5

Version

0.1.5

Description

  • bugfix: added missing yt.swf (youtube proxy) to display youtube videos. Sorry guys, have missed that one!
  • bugfix: fixed processing of urls inserted in media files and flexform configuration using the link wizards
  • feature: added new xml format iRSS and the configuration via constant editor

0.1.6

Version

0.1.6

Description

  • updated JW FLV Player to version 4.1.6
  • feature: added new xml format XSPF
  • feature: added captions format using the XSPF export format

1.0.0

Version

1.0.0

Description

  • updated JW FLV Player to version 4.2.90

  • feature: added new color flashvars backcolor, frontcolor, lightcolor, screencolor

    removed setting bgcolor, so make sure to update your color settings using the constant editor or the flexform configuration

  • featute: added support to add player via typoscript only

  • feature: added new flashvar streamer to display a video from a rtmp streaming source

1.0.1

Version

1.0.1

Description

  • bugfix: fixed settings for flashvarreplay from false/true to none/list/always
  • feature: added a couple of example skins to use from http://code.jeroenwijering.com/trac/browser/skins/as3
  • feature: added support for icons flashvar
  • feature: added support for plugins flashvar and thus enabling the plugin integration

1.0.2

Version

1.0.2

Description

  • bugfix: fixed wrong table declaration for multilanguage support in tca.php
  • bugfix: fixed wrong labels for flashvars repeat in tca.php and flexform.xml
  • feature: mutlilingual support of media files

1.0.3

Version

1.0.3

Description

  • feature: updated player.swf to version 4.6
  • feature: updated swfobject to version 2.2
  • feature: updated item types to the changes in the player
  • feature: added param wmode to the javascript call, configurable via typoscript constants
  • bugfix: urlencode the link entries due to a php bug: http://bugs.php.net/bug.php?id=31191
  • bugfix: typo in german wrong flash version error text

img-16 EXT: Media Center - 15