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: PAE Media Library

Author:Kasper Skårhøj
Created:2002-11-01T00:32:00
Changed by:Alban Cousinié
Changed:2009-12-21T12:33:01.630000000
Classification:pae_media_library
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 ----
Keywords:dam, video, audio, media, library, jw, player, FLV, F4V, MP3, YouTube
Author:Alban Cousinié
Email:extensions@mind2machine.com
Info 4:
Language:en

img-1 img-2 EXT: PAE Media Library - pae_media_library

EXT: PAE Media Library

Extension Key: pae_media_library

Language: en

Keywords: dam, video, audio, media, library, jw, player, FLV, F4V, MP3, YouTube

Copyright 2000-2008, Alban Cousinié, <extensions@mind2machine.com>

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: PAE Media Library 1

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

What does it do? 3

Screenshots 3

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

Inserting the plugin inside a web page 6

Adding media to the DAM 8

FAQ 15

`Administration 16 <#1.3.Administration|outline>`_

Access restrictions 16

FAQ 16

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

Reference 18

`Bonus gift ! 20 <#1.5.Bonus%20gift%20!|outline>`_

Cuepoints JW Player plugin 20

`Known problems 23 <#1.6.Known%20problems|outline>`_

`To-Do list 24 <#1.7.To-Do%20list|outline>`_

`ChangeLog 25 <#1.8.ChangeLog|outline>`_

Introduction

What does it do?

  • This plugin aims to provide a frontend view for video, audio and image medias stored into the DAM, thus the name media library. HOWEVER so far, the media library part has not been developed (!) because we needed first a good video / MP3 player based on the DAM, something which was not existing for Typo3 yet.
  • The pae_media_library extension currently provides what we consider to be the most advanced media player for Typo3, integrating the now famous JW player in its version 4.6 tightly integrated with the DAM. It is now possible to select and play a FLV video, a youtube video or a MP3 element from the DAM and display it into a page. The extension also allows to load the content of a DAM category into a playlist where items will be selectable within the JW player.
  • Last but not least, our implementation allows to play streaming media from a remote server while specifying the file meta information inside the DAM. The meta-information is forwarded to the JW player which displays it.
  • Notice the JW Player is free for non commercial use, but requires paying a licence for commercial use. Read more details at http://www.longtailvideo.com/players/jw-flv-player/
  • The creation of this plugin has been funded by the “Communauté d'Agglomeration du Pays d'Aubagne et de l'Etoile” which is an administrative public group of cities in the south of France. They have been committed with open source and Typo3 for quite some time now. http://www.agglo-paysdaubagne.com/

Screenshots

JW Player displaying videos loaded from DAM categories.

img-3

General plugin options

img-4

Playlists can be created from various sources : single file, dam category, self assembled playlist, remote XML feed :

img-5

  • We managed to cable ALL JW player options. This is a full implementation.

    img-6

Users manual

Inserting the plugin inside a web page

Currently, only the media player plugin is available. Later, a second plugin named media library is due to be developed.

To insert the media player plugin inside a web page, click on the 'create new element' icon :

img-7

Then pick the plugin named 'media player' :

img-8

Then set the basic plugin settings :

img-9

General Panel

Display mode :

You can choose between several options here :

  • Single file : pick a single image, video or audio file from the DAM and display it in your page

  • Playlist from DAM category * : the player will pick all the items contained in the category and display them as a playlist.

  • Playlist from DAM records * : pick a set of DAM records and compose your custom playlist.

  • Playlist from URL * : specify a remote XML feed (XSPF, RSS, ASX, Atom) from which medias can be played.

    * Note : you must set the options 'playlist position' and 'playlist size' from the 'JW Player 4.6' panel in order to have the playlist display properly with you player.

Streaming server base URL :

If you have access to a streaming server and have videos loaded on it, you can have the media player play them from this source. This also requires specifying local dummy files holding the metadata information inside the DAM. See later section “Adding media played from remote streaming server”.

Here is a sample working streaming server URL so you can figure the right syntax (notice the lack of trailing slash):

rtmp://video2.agglo-paysdaubagne.com/videosource

