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


========================================================
EXT: Video-Extension HTML5-Video/Audio Flash-Video/Audio
========================================================

:Author:
      Kasper Skårhøj

:Created:
      2002-11-01T00:32:00

:Changed:
      2011-04-21T08:20:03.010000000

:Classification:
      mbkdvideo

:Description:
      Easy to handle and comfortable Extension for videos. Different modes for output (HTML5-Video [with Flash-Fallback], HTML5-Audio [with Flash-Fallback], Flash). Standard-Integration: forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) Adaption of JS-Starters: forAdmins (use this for Administrators) forDevelopers (use this for Developers)

:Keywords:
      Video, HTML5-Video, HTML5-Audio, Flash-Video, Flash-Audio, Flash-Fallback

:Author:
      Markus Brunner, Katja Deutschmann

:Email:
      mail@markusbrunner-design.de, katja.deutschmann@gmx.de

:Extension-Support:
      Markus Brunner

:Flash-Fallback-Support:
      Katja Deutschmann

:URL:
      http://www.markusbrunner-design.de, http://www.katjadeutschmann.de

:Language:
      en


|img-1| |img-2| EXT: Video-Extension HTML5-Video/Audio Flash-
Video/Audio - mbkdvideo


.. _EXT-Video-Extension-HTML5-Video-Audio-Flash-Video-Audio:

EXT: Video-Extension HTML5-Video/Audio Flash-Video/Audio
========================================================

Extension Key: mbkdvideo

Language: en

Keywords: Video, HTML5-Video, HTML5-Audio, Flash-Video, Flash-Audio,
Flash-Fallback

Copyright 2000-2008, Markus Brunner, Katja Deutschmann, <mail
@markusbrunner-design.de, katja.deutschmann@gmx.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.org

.. _Table-of-Contents:

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

`EXT: Video-Extension HTML5-Video/Audio Flash-Video/Audio 1 <#1.EXT
:%20Video-Extension%20HTML5-Video/Audio%20Flash-Video/Audio|outline>`_

**`Introduction 3 <#Introduction|outline>`_**

`What does it do? 3 <#What%20does%20it%20do_|outline>`_

`Screenshots 4 <#Screenshots|outline>`_

**`Users manual 5 <#Users%20manual|outline>`_**

`Video- or Audio-Integration 5 <#Video-%20or%20Audio-
Integration|outline>`_

`MBKD :: Video Plugin-Configuration 6 <#MBKD%20::%20Video%20Plugin-
Configuration|outline>`_

**`Administration 7 <#Administration|outline>`_**

`Used JavaScript-Scripts 7 <#Used%20JavaScript-Scripts|outline>`_

`Used Players 7 <#Used%20Players|outline>`_

**`Configuration 8 <#Configuration|outline>`_**

**`Known problems 12 <#Known%20problems|outline>`_**

**`ChangeLog 13 <#ChangeLog|outline>`_**


.. _Introduction:

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


.. _What-does-it-do:

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

- Displays HTML5-Video-Files or HTML5-Audio-Files with Flash-Fallback
  (alternatively direct Flash-Output).

- Reads images out of folder-file-combinations (also external files) or
  directly all files out of a directory (only files on own server).


.. _Screenshots:

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


.. _HTML5-Video:

HTML5-Video
"""""""""""

|img-3|


.. _HTML5-Audio:

HTML5-Audio
"""""""""""

|img-4|


.. _Flash-Flowplayer:

