EXT: MediaElements¶

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¶

Backend: MediaElement plugin

Backend: Mediaelement file

Frontend: Mediaelement Plugin in frontend view

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¶

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.

The MediaElements file record¶

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

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.

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
}

Reference¶

Reference of TypoScript options.

jQueryRes >

# Don't show a playlist
showPlaylist = 0
# show playlist above player
showPlaylist = top
# show playlist beneath player
showPlaylist = bottom

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

plugin.tt_news {
    tx_mediaelements {
            # your configuration
    }
}

0.1.0¶