TYPO3 Media CE

Extension Key: doc_core_mediace

Language:

Keywords: core, content, element, media, flash, quicktime

Copyright 2000-2008, , <info@typo3.org>

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

Revised for TYPO3 4.2, February 2009

Table of Contents

TYPO3 Media CE	1

Introduction	3

Media Content Element	4

Typoscript Configuration	7

FLVPlayer Configuration	10

Usage in Extensions	11

Usage of Hook for own renderTypes, own parameters and own rendering	12

Introduction

The existing Multimedia content element provides very limited functionality. In particular, there is no way to integrate streaming media or external media.

Therefore the new Media content element replaces the Multimedia content element, acting as a dispatcher for different media output formats.

The Media content element is a dispatcher which gets its HTML output from one the available render objects. By default, these render objects include SWFOBJECT (Flash driven by Javascript), QTOBJECT (Quicktime driven by Javascript) and Multimedia (the original Multimedia object rendered with EMBED tags).

The renderType defines which object is used for rendering. If set to its default value of “auto”, the Media content element uses the media file's extension to choose the right renderer. This auto-detection may not work as well for external URLs so setting the renderType manually is preferable in that case.

If one of the existing renderTypes does not meet your needs, new renderTypes can be registered and rendered with a custom extension.

The Media content element contains the following 3rd party files at typo3/contrib/flashmedia:

qtobject/qtobject.js (Javascript for QTOBJECT)

swfobject/swfobject.js (Javascript for SWFOBJECT)

swfobject/expressInstall.swf (this is displayed if Flash version of client is too low)

flvplayer.swf (TYPO3 video player for flv, swf, mp4, m4u etc)

player.swf (Audio player from 1pixelout)

player.txt (License for audio player)

If you want to use a different player, it can be configured via Typoscript.

Important: Files are treated as URLs. So you need fully qualified URLs. Use config.baseURL and/or config.absRefPrefix to get automatic full qualified URLs.

Now let's use the Media Content Element.

Media Content Element

Insert the Media content element on your page

Now you get a form to configure the element:

1) Relative Path of Media File or URL: Use the link wizard to point to your file/URL or enter your URL direct in the text field. If you supply a file, it will be referenced. This means that no copy of the file is put into the uploads folder. This is important to know! If you remove the file the content element will no longer work. For URLs you can use any protocol (http, https etc). If you omit the protocol, http:// will be added automatically.

2) Use Player: If you configured a URL in 1) the rendered element uses the URL directly (ex: a YouTube URL). But if the URL is a media file and you need a player, check this option.

3) Media Type: Select whether the media is audio or video so that a correctly configured player is used.

4) Media Width: Configure width of the output. If empty, default value will be used (depending on type of media).

5) Media Height: Configure height of the output. If empty, default value will be used (depending on type of media).

6) Render Type: Auto will choose the right type depending on the file extension. When using a URL, you should choose a specific renderType.

7) Additional Parameters: Add configuration parameters if needed. Media Parameters are predefined parameters while Custom Parameters provide a text field where anything can be added.

8) Alternative Content: Alternative content is printed out if client deactivates Javascript or has no Flash. Otherwise, the media will replace this content

Here is an example for additional parameters:

Typoscript Configuration

The Media content element can also be used by Typoscript, as this simple example illustrates:

lib.player < tt_content.media.20
lib.player.file = fileadmin/video/SC006.m4v

Here is the complete reference:

tt_content.media.20

Property:	Data type:	Description:	Default:
flexParams	stdWrap	Used for Flexform configuration of the content element	flexParams.field = pi_flexform
alternativeContent	stdWrap	Alternative content	alternativeContent.field = bodytext
type	string	Defines media type: video/audio	video
renderType	string	Used for select the render object. Possible renderTypes are: auto/swf/qt/object. Extensions may add custom renderTypes as well.	auto
allowEmptyUrl	boolean	If set to 0 you see a warning if no file/URL is configured. If you do some advanced setup such as a Javascript-driven player with a playlist you may use the object without a URL and need to set the value to 1.	0
mimeHandler	array	The mappings between file extensions and render types can be configured here and will be used when renderType=auto. Possible values are MEDIA, SWF, QT	mimeHandler { default = MEDIA mp3 = SWF mp4 = SWF m4v = SWF mov = QT avi = MEDIA asf = MEDIA class = MEDIA swa = SWF }
mimeConf.swfobject mimeConf.qtobject	array	Copy of configuration for SWFOBJECT and QTOBJECT	mimeConf.swfobject < tt_content.swfobject.20 mimeConf.qtobject < tt_content.qtobject.20

