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

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

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

`Introduction 3 <#Introduction|outline>`_

What does it do? 3

Screenshots 4

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

Video- or Audio-Integration 5

MBKD :: Video Plugin-Configuration 6

`Administration 7 <#Administration|outline>`_

Used JavaScript-Scripts 7

Used Players 7

`Configuration 8 <#Configuration|outline>`_

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

`ChangeLog 13 <#ChangeLog|outline>`_

Introduction

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

HTML5-Video

img-3

HTML5-Audio

img-4

Flash-Flowplayer

img-5

Users manual

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

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

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

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/ , initial release, report bugs to: mail@katjadeutschmann.de

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

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

TypoScript

Extension TypoScript-Setup for “plugin.tx_mbkdvideo_pi1.”

wrapinbaseclass

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

Property

smarty.template_dir

Data type

string (path)

Description

Define your own Smarty-Template-Dir

    1. fileadmin/templates/smarty/

Default

null

smarty.compile_dir

Property

smarty.compile_dir

Data type

string (path)

Description

Define your own Smarty-Compile-Dir

Default

null

smarty.templates.template

Property

smarty.templates.template

Data type

string (path)

Description

Video/Audio/Flash-Template (Smarty) [within smarty.template_dir]

    1. myAudioVideoFlashTemplate.tpl

Default

videoaudio_template.tpl

googleAjaxLibrary.useGoogleLibs

Property

googleAjaxLibrary.useGoogleLibs

Data type

boolean

Description

Choose wether to include jQuery and swfobject via Google Ajax Library

Default

0

googleAjaxLibrary.key

Property

googleAjaxLibrary.key

Data type

string

Description

Google Maps API Key

Default

null

googleAjaxLibrary.jqueryVersion

Property

googleAjaxLibrary.jqueryVersion

Data type

string

Description

jQuery version number

Default

1.5.2

googleAjaxLibrary.swfObjectVersion

Property

googleAjaxLibrary.swfObjectVersion

Data type

string

Description

swfobject version number

Default

2.2

jquery.path

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

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

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

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

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

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

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

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

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

Property

html5videoDefaults.width

Data type

integer

Description

Fallback-Width in px of Video if not specified within Backend-Plugin- Configuration.

Default

480

html5videoDefaults.height

Property

html5videoDefaults.height

Data type

integer

Description

Fallback-Height in px of Video if not specified within Backend-Plugin- Configuration.

Default

360

poster

Property

poster

Data type

string (path)

Description

Default-Poster-Image of Videos if not specified within Backend-Plugin- Configuration.

Default

null

html5audioDefaults.width

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

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

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

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)

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

None yet.

ChangeLog

See ChangeLog-File in Extension-Root-Folder.

13