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¶
The first image shows the Media Center player with the playlist position set to right .
The second image shows the Media Center with the playlist position set to bottom .
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
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:
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):
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/Tim edTextTags.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
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
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:
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 (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
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.
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.
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
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
logo¶
Property
logo
Data type
int
Description
location of an external jpg,png or gif image to show in the display.
Default
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
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
aboutlink¶
Property
aboutlink
Data type
string
Description
url to link to from the rightclick menu. 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
channelLink¶
Property
channelLink
Data type
string
Description
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')
Default
[tsref:plugin.tx_mediacenter_pi1.export]
Export¶
The export is done using the one of the following export formats:
XSPF
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¶
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
EXT: Media Center - 15