tt_content.media.20.video configuration for media type video

Property:	Data type:	Description:	Default:
player	string	Location of video player	{$styles.content.media.videoPlayer} typo3/contrib/flashmedia/flvplayer.swf
defaultWidth	int	Default video media width	{$styles.content.media.defaultVideoWidth} 600
defaultHeight	int	Default video media height	{$styles.content.media.defaultVideoHeight} 400
default	array	Default parameters for flashvars / params / attributes Usage: default { flashvars.allowFullScreen = true params.wmode = transparent attributes.align = center } flashvars are used for swf file configuration. There is no standard across players, but for flvplayer see description below. For detailed description of possible params/attributes visit this URL: http://livedocs.adobe.com/flash/9.0/UsingFlash/help.html?content=WSd60f23110762d6b883b18f10cb1fe1af6-7ba7.html	default { params.quality = high params.wmode = transparent params.menu = false params.allowScriptAccess = sameDomain params.allowFullScreen = true }
mapping	array	If you want to rename predefined vars you can use mapping. See tt_content.media.20.audio where it's needed	

tt_content.media.20.audio configuration for media type audio

Property:	Data type:	Description:	Default:
player	string	Location of audio player	{$styles.content.media.audioPlayer} typo3/contrib/flashmedia/player.swf
defaultWidth	int	Default audio media width	{$styles.content.media.defaultAudioWidth} 600
defaultHeight	int	Default audio media height	{$styles.content.media.defaultAudioHeight} 400
default	array	Default parameter for flashvars / params / attributes Usage: default { flashvars.allowFullScreen = true params.wmode = transparent attributes.align = center } flashvars are used for swf file configuration. There is no standard across players, but for flvplayer see description below. For detailed description of possible params/attributes visit this URL: http://livedocs.adobe.com/flash/9.0/UsingFlash/help.html?content=WSd60f23110762d6b883b18f10cb1fe1af6-7ba7.html	default { params.quality = high params.wmode = transparent params.allowScriptAccess = sameDomain params.menu = false }
mapping	array	The audio player doesn't work with file, but instead expects the file with the flashvar soundFile. mapping does the rename of parameter for you by default.	mapping { flashvars.file = soundFile }

tt_content.swfobject.20

Property:	Data type:	Description:	Default:
file	stdWrap	Media file or URL	
width	int	Width of swfObject	
height	int	Height of swfObject	
flexParams		Used for Flexform configuration of the CE	flexParams.field = pi_flexform
alternativeContent	stdWrap	Alternative content	alternativeContent.field = bodytext
layout	stdWrap	HTML Template for the Object. ###SWFOBJECT### is replaced with the sfwobject, ###ID### is replaced with the unique Id of the div/object	###SWFOBJECT###
video.player audio.player	See media object		

tt_content.qtobject.20

Property:	Data type:	Description:	Default:
file	stdWrap	Media file or URL	
width	int	Width of qtObject	
height	int	Height of qtObject	
flexParams		Used for Flexform configuration of the CE	flexParams.field = pi_flexform
alternativeContent	stdWrap	Alternative content	alternativeContent.field = bodytext
layout	stdWrap	HTML Template for the Object. ###QTOBJECT### is replaced with the qtobject, ###ID### is replaced with the unique Id of the div/object	###QTOBJECT###
video.player audio.player	See media object		

FLVPlayer Configuration

The FLVplayer can be configured with flashvars. Here is the reference of possible parameters:

