.. You may want to use the usual include line. Uncomment and adjust the path. 
.. include:: ../Includes.txt


==================
EXT: MediaElements
==================

:Author:
      Christopher

:Created:
      2010-12-18T19:57:23

:Changed by:
      Thomas Dudzak

:Changed:
      2012-12-06T14:26:59.980000000

:Classification:
      mediaelements

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

:Keywords:
      media, mediacenter, video, audio, mediaelement.js

:Author:
      Thomas Dudzak

:Email:
      thomas.dudzak@gmx.net

:Language:
      en


.. _img-1-img-2-EXT-MediaElements:

|img-1| |img-2| EXT: MediaElements
==================================

Extension Key: mediaelements

Language: en

Version: x.y.z

Keywords: media, mediacenter, video, audio, mediaelement.js

Copyright 2006-2012, Author Name, <your@email.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:

Table of Contents
-----------------

**`EXT: Name of your Extension 1 <#__RefHeading__5708_1738894311>`_**

**`Introduction 3 <#__RefHeading__5710_1738894311>`_**

`What does it do? 3 <#__RefHeading__463_413120346>`_

`Screenshots 3 <#__RefHeading__465_413120346>`_

**`Users manual 4 <#__RefHeading__467_413120346>`_**

`Subheading 4 <#__RefHeading__31507_818911409>`_

`FAQ 4 <#__RefHeading__31509_818911409>`_

**`Administration 5 <#__RefHeading__31511_818911409>`_**

`FAQ 5 <#__RefHeading__31513_818911409>`_

**`Configuration 6 <#__RefHeading__31515_818911409>`_**

`FAQ 6 <#__RefHeading__31517_818911409>`_

`Reference 6 <#__RefHeading__31519_818911409>`_

**`Tutorial 8 <#__RefHeading__31523_818911409>`_**

**`Known problems 9 <#__RefHeading__31525_818911409>`_**

**`To-Do list 10 <#__RefHeading__477_413120346>`_**

**`ChangeLog 11 <#__RefHeading__31623_818911409>`_**

**`Important guidelines 12 <#__RefHeading__31625_818911409>`_**

`Inserting images 12 <#__RefHeading__31656_818911409>`_

`Fonts 12 <#__RefHeading__712_1275600224>`_

`Paragraph styles 12 <#__RefHeading__31658_818911409>`_

`Character styles 13 <#__RefHeading__757_92746827>`_

`Linking 13 <#__RefHeading__31660_818911409>`_

`Meta data and updates 13 <#__RefHeading__31662_818911409>`_

`HowTo: Update a manual to the new layout 13
<#__RefHeading__62258_818911409>`_

`HowTo: Alternative updating possibility: Import the styles from
another document 14 <#__RefHeading__62260_818911409>`_

`HowTo: Fix the Table Of Contents when it is empty 15
<#__RefHeading__62262_818911409>`_

`HowTo: Fix the Table Of Contents when a chapter is missing 15
<#__RefHeading__62264_818911409>`_

`Help from documentation.openoffice.org 15
<#__RefHeading__62266_818911409>`_


.. _Introduction:

Introduction
------------


.. _What-does-it-do:

What does it do?
^^^^^^^^^^^^^^^^

This extension includes a MediaElement.js-based media center in your
installation. You can save multiple video and audio formats in a
MediaElement file and include into a seperate media plugin or into
tt\_news. If you wish, you can also force the overwriting of all
audio- and video-tags on your page with MediaElements.js.

MediaElements.js is a special mediaplayer plugin for jQuery. Instead
of offering an HTML5 player to modern browsers and a totally separate
Flash player to older browsers, MediaElement.js upgrades them with
custom Flash and Silverlight plugins that mimic the HTML5 MediaElement
API. Magic happens, and then IE6-8 supports <video> and <audio>,
Firefox and Opera support h.264, and Safari and IE9 support WebM.
MediaElement.js-Script is brought to you by John Dyer.

This extension is a first serve for integrating MediaElements.js as a
mediaplayer in TYPO3 CMS. There's still much of work to be done:
Switch of skins, loop, backlight functionality and a fully flexible
javascript configuration for the player. All of that was not needed
for the project, I had to write this first version of the extension,
but is seen as a gap to be closed. First of all it brings a standard
integration, responsive design and also a playlist for the plugin.

If you have any suggestions, comments, requests or even
improvementsand snippets feel free to send it to me. I will try to
integrate it in the extension.


.. _Screenshots:

Screenshots
^^^^^^^^^^^

Backend: MediaElement plugin

|img-3| Backend: Mediaelement file

|img-4| Frontend: Mediaelement Plugin in frontend view

|img-5|


.. _Users-manual:

Users manual
------------


.. _Installation:

Installation
^^^^^^^^^^^^

Install the extension with the extension manager. After the extension
manager created the new database tables and fields for MediaElements
you should see a configuration page with configuration options.

In this early version there is only on main configuration, you can
choose: “Global script use”. See “Administration”->”Global script use”
for further informations.

After installation please include the static template or your own
setup for MediaElements. It can be recommend to clear the caches.


.. _Quick-Start:

Quick Start
^^^^^^^^^^^

After you have included the static template of MediaElements in your
template record of your page, you can include a MediaElements as
mediacenter to your page and even use in tt\_news.


.. _Create-a-MediaElements-file:

Create a MediaElements file
"""""""""""""""""""""""""""

To include MediaElements as mediacenter plugin you have to create at
least one database record “MediaElement file”. A MediaElements file
represents all informations and file sources for one media element –
whether video, audio, youtube or vimeo. You can relate different media
file sources, track files for subtitles, poster images and other
informations like title, description and author. MediaElements files
are also used in tt\_news.

First, click the “create new record” - link in list view and choose
MediaElements file:

|img-6| A form opens, showing a MediaElements file record:

|img-7| Set the type, you want to use, and include some dummy informations.
You can use a local reference to files on your local server
(fileadmin) in the field “locale files” or absolute pathes to files on
other servers in “external files”. If you use external files, you can
reference several files by using one line per file reference. You have
to add a title for the file. Click the “Save” link an continue.


.. _Create-a-MediaElements-plugin:

Create a MediaElements plugin
"""""""""""""""""""""""""""""

Click on “create new element” in page view and select “MediaElements”
in the wizard:

|img-8| A form will show up looking like this:

|img-9| Now you can select playlist items. Playlist items can be both:
MediaElements files and sites, where MediaElements files are stored
in. You can also configure Layout and Behaviour of the plugin.

Save and close the plugin. Now a player should be shown on your page.


.. _Include-MediaElement-in-tt-news:

Include MediaElement in tt\_news
""""""""""""""""""""""""""""""""

If you want to use MediaElements in tt\_news, you can do that by
adding Mediaelements files in the playlist field in the tt\_news
record tab “media”.

|img-10| BUT: you have to place a MediaElements-Marker to the bodytext, where
you want to place your video. A regular marker for MediaElements is:
**[mediaelement]**

If you want to use MediaElements for youtube or vimeo videos, you can
add a quick reference in this way instead of including Playlist-Items:

**[mediaelement src="https://www.youtube.com/watch?v=xxx"]**

Of course, you can use both: playlist items and quick references in
each record.


.. _The-MediaElements-file-record:

The MediaElements file record
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

The MediaElements file record is the place, where you can configure
your whole the whole MediaElement.


.. _Sheet-Files:

Sheet “Files”
"""""""""""""

.. ### BEGIN~OF~TABLE ###


.. _Type:

Type
~~~~

.. container:: table-row

   Field
         Type
   
   Description
         Type of current MediaElement file. You can choose video, audio,
         youtube or vimeo. Default is video. Changes the availability of some
         input fields.



.. _Locale-files:

Locale files
~~~~~~~~~~~~

.. container:: table-row

   Field
         Locale files
   
   Description
         Here you can reference several locale files for the MediaElement. Used
         by video and audio type. Allowed types are:
         
         MP4 WEBM OGG MPEG M4V OGV MOV RTMP AAC MP1 MP2 MP3 MPG M4A OGA WAV
         FLV.



.. _External-files:

External files
~~~~~~~~~~~~~~

.. container:: table-row

   Field
         External files
   
   Description
         Reference several external files for the MediaElement. Used by all
         types. Several files by using one line per file.



.. _Track-files:

Track files
~~~~~~~~~~~

.. container:: table-row

   Field
         Track files
   
   Description
         Reference locale track-files for subtitle use. Allowed file types are:
         
         VTT TTML SRT TXT CSV XML



.. _Track-label:

Track label
~~~~~~~~~~~

.. container:: table-row

   Field
         Track label
   
   Description
         You can add a Track label and a language type. Highly recommend for
         multi language subtitles. Fallback (if empty) is “English\|en”. One
         line per track file.


