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 1. 2. 3. 4. 5. 6. 7. 8. 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

9.

10. Skinnable layout of the player. Extension ships with five example skins. 11. Support for multilingual media center files
EXT: Media Center - 1

Screenshots

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

EXT: Media Center - 2

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

EXT: Media Center - 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: 1. 2. 3. 4. 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.

EXT: Media Center - 4

Static template

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

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):

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

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 !!! set a path to a xml captions file xml file has to be in W3C timed text format format: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/TimedTextTags.html xml file example: http://www.jeroenwijering.com/upload/bunny.xml

Set a duration if you want to override the length of the media file manually if you enter an url as link a link icon will be displayed in the control bar set the start position (in seconds) to define an offset where the file should start. Could be used to define chapters if you create multiple Media Center Files for one video file and include them in a playlist

EXT: Media Center - 6

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)

Tab: Language & Access language hide time period access

EXT: Media Center - 7

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.

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

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

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 (width if 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
EXT: Media Center - 9

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.

EXT: Media Center - 10

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): 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.

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

EXT: Media Center - 11

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

Data type:
string

Description:

Default:

the mode the plugin should be rendered. Could be tt_content or typoscript. tt_content 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. path to a local file or playlist. Only used if renderingMode is set to typoscript 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 Wrap of the noscript content inside the <noscript> tags 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%) 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%) the wmode setting for the flash movie. Can be set to window, opaque and transparent 400 300 window

file wrap

string string

noscriptInsideWrap width height wmode

string int int string

[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 Property:
playlistsize playlist controlbar logo skin int string int int string

Data type:

Description:
size of the playlist, width if playlist is set to right, height if playlist is set to bottom, otherwise ignored position of the playlist. Can be set to bottom, over, right or none. position of the controlbar. Can be set to bottom, over and none. location of an external jpg,png or gif image to show in the display. 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) automatically start the player on load. number of seconds of the file that has to be loaded before starting. on/off state of the captions. Is saved as cookie. false 1 true 200 none

Default:

bottom

autostart bufferlength caption

string int string

EXT: Media Center - 12

Property:
displayclick icons item mute quality

Data type:
string string int string string

Description:
what to do when one clicks the display. Can be play, link, fullscreen, none, play mute, next. set this to false to hide the play button and buffering icon in the middle of the video. playlistitem that should start to play. Use this to set a specific start-item. mute all sounds on startup. Is saved as cookie. 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. 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. shuffle playback of playlistitems. 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). startup volume of the player. Is saved as cookie. text to show in the rightclick menu. Please do not change this if you don't have a commercial license! url to link to from the rightclick menu. Do not change this if you don't have a commercial license! 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). 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. 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. 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. background color of the controlbar and playlist. This is white with the default skin. color of all icons and texts in the controlbar and playlist. 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. background color of the display. true 0 false true

Default:

repeat

string

none

shuffle stretching

string string

false uniform

volume abouttext aboutlink linktarget

int string string string

90

streamer

string

tracecall plugins

string string

backcolor frontcolor lightcolor screencolor

string string string string

[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 Property:
typeNum languageParameter int string

Data type:

Description:
typeNum of the pageObject used for the xml (rss) export of the playlist set this to the language linkVar you have configured for your mutlilingual site 66 L

Default:

[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

EXT: Media Center - 13

Property:
pageObject format

Data type:
string string

Description:
PAGE object used for xml (rss) export of the playlist 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

Default:
media_center_ex port XSPF

channelTitle channelLink

string string

title node as child node of the channel node in the xml (rss) file link node as child node of the channel node in the xml (rss) file. Will be set to the current site url using t3lib_div::getIndpEnv('TYPO3_SITE_URL')

Media Center RSS Export

[tsref:plugin.tx_mediacenter_pi1.export]

Export
The export is done using the one of the following export formats: XSPF http://xspf.org/specs/ http://search.yahoo.com/mrss http://www.apple.com/itunes/whatson/podcasts/specs.html RSS + Media format from Yahoo: RSS + iTunes format from Apple

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
Version:
0.1.0 0.1.1

Description: Initial release 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

EXT: Media Center - 14

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 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 bugfix: changed required flash version back to 9.0.0 (was set to 10.0.0 for testing purposes before) 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 updated JW FLV Player to version 4.1.6 feature: added new xml format XSPF feature: added captions format using the XSPF export format 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 bugfix: fixed settings for flashvar replay 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 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 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

0.1.3

0.1.4 0.1.5

0.1.6

1.0.0

1.0.1

1.0.2

1.0.3

EXT: Media Center - 15