The extension has been successfully tested with Flash media server 2.0. Using the bandwidth management feature of JW player requires at least Flash Media server 3.5. However, bandwidth management is the only feature of JW Player which has not been implemented and tested in our media player plugin due to the lack of a FMS 3.5 server, but it shouldn't require more than a working day to implement if anyone is willing to contribute.

JW Player 4.6 Panel

Adding media to the DAM

Adding local media

The media player can display 3 types of medias :

  • Videos based on the adobe flash format (f4v, flv), Youtube videos
  • Images (jpg, png, gif)
  • Audio (mp3, aac)

Thus any file of those types that have been added to your server using the DAM should be eligible to insert inside the media player.

For managing your files, use the Media > file module that gets installed with the DAM extension.

img-10

If you do not know how to use the DAM to add a file to typo3, please the read the documentation of the DAM extension for extended instructions. For people in a rush, use the 'Media > file' module, select a folder as an upload target, then use the upload icon on the top of the right frame.

When a file has been added to the DAM, it is strongly advised to input its meta information.

In the 'overview' panel, the following fields are being used by the media player :

  • Title
  • Description
  • Creation date (used as default sorting criteria for category based playlists)
  • Category

img-11

We also have added a new tab to the media properties named 'Media library' which contains properties specific to our plugin.

For a regular local media file, you may want to set the following options :

img-12

When you are done, save the form, and eventually empty the cache if the file is due to be displayed in a media player already online, such as if the new file is part of an existing DAM category used as a playlist.

Adding media played from remote streaming server

Adding media intended to be played from a remote source is tricky because the DAM is file based and it requires a local file for displaying a meta-information editing form.

For that purpose, we are going to create an empty text file which will act as a dummy file. Get into the module Media > File, and hit the 'Create new text file' icon on the top of the right frame :

img-13

Next, give it a filename. You don't need to put any content in it. Then save the file.

img-14

Next click on the pencil icon of your file to edit its meta- information :

img-15

Then make sure you specify a file type, this is very important , and set the other basic meta-information :

img-16

Notice the 'Media Library' Tab does not appear in the screenshot above. You have to save the form and the tab will appear for relevant media types, that is audio and video.

Then you have to specify the file name of your media on the remote server. You don't need to specify a path if the file is located at the root of the streaming media server URL specified in the media player plugin :

img-17

Notice you must not melt local medias and remote streaming medias in a same playlist / media category, because when a media server is specified, the JW player looks for all media files on that server and thus will not find local medias.

Adding a youtube video

Create a dummy video just like explained in the previous section “Adding media played from remote streaming server”

Then in the media library tab, specify your options like this :

img-18

Then insert your video like a regular video :

img-19

The screenshot above is using a single file, but it is also possible to compose playlists of youtube videos. YouTube videos can be melted with local DAM medias in the playlist, but not with remote streaming medias for the reason explained in the previous section.

FAQ

  • I have modified my meta-information, but my changes don't show up in the player : make sure you have emptied the cache. The media player plugin is using the typo3 caching features.
  • Why can I add multiple Local media or Remote media elements when using the advanced file location ? This is necessary for multiple bitrate files were you can specify different versions of a media file with each file being encoded with a different bitrate/compression level. Then the media player will be able to pick the source matching the bandwidth of the web user. This feature is not yet implemented, but the UI elements are already present in order to ensure not to break compatibility with existing installations when the feature will be made available.

Administration

Access restrictions

The media player makes use of Typo3's enable fields. This means you can restrict the access of a given video to a specific user group or specify a start and stop date. They will be respected and if such settings do disable a video, the video will not appear in the player.

FAQ

None yet.

Configuration

Most media player settings can be adjusted using typoscript. This allows specifying consistant display options all over the website, such as for player colors, without having to set them on each new inserted plugin.

All the typoscript settings can be seen in the constant editor and they are all documented here.

img-20

Reference

metaCharset

Property

metaCharset

Data type

string

Description

Website charset (used for correct XML playlists generation)

Default

utf-8

dateFormat

Property

dateFormat

Data type

string

Description

PHP date format

Default

d/m/Y

templateFile

Property

templateFile

Data type

file[html,htm,tmpl,txt]

Description

HTML-template file to use for the medialibray. See EXT:pae_media_library/res/pae_media_library.html for an example

Default

EXT:pae_media_library/res/pae_media_library.html

cssFile

Property

cssFile

Data type

file[css]

Description

css file to use for the medialibrary. See /typo3conf/ext/pae_media_library/res/pae_media_library.css for an example

Default

/typo3conf/ext/pae_media_library/res/pae_media_library.css

TSSettingsOverridePluginSettings

Property

TSSettingsOverridePluginSettings

Data type

boolean

Description

Give priority to TS settings over plugin setting. If enabled, any setting specified in the plugin form will be ignored and the matching TS settings will be used instead.

Default

0

flash_version_req

Property

flash_version_req

Data type

string

Description

Required flash player version for display

Default

9.0115.0

streaming_base_url

Property

streaming_base_url

Data type

string

Description

Specify a streaming server URL for files

Default

forceAbsoluteURLsInXMLPlaylists

Property

forceAbsoluteURLsInXMLPlaylists

Data type

boolean

Description

Use to publish a playlist as a podcast or RSS feed not intended for JW player playback. If enabled, concatenates relative file names with the value of streaming_base_url in XML feeds

Default

0

XMLPlaylistTitle

Property

XMLPlaylistTitle

Data type

string

Description

Playlist title when publishing XML playlists

Default

Playlist

XMLPlaylistDescription

Property

XMLPlaylistDescription

Data type

string

Description

Playlist description when publishing XML playlists

Default

This is a list of medias

singleMediaPlayerPageUID

Property

singleMediaPlayerPageUID

Data type

int+

Description

UID of the page where a medialibrary media player is inserted for playback of medias from XML playlists

Default

[tsref:plugin.tx_paemedialibrary_pi1]

playertype

Property

playertype

Data type

options[regular,viral]

Description

JW Player type: can be set to 'regular' or 'viral'

Default

regular

show_meta

Property

show_meta

Data type

options[true,false]

Description

PHP date format

Default

true

controlbar

Property

controlbar

Data type

options[bottom,top,over,none]

Description

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

Default

bottom

width

Property

width

Data type

int+

Description

width of the display in pixels.

Default

320

height

Property

height

Data type

int+

Description

height of the display in pixels.

Default

240

icons

Property

icons

Data type

options[true,false]

Description

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

Default

true

backcolor

Property

backcolor

Data type

string

Description

background color of the controlbar and playlist. This is white with the default skin. Should be specified as hex value, eg : #FF00FF

Default

frontcolor

Property

frontcolor

Data type

string

Description

color of all icons and texts in the controlbar and playlist. Should be specified as hex value, eg : #FF00FF

Default

lightcolor

Property

lightcolor

Data type

string

Description

color of an icon or text when you rollover it with the mouse. Should be specified as hex value, eg : #FF00FF

Default

screencolor

Property

screencolor

Data type

string

Description

background color of the display. Should be specified as hex value, eg : #FF00FF

Default

smoothing

Property

smoothing

Data type

options[true,false]

Description

sets the smoothing of videos, so you won't see blocks when a video is upscaled. Set this to 'false' to get performance improvements with old computers / big files.

Default

true

stretching

Property

stretching

Data type

options[fill,uniform,exactfit, none]

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

fill

playlist

Property

playlist

Data type

options[none,bottom,over,right]

Description

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

Default

none

playlistsize

Property

playlistsize

Data type

int+

Description

when below this refers to the height, when right this refers to the width of the playlist.

Default

180

skin

Property

skin

Data type

string

Description

location of a SWF file with the player graphics. The JW player skinning documentation gives more info on this.

Default

autostart

Property

autostart

Data type

options[true,false]

Description

automatically start the player on load

Default

false

bandwidth

Property

bandwidth

Data type

int+

Description

Available bandwidth for streaming the file. Used predominantly for bitrate switching. Set this flashvar if you want to hint the player on the initial bandwidth.Overwritten every 2 seconds whenever a video or http stream is loading or an rtmp stream is playing.

Default

5000

bufferlength

Property

bufferlength

Data type

int+

Description

number of seconds of the file that has to be loaded before starting. Set this to a low value to enable instant-start and to a high value to get less mid-stream buffering.

Default

1

displayclick

Property

displayclick

Data type

options[play,link,fullscreen,none,mute,next]

Description

what to do when one clicks the display. Can be play, link, fullscreen, none, mute, next. When set to none, the handcursor is also not shown.

Default

play

dock

Property

dock

Data type

options[true,false]

Description

set this to true to show the dock with large buttons in the top right of the player.

Default

false

item

Property

item

Data type

int+

Description

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

Default

0

linktarget

Property

linktarget

Data type

options[_blank,_self]

Description

browserframe where link from the display are opened in. Some possibilities are '_self' (same frame) or '_blank' (new browserwindow).

Default

_blank

mute

Property

mute

Data type

options[true,false]

Description

mute all sounds on startup. Is saved in a cookie.

Default

false

repeat

Property

repeat

Data type

options[none,list,always,single]

Description

set to 'list' to play the entire playlist once, to 'always' to continously play the song/video/playlist and to 'single' to continue repeating the selected file in a playlist.

Default

none

shuffle

Property

shuffle

Data type

options[true,false]

Description

shuffle playback of playlist items.

Default

false

volume

Property

volume

Data type

int+

Description

startup volume of the player. Can range from 0 to 100. Is saved in a cookie.

Default

90

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 see all available plugins.

Default

flashvars

Property

flashvars

Data type

string

Description

allows specifying additional flashvars for plugins. Use the folowing syntax: (syntax: flashvar1_name: "flashvar1_value",flashvar2_name: "flashvar2_value", ...)

Default

debug

Property

debug

Data type

options[,arthropod,console,trace]

Description

set this to either arthropod, console or trace to let the player log events

Default

[tsref:plugin.tx_paemedialibrary_pi1.JWPlayer]

((generated))
Example
plugin.tx_paemedialibrary_pi1 {

    metaCharset = utf-8
    dateFormat = d/m/Y
    cssFile = /typo3conf/ext/pae_media_library/res/pae_media_library.css
    TSSettingsOverridePluginSettings = 1

    JWPlayer{
            playertype = viral
            controlbar = top
    }
}

Bonus gift !

Cuepoints JW Player plugin

For the requirements of the “Communauté d'Agglomeration du Pays d'Aubagne et de l'Etoile”, we have implemented a JW Player plugin that allows to list the cuepoints (chapters) defined in flv/f4v video file. This is especially usefull for long videos as it enables enables jumping directly to a specific point in the video. Cuepoints can be defined at encoding time when using Adobe media encoder / Flash media encoder to convert the video. See the documentation of those products for more information on using cuepoints.

In order to use the cuepoints plugin, enable the dock and add the URL http://www.mind2machine.com/jwplugins/cuepoints-en.swf to the plugins option of you media player (note : you can specify the alternate file cuepoints-fr.swf if you want to get the label for the “Chapters” button in french) :

img-21

Then a “Chapters” button will show up over the video 1) only when the video has started playing 2) only if the video does have cuepoints defined inside :

img-22

Clicking on the button lists the cuepoints available. Then clicking on a cuepoint advances the video playback to the matching timecode :

img-23

Additional notes on the cuepoints plugin

This plugin is free to use for everybody.

The development of this plugin has been funded by the the French public organism "Communauté d'agglomération du Pays d'Aubagne et de l'Etoile" (http://www.agglo-paysdaubagne.com).

Parts of the code (cuepoints list + scrolling) are based on the publicly available playlist plugin source code by longtailvideo.

Source code is available at http://www.mind2machine.com/jwplugins /cuepoints-source.zip

You must add arial.ttf into the cuepoints directory before building, or substitute the typo of your choice (edit the typo settings in file ListButton.as before building the plugin)

Known problems

Bandwidth management feature of JW Player is not implemented

To-Do list

  • Show preview images in the playlist.
  • Add XSPF, Atom, ASF XML feeds generation (currently only RSS is generated)
  • Implement JW Player 5.0

ChangeLog

  • Version 0.8.3 : fixed javascript error preventing media player display in IE7
  • Version 0.8.2 : added category sorting options for playlists
  • Version 0.8.1 : initial release. Features media player + documentation

25