Flash-Flowplayer
""""""""""""""""

|img-5|


.. _Users-manual:

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


.. _Video-or-Audio-Integration:

Video- or Audio-Integration
^^^^^^^^^^^^^^^^^^^^^^^^^^^

After installation of the extension in the Extension Manager, you can
insert the MBKD :: Video (pi1) on each page as a Content Element.

For Correct output:

Check if folder “uploads/tx\_mbkdvideo/” is created within
installation – otherwise: create it!

Include the static TypoScript-Template (see chapter Configuration) or
define all TypoScript-Setup-Configurations yourself. You can find the
static template in: EXT:mbkdvideo/static/setup.txt


.. _MBKD-Video-Plugin-Configuration:

MBKD :: Video Plugin-Configuration
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

I think it's easy to handle this form. If there are any questions, I
can add this info here in future.

Some Information:

- Select your mode HTML5-Video/HTML5-Audio/Flash → Formfields are
  reloaded depending on selection!

- Filetitle is optional and displayed differently in every view-mode
  (you can include this description everywhere by overwriting the
  template-file (see Chapter Configuration)

- Select your folder!

- Specify all files – this can be optional if you want to select all
  valid files out of the specified folder and this folder is not
  external!

|img-6|


.. _Administration:

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

This Extension produces no own database-tables. No exclude-fields to
configure.


.. _Used-JavaScript-Scripts:

Used JavaScript-Scripts
^^^^^^^^^^^^^^^^^^^^^^^

I want to thank all authors of these fabulous open source scripts:

HTML5-Audio-Video-Fallback:
EXT:mbkdvideo/res/js/html5audiovideofallback.min.js, © Katja
Deutschmann, `http://www.katjadeutschmann.de/
<http://www.katjadeutschmann.de/>`_ , initial release, report bugs to:
`mail@katjadeutschmann.de <mailto:mail@katjadeutschmann.de>`_


.. _Used-Players:

Used Players
^^^^^^^^^^^^

I want to thank all authors of these fabulous open source video
players:

Flowplayer: EXT:mbkdvideo/res/flowplayer/, © Flowplayer 2009-2011, GNU
General Public License


.. _Configuration:

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

At first include the static TypoScript-File “MBKD :: Video Std.” into
your Main Template, or alternatively add all TypoScript-Setup of this
file (EXT:mbkdvideo/static/setup.txt) directly into your TS-Setup:

|img-7|


.. _generated:

((generated))
^^^^^^^^^^^^^

.. _TypoScript:

TypoScript
""""""""""

Extension TypoScript-Setup for “plugin.tx\_mbkdvideo\_pi1.”

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


.. _wrapinbaseclass:

wrapinbaseclass
~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         wrapinbaseclass
   
   Data type
         integer
   
   Description
         Choose if the frontend plugin is wrapped with the standard extension
         wrapper: '<div class=”tx-mbkdvideo-pi1”>\|</div>'.
         
         0 = disable wrapping
         
         1 = enable wrapping
   
   Default
         0



.. _smarty-template-dir:

smarty.template\_dir
~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         smarty.template\_dir
   
   Data type
         string (path)
   
   Description
         Define your own Smarty-Template-Dir
         
         E. g. fileadmin/templates/smarty/
   
   Default
         null



.. _smarty-compile-dir:

smarty.compile\_dir
~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         smarty.compile\_dir
   
   Data type
         string (path)
   
   Description
         Define your own Smarty-Compile-Dir
   
   Default
         null



.. _smarty-templates-template:

smarty.templates.template
~~~~~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         smarty.templates.template
   
   Data type
         string (path)
   
   Description
         Video/Audio/Flash-Template (Smarty) [within smarty.template\_dir]
         
         E. g. myAudioVideoFlashTemplate.tpl
   
   Default
         videoaudio\_template.tpl



.. _googleAjaxLibrary-useGoogleLibs:

googleAjaxLibrary.useGoogleLibs
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         googleAjaxLibrary.useGoogleLibs
   
   Data type
         boolean
   
   Description
         Choose wether to include jQuery and swfobject via Google Ajax Library
   
   Default
         0



.. _googleAjaxLibrary-key:

googleAjaxLibrary.key
~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         googleAjaxLibrary.key
   
   Data type
         string
   
   Description
         Google Maps API Key
   
   Default
         null



.. _googleAjaxLibrary-jqueryVersion:

googleAjaxLibrary.jqueryVersion
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         googleAjaxLibrary.jqueryVersion
   
   Data type
         string
   
   Description
         jQuery version number
   
   Default
         1.5.2



.. _googleAjaxLibrary-swfObjectVersion:

googleAjaxLibrary.swfObjectVersion
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         googleAjaxLibrary.swfObjectVersion
   
   Data type
         string
   
   Description
         swfobject version number
   
   Default
         2.2



.. _jquery-path:

jquery.path
~~~~~~~~~~~

.. container:: table-row

   Property
         jquery.path
   
   Data type
         String (path)
   
   Description
         Overwrite this property to determine where your local jQuery-Version
         is located. This way your jQuery-Version is included instead of the
         extension one.
   
   Default
         null



.. _jquery-doNotIncludeViaExtension:

jquery.doNotIncludeViaExtension
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         jquery.doNotIncludeViaExtension
   
   Data type
         integer
   
   Description
         Choose wether NOT to include jQuery via Extension
         
         0 = jQuery included via extension
         
         1 = you have to include jQuery on your own
   
   Default
         0



.. _swfobject-path:

swfobject.path
~~~~~~~~~~~~~~

.. container:: table-row

   Property
         swfobject.path
   
   Data type
         string (path)
   
   Description
         Overwrite this property to determine where your local swfobject-
         Version is located. This way your swfobject-Version is included
         instead of the extension one.
   
   Default
         null



.. _swfobject-doNotIncludeViaExtension:

swfobject.doNotIncludeViaExtension
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         swfobject.doNotIncludeViaExtension
   
   Data type
         integer
   
   Description
         Choose wether NOT to include swfobject via Extension
         
         0 = swfobject included via extension
         
         1 = you have to include swfobject on your own
   
   Default
         0



.. _html5VideoAudioFallback-useVideoAudioFallback:

html5VideoAudioFallback.useVideoAudioFallback
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         html5VideoAudioFallback.useVideoAudioFallback
   
   Data type
         integer
   
   Description
         Choose wether to use the flash-fallback if your browser does not
         support html5-video/audio with this file-format
         
         0 = disable flash-fallback
         
         1 = enable flash-fallback
   
   Default
         1



.. _Html5VideoAudioFallback-starterOverwrite:

Html5VideoAudioFallback.starterOverwrite
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         Html5VideoAudioFallback.starterOverwrite
   
   Data type
         string (path)
   
   Description
         You can use this option to overwrite the path to the original Flash-
         Fallback-Starter located in
         EXT:mbkdvideo/res/js/starter\_flowplayer.js
         
         This way you can overwrite flowplayer-options or include another
         flash-player than flowplayer (for fallback only) without changing
         original extension-files.
   
   Default
         null



.. _directory-glob-filetypes:

directory.glob\_filetypes
~~~~~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         directory.glob\_filetypes
   
   Data type
         string
         
         file-pattern
   
   Description
         File-Pattern for the glob()-function to search for files within a
         directory.
   
   Default
         \*.ogg,\*.oga,\*.ogv,\*.mp4,\*.mp3,\*.m4a,\*.webm,\*.swf



.. _mime-type-by-finfo:

mime\_type\_by\_finfo
~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         mime\_type\_by\_finfo
   
   Data type
         Boolean
   
   Description
         Choose wether to use PHP >= 5.3 function finfo for getting the mime-
         type of a file (if the function does not exist, fallback is used
         instead [like when you disable this option])
         
         0 = disable finfo mime\_type search
         
         1 = enable finfo mime\_type search
   
   Default
         1



.. _mime-types:

mime\_types
~~~~~~~~~~~

.. container:: table-row

   Property
         mime\_types
   
   Data type
         array
   
   Description
         Matching of file-extensions to mime-type-appendixes. This is used if
         mime\_type\_by\_finfo is disabled of finfo-function is not available
         (PHP < 5.3).
   
   Default
         ogg = ogg
         
         oga = ogg
         
         ogv = ogg
         
         mp4 = mp4
         
         mp3 = mpeg
         
         m4a = m4a
         
         webm = webm
         
         swf = x-flv



.. _html5videoDefaults-width:

html5videoDefaults.width
~~~~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         html5videoDefaults.width
   
   Data type
         integer
   
   Description
         Fallback-Width in px of Video if not specified within Backend-Plugin-
         Configuration.
   
   Default
         480