.. ###### END~OF~TABLE ######


.. _Sheet-Description:

Sheet “Description”
"""""""""""""""""""

.. ### BEGIN~OF~TABLE ###


.. _Title:

Title
~~~~~

.. container:: table-row

   Field
         Title
   
   Description
         Title of the MediaElements file (required).



.. _Description:

Description
~~~~~~~~~~~

.. container:: table-row

   Field
         Description
   
   Description
         Description for MediaElements file.



.. _Author:

Author
~~~~~~

.. container:: table-row

   Field
         Author
   
   Description
         Author of MediaElements file.



.. _Image:

Image
~~~~~

.. container:: table-row

   Field
         Image
   
   Description
         Poster image for MediaElements file


.. ###### END~OF~TABLE ######


.. _Sheet-Access:

Sheet “Access”
""""""""""""""

.. ### BEGIN~OF~TABLE ###


.. _Hidden:

Hidden
~~~~~~

.. container:: table-row

   Field
         Hidden
   
   Description
         Hides MediaElements file in Frontend, if checked



.. _Start:

Start
~~~~~

.. container:: table-row

   Field
         Start
   
   Description
         If set, starts showing MediaElements file for frontend users at this
         time



.. _Stop:

Stop
~~~~

.. container:: table-row

   Field
         Stop
   
   Description
         If set, stops showing MediaElements file for frontend users at this
         time



.. _Access:

Access
~~~~~~

.. container:: table-row

   Field
         Access
   
   Description
         Restricts access of file


.. ###### END~OF~TABLE ######


.. _The-MediaElements-plugin:

The MediaElements plugin
^^^^^^^^^^^^^^^^^^^^^^^^

In the MediaElements plugin you can configure layout and behaviour of
the plugin. Note, that each most of the functions can also be
configured by TypoScript. Typoscript will be overwritten by this
configuration.


.. _Sheet-Layout:

Sheet “Layout”
""""""""""""""


.. ### BEGIN~OF~TABLE ###


.. _Width-of-player:

Width of player
~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         Width of player
   
   Data type
         Int
   
   Description
         Width of the player in px.



.. _Height-of-player:

Height of player
~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         Height of player
   
   Data type
         Int
   
   Description
         Height of the player in px.



.. _Responsive-Design:

Responsive Design
~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         Responsive Design
   
   Data type
         Boolean
   
   Description
         If set to true, player will resize to content width.



.. _Show-Playlist:

Show Playlist?
~~~~~~~~~~~~~~

.. container:: table-row

   Property
         Show Playlist?
   
   Data type
         Select
   
   Description
         If set to “above the player” a playlist of all plugin items will be
         shown above the player. If set to “under the player” it will be shown
         under the player.



.. _Width-of-whole-container:

Width of whole container?
~~~~~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         Width of whole container?
   
   Data type
         Int
   
   Description
         Set a width of the whole plugin container in px.



.. _Height-of-Playlist:

Height of Playlist
~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         Height of Playlist
   
   Data type
         Int
   
   Description
         Height of playlist in px.


.. ###### END~OF~TABLE ######


.. _Sheet-Behaviour:

Sheet “Behaviour”
"""""""""""""""""


.. ### BEGIN~OF~TABLE ###


.. _Show-controller:

Show controller
~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         Show controller
   
   Data type
         Boolean
   
   Description
         If set to true, player controller will be shown.



.. _Autoplay:

Autoplay
~~~~~~~~

.. container:: table-row

   Property
         Autoplay
   
   Data type
         Boolean
   
   Description
         Autoplays Mediaelement.



.. _Preload:

Preload
~~~~~~~

.. container:: table-row

   Property
         Preload
   
   Data type
         Boolean
   
   Description
         Preload the Mediaelement while page loads.



.. _Loop:

Loop
~~~~

.. container:: table-row

   Property
         Loop
   
   Data type
         Boolean
   
   Description
         Loop Mediaelement.



.. _Muted:

Muted
~~~~~

.. container:: table-row

   Property
         Muted
   
   Data type
         Boolean
   
   Description
         Mutes Mediaelement.


.. ###### END~OF~TABLE ######


.. _Administration:

Administration
--------------


.. _Global-script-use:

Global script use
^^^^^^^^^^^^^^^^^

You can use MediaElements.js as global source of your page. That
means, that the source will be loaded with every page of your website
– just like a JavaScript libary or your page CSS – and include a
global initialization of the script in the footer of your website. In
this way MediaElements.js will handle all HTML5 – mediatags and also
pseudo tags like Youtube and Vimeo in other content elements.

If you want to use it, you have to set “Global script use” in the main
configuration of the mediaelements extension, so extra scripts to
initialize MediaElement.js in the plugin will not be rendered. If you
do that, the needed sources will be included by Typoscript-Setup to
the configuration array of each page. To change script pathes, it is
recommended to change them by editing the TypoScript constants.
TypoScript constants of the static template of the extension looks
like that:

::

   plugin.tx_mediaelements_pi1 {
           jQueryRes = EXT:mediaelements/lib/jquery-1.6.1.min.js
           mediaelementsJSRes = EXT:mediaelements/lib/mediaelement-and-player.js
           cssFile = EXT:mediaelements/lib/mediaelementplayer.css
           cssFilePlaylist = EXT:mediaelements/lib/mediaelementplaylist.css
   }


.. _Configuration:

Configuration
-------------


.. _Reference:

Reference
^^^^^^^^^

Reference of TypoScript options.


.. ### BEGIN~OF~TABLE ###


.. _jQueryRes:

jQueryRes
"""""""""

.. container:: table-row

   Property
         jQueryRes
   
   Data type
         String
   
   Description
         Path to the jQuery rescource of MediaElements. If you are already
         using jQuery on your page, make sure to clear this source.
         
         **Example:**
         
         ::
         
            jQueryRes >
   
   Default
         EXT:mediaelements/lib/jquery-1.6.1.min.js



.. _mediaelementsJSRes:

mediaelementsJSRes
""""""""""""""""""

.. container:: table-row

   Property
         mediaelementsJSRes
   
   Data type
         String
   
   Description
         Path to the MediaElement.JS resource.
   
   Default
         EXT:mediaelements/lib/mediaelement-and-player.js



.. _cssFile:

cssFile
"""""""

.. container:: table-row

   Property
         cssFile
   
   Data type
         String
   
   Description
         Path to the CSS resource of MediaElements.JS player
   
   Default
         EXT:mediaelements/lib/mediaelementplayer.css



.. _cssFilePlaylist:

cssFilePlaylist
"""""""""""""""

.. container:: table-row

   Property
         cssFilePlaylist
   
   Data type
         String
   
   Description
         Path to the CSS resource of the MediaElements playlist
   
   Default
         EXT:mediaelements/lib/mediaelementplaylist.css



.. _showPlaylist:

showPlaylist
""""""""""""

.. container:: table-row

   Property
         showPlaylist
   
   Data type
         String
   
   Description
         **Example:**
         
         ::
         
            # Don't show a playlist
            showPlaylist = 0
            # show playlist above player
            showPlaylist = top
            # show playlist beneath player
            showPlaylist = bottom
   
   Default
         0



.. _responsiveDesign:

responsiveDesign
""""""""""""""""

.. container:: table-row

   Property
         responsiveDesign
   
   Data type
         Boolean
   
   Description
         Resize Player to content width of user device (responsive webdesign)
   
   Default
         0



.. _playerWidth:

playerWidth
"""""""""""

.. container:: table-row

   Property
         playerWidth
   
   Data type
         Int
   
   Description
         Width of the player in px. If you have set a poster image to your
         MediaElements file, it will also be rendered in this width.
   
   Default
         480



.. _playerHeight:

playerHeight
""""""""""""

.. container:: table-row

   Property
         playerHeight
   
   Data type
         Int
   
   Description
         Height of the player in px. If you have set a poster image to your
         MediaElements file, it will also be rendered in this Height.
   
   Default
         270



.. _playlistHeight:

playlistHeight
""""""""""""""

.. container:: table-row

   Property
         playlistHeight
   
   Data type
         Int
   
   Description
         Height of the current playlist in px
   
   Default
         200



.. _thumbWidth:

thumbWidth
""""""""""

.. container:: table-row

   Property
         thumbWidth
   
   Data type
         String
   
   Description
         Width of thumbnails of poster images in playlist
   
   Default
         50c



.. _thumbHeight:

thumbHeight
"""""""""""

.. container:: table-row

   Property
         thumbHeight
   
   Data type
         String
   
   Description
         Height of thumbnails of poster images in playlist
   
   Default
         50c



.. _controls:

controls
""""""""

.. container:: table-row

   Property
         controls
   
   Data type
         Boolean
   
   Description
         If set, controllers are shown in mediaplayer
   
   Default
         1



.. _autoplay:

autoplay
""""""""

.. container:: table-row

   Property
         autoplay
   
   Data type
         Boolean
   
   Description
         If set, mediaplayer will autoplay the MediaElement
   
   Default
         0



.. _preload:

preload
"""""""

.. container:: table-row

   Property
         preload
   
   Data type
         Boolean
   
   Description
         If set, mediaelement will preload
   
   Default
         0



.. _loop:

loop
""""

.. container:: table-row

   Property
         loop
   
   Data type
         Boolean
   
   Description
         If set, mediaelement will be played in a loop, instead of stopping
         after finish
   
   Default
         0



.. _muted:

muted
"""""

.. container:: table-row

   Property
         muted
   
   Data type
         Boolean
   
   Description
         If set, mediaelement will be played muted (only for videos)
   
   Default
         0


.. ###### END~OF~TABLE ######


[tsref:plugin.tx\_mediaelements\_pi1]


.. _Set-different-configurations-for-audio-and-video-elements:

Set different configurations for audio and video elements
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""

It is also possible, to configure some TypoScript parameters –
behavior, player size and thumb size - different for video and audio
elements. This is just done by that:

::

   plugin.tx_mediaelements_pi1 {
       video {
               # your video configuration
       }
       audio {
               # your audio configuration
       }
   }


.. _Set-a-different-configuration-for-use-in-tt-news:

Set a different configuration for use in tt\_news
"""""""""""""""""""""""""""""""""""""""""""""""""

If you want to set a different configuration for MediaElements in
tt\_news, it is very easy to be done. You can do this by set up a
configuration as child configuration of tt\_news, which is loaded to
the configuration array of the plugin, if you use it in tt\_news:

::

   plugin.tt_news {
       tx_mediaelements {
               # your configuration
       }
   }


.. _Known-problems:

Known problems
--------------

\- Does not work correctly on iPad and iPhone. There's a workaround
integrated, but should be fixed

\- responsive resize problem in Internet Explorer

\- responsive resize does not work by turning mobile devices


.. _To-Do-list:

To-Do list
----------

\- include missed features of mediaelement.js like backlight,
skins,...

\- include a feature to set up own js-config for each mediaelements
file

\- ...


.. _ChangeLog:

ChangeLog
---------

.. ### BEGIN~OF~TABLE ###


.. _0-1-0:

0.1.0
^^^^^

.. container:: table-row

   Version
         0.1.0
   
   Changes
         Initial release


.. ###### END~OF~TABLE ######


.. ######CUTTER_MARK_IMAGES######

.. |img-1| image:: img-1.png
.. :align: left
.. :border: 0
.. :height: 44
.. :id: graphics5
.. :name: graphics5
.. :vspace: 57
.. :width: 161

.. |img-2| image:: img-2.png
.. :align: left

.. |img-3| image:: img-3.png
.. :align: left
.. :border: 0
.. :height: 306
.. :id: Grafik3
.. :name: Grafik3
.. :width: 308

.. |img-4| image:: img-4.png
.. :align: left
.. :border: 0
.. :height: 296
.. :id: Grafik2
.. :name: Grafik2
.. :width: 339

.. |img-5| image:: img-5.png
.. :align: left
.. :border: 0
.. :height: 228
.. :id: Grafik1
.. :name: Grafik1
.. :width: 374

.. |img-6| image:: img-6.png
.. :align: left
.. :border: 0
.. :height: 33
.. :id: Grafik4
.. :name: Grafik4
.. :width: 284

.. |img-7| image:: img-7.png
.. :align: left
.. :border: 0
.. :height: 289
.. :id: Grafik5
.. :name: Grafik5
.. :width: 441

.. |img-8| image:: img-8.png
.. :align: left
.. :border: 0
.. :height: 31
.. :id: Grafik6
.. :name: Grafik6
.. :width: 275

.. |img-9| image:: img-9.png
.. :align: left
.. :border: 0
.. :height: 283
.. :id: Grafik7
.. :name: Grafik7
.. :width: 351

.. |img-10| image:: img-10.png
.. :align: left
.. :border: 0
.. :height: 107
.. :id: Grafik8
.. :name: Grafik8
.. :width: 323