Property:	Data type:	Description:
file	string	Video url
autoStart	boolean	
smoothing	boolean	Smooths pictures in video, is set by default
deblocking	int	Value 0-7, default is 5 Indicates the type of deblocking filter applied to decoded video as part of postprocessing. Two deblocking filters are available: one in the Sorenson codec and one in the On2 VP6 codec. The following values are acceptable: 0 (the default)--Let the video compressor apply the deblocking filter as needed. 1--Do not use any deblocking filter. 2--Use the Sorenson deblocking filter. 3--Use the On2 deblocking filter and no deringing filter. 4--Use the On2 deblocking and the fast On2 deringing filter. 5--Use the On2 deblocking and the better On2 deringing filter. 6--Same as 5. 7--Same as 5. If a mode greater than 2 is selected for video when you are using the Sorenson codec, the Sorenson decoder defaults to mode 2 internally. Use of a deblocking filter has an effect on overall playback performance, and it is usually not necessary for high-bandwidth video. If your system is not powerful enough, you may experience difficulties playing back video with this filter enabled.
volume	int	Value 0-100, default is 80
prebuffer	int	Value that configures the time in seconds for biuffer the video while loading, default is 5
preview	boolean	If set, player shows a frame of the video defined by previewSeek, default is true
previewSeek	float	Value for preview, defines the frame in seconds beginnig from start. Default is 0.5
clickAlpha	int	Alpha value for transparency of click image, default is 65
clickText	string	Define any Text to be displayed before video starts
click	string	Url to click-image
image	string	Url to preview image
allowFullScreen	boolean	If set, button for fullscreen toggle is displayed. Note that it has to be enabled in params to work

Usage in Extensions

You can use the objects very easily in your extension. If you have a cObject, simply use it with

$player = $this->cObj->MEDIA($mediaConf);

$swf = $this->cObj->SWFOBJECT($swfConf);

$qt = $this->cObj->QTOBJECT($qtConf);

Fill the conf-arrays as documented in the TS-reference.

Using hooks for custom renderTypes, parameters and rendering

First register the hooks in your ext_localconf.php:

// Media Hooks

$TYPO3_CONF_VARS['SC_OPTIONS']['tslib/hooks/class.tx_cms_mediaitems.php']['customMediaRenderTypes'][$_EXTKEY] = 'EXT:' . $_EXTKEY . '/class.tx_testfields_mediahooks.php:tx_testfields_mediaHooks';

$TYPO3_CONF_VARS['SC_OPTIONS']['tslib/hooks/class.tx_cms_mediaitems.php']['customMediaParams'][$_EXTKEY] = 'EXT:' . $_EXTKEY . '/class.tx_testfields_mediahooks.php:tx_testfields_mediaHooks';

$TYPO3_CONF_VARS['SC_OPTIONS']['tslib/hooks/class.tx_cms_mediaitems.php']['customMediaRender'][$_EXTKEY] = 'EXT:' . $_EXTKEY . '/class.tx_testfields_mediahooks.php:tx_testfields_mediaHooks';

Here is an example for the class that use these hooks:

<?php

/***************************************************************

* Copyright notice

*

* (c) 2008 Steffen Kamper <info@sk-typo3.de>

* All rights reserved

*

* This script is part of the TYPO3 project. The TYPO3 project is

* free software; you can redistribute it and/or modify

* it under the terms of the GNU General Public License as published by

* the Free Software Foundation; either version 2 of the License, or

* (at your option) any later version.

*

* The GNU General Public License can be found at

* http://www.gnu.org/copyleft/gpl.html.

*

* This script is distributed in the hope that it will be useful,

* but WITHOUT ANY WARRANTY; without even the implied warranty of

* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

* GNU General Public License for more details.

*

* This copyright notice MUST APPEAR in all copies of the script!

***************************************************************/

class tx_testfields_mediaHooks {

// MEDIA Hooks for extending

/**

* @desc

*/

function customMediaRenderTypes($params, $conf) {

$params['items'][] = array(

0 => 'Test Entry for own rendering',

1 => 'test'

);

}

/**

* @desc

*/

function customMediaParams($params, $conf) {

$params['items'][] = array(

0 => 'Image (set absolute path)',

1 => 'image'

);

}

/**

* @desc

*/

function customMediaRender($renderType, $conf) {

#debug($conf, 'Render: '. $renderType);

if ($renderType == 'test') {

return 'TESTER (renderType = ' . $renderType . '): ' . t3lib_div::view_array($conf);

}

}

}

?>

TYPO3 Media CE - doc_core_mediace	Usage in Extensions

12

TYPO3 Media CE

doc_core_mediace

core content element media flash quicktime

TYPO3 Core Development Team

2002-11-01T00:32:00

François Suter