.. _html5videoDefaults-height:

html5videoDefaults.height
~~~~~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         html5videoDefaults.height
   
   Data type
         integer
   
   Description
         Fallback-Height in px of Video if not specified within Backend-Plugin-
         Configuration.
   
   Default
         360



.. _poster:

poster
~~~~~~

.. container:: table-row

   Property
         poster
   
   Data type
         string (path)
   
   Description
         Default-Poster-Image of Videos if not specified within Backend-Plugin-
         Configuration.
   
   Default
         null



.. _html5audioDefaults-width:

html5audioDefaults.width
~~~~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         html5audioDefaults.width
   
   Data type
         integer
   
   Description
         Fallback-Width in px of Audio (Flash) if not specified within Backend-
         Plugin-Configuration.
   
   Default
         300



.. _html5audioDefaults-height:

html5audioDefaults.height
~~~~~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         html5audioDefaults.height
   
   Data type
         integer
   
   Description
         Fallback-Height in px of Audio (Flash) if not specified within
         Backend-Plugin-Configuration.
   
   Default
         25



.. _flashDefaults-includeFlashOnlyOnClick:

flashDefaults.includeFlashOnlyOnClick
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   Property
         flashDefaults.includeFlashOnlyOnClick
   
   Data type
         integer
   
   Description
         Choose wether to include the flowplayer only on-click of the play-
         button. This is better for your server-load if no one wants to watch
         the movie :-) or otherwise if you only want to show the plain poster-
         pic with a play-button on it. To improve the usability select the
         autoplay-option within the Backend-Configuration – this way no two
         clicks are needed to watch the movie.
         
         0 = include Flash-Videos directly
         
         1 = include Flash-Videos only after click
   
   Default
         1


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


.. _Extensionaccess:

Extensionaccess
"""""""""""""""

If you want to include this extension as a developer directly into
your own extension, you can do this via some specific TypoScript-
Setup, PHP and Flexform-XML only used for this purpose (see mbprojects
for an integration-example).

Flexform: you can copy the flexform of mbkdvideo, to get all input
possibilities of the extension → EXT:mbkdvideo/flexform.xml – for
getting the flexform initialized, you have to add some lines to your
extension's ext\_tables.php:

::

   /*
    * Flexform integration
    */
   $TCA['tt_content']['types']['list']['subtypes_addlist'][$_EXTKEY.'_pi1'] ='pi_flexform';
   t3lib_extMgm::addPiFlexFormValue($_EXTKEY.'_pi1', 'FILE:EXT:'.$_EXTKEY . '/flexform.xml');

PHP: her is a method out of mbprojects you can use 1:1 for integration
in your own extension; fill the method with infos out of flexform:

::

   protected function _getExternalMBKDVideo($extKey, $uploadPath = '', $videofiles = '', $width = 400, $height = 300, $showVideo = true) {
                   
               $content = '';
                 
               // include mbkdvideo Extension
                 if(t3lib_extMgm::isLoaded('mbkdvideo') && $showVideo) {
   
                    // get mbkdvideo-object
                        include_once(t3lib_extMgm::extPath('mbkdvideo').'pi1/class.tx_mbkdvideo_pi1.php');
                     $videoObj = t3lib_div::makeInstance('tx_mbkdvideo_pi1');
                       $videoObj->cObj = t3lib_div::makeInstance('tslib_cObj');
                    // get TypoScript of extension
                         $videoObjSetup = $GLOBALS['TSFE']->tmpl->setup['plugin.']['tx_mbkdvideo_pi1.'];
                          // overwrite extension-TypoScript with external extension vars
                         $videoObjSetup['extensionaccess'] = 1;
                         if(is_array($this->conf['mbkdvideo.'])) {
                                   foreach($this->conf['mbkdvideo.'] AS $key => $value) {
                                           $videoObjSetup['extensionaccess.'][$key] = $value;
                             }
                      }
                      // fill extension vars
                         $videoObjSetup['extensionaccess.']['uploadPath'] = $uploadPath;
                        $videoObjSetup['extensionaccess.']['files'] = $videofiles;
                     $videoObjSetup['extensionaccess.']['width'] = $width;
                          $videoObjSetup['extensionaccess.']['height'] = $height;
                        $videoObjSetup['extensionaccess.']['displaySwitch'] = 'html5video';
                    $videoObjSetup['extensionaccess.']['html5controls'] = '1';
                     $videoObjSetup['extensionaccess.']['html5preload'] = 'none';
                           // get video-html-content
                      $content = $videoObj->main("", $videoObjSetup);
                   }
              
               return $content;
       }


.. _Include-the-extension-TypoScript-Setup-directly-into-your-TypoScript-Setup-alternative-to-static-TypoScript-Setup-File:

Include the extension-TypoScript-Setup directly into your TypoScript-Setup (alternative to static TypoScript-Setup-File)
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

This is only an example and reflects the whole needed TypoScript, so
no static TypoScript-File is needed furthermore.

::

   plugin.tx_mbkdvideo_pi1 {
       
       wrapInBaseClass = 0
       
       smarty {
               #template_dir = typo3conf/ext/mbkdvideo/res/smarty/templates/
               #compile_dir =  typo3conf/ext/mbkdvideo/res/smarty/templates_c/
               templates {
                       template = videoaudio_template.tpl
               }
       }
       
       googleAjaxLibrary {
               useGoogleLibs = 0
               key >
               jqueryVersion = 1.5.2
               swfObjectVersion = 2.2
       }
       
       # jQuery Library
       jquery {
               path >
               doNotIncludeViaExtension = 0
       }
       
       # swfobject
       swfobject {
               path >
               doNotIncludeViaExtension = 0
       }
       
       # Video-Audio-Fallback
       html5VideoAudioFallback {
               useVideoAudioFallback = 1
               
               # here you can include your own starter perhaps with another player
               starterOverwrite = 
       }
       
       # reading images out of directory
       directory {
               glob_filetypes = *.ogg,*.oga,*.ogv,*.mp4,*.mp3,*.m4a,*.webm,*.swf
       }
       
       # Mime-Type-Mapping
       mime_type_by_finfo = 1
       mime_types {
               ogg = ogg
               oga = ogg
               ogv = ogg
               mp4 = mp4
               mp3 = mpeg
               m4a = m4a
               webm = webm
               swf = swf
       }
       
       # html5 video default values - if not overwritten
       html5videoDefaults {
               width = 480
               height = 360
               poster >
       }
       
       # html5 audio default values - if not overwritten
       html5audioDefaults {
               width = 300
               height = 25
       }
       
       # flash-mode
       flashDefaults {
               includeFlashOnlyOnClick = 1
       }
   }


.. _Known-problems:

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

None yet.


.. _ChangeLog:

ChangeLog
---------

See ChangeLog-File in Extension-Root-Folder.

13


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

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

.. |img-2| image:: img-2.png
.. :border: 0
.. :height: 21
.. :hspace: 9
.. :id: Grafik2
.. :name: Grafik2
.. :width: 87

.. |img-3| image:: img-3.jpeg
.. :align: left
.. :border: 0
.. :height: 329
.. :id: Grafik1
.. :name: Grafik1
.. :width: 417

.. |img-4| image:: img-4.jpeg
.. :align: left
.. :border: 0
.. :height: 31
.. :id: Grafik3
.. :name: Grafik3
.. :width: 320

.. |img-5| image:: img-5.jpeg
.. :align: left
.. :border: 0
.. :height: 362
.. :id: Grafik4
.. :name: Grafik4
.. :width: 479

.. |img-6| image:: img-6.jpeg
.. :align: left
.. :border: 0
.. :height: 700
.. :id: Grafik5
.. :name: Grafik5
.. :width: 509

.. |img-7| image:: img-7.jpeg
.. :align: left
.. :border: 0
.. :height: 393
.. :id: Grafik7
.. :name: Grafik7
.. :width: 379