Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Home

adben edited this page · 8 revisions
Clone this wiki locally

Goal

  • Compatibility with all current browser implementations of HTML5 (H.264 and Theora)
  • Flash fallback for older gen browsers
  • Platform detection
  • Mobile device support
  • Support for media assets to the Hippo WYSIWYG Editor (Xinha)
  • Support for most common proprietary multimedia format(i.e. wma, quicktime, realAudio)
  • Capability to identify and handle the insertion of the media type in the appropriate way, depending on the resource type.
  • Support for mainstream Internet video services: youtube.com, vimeo.com etc.

Requirements

  • Provide a transparent way to switch to Flash-based player in order to serve FLV, H.264, MP4, MP3, AAC, JPG, PNG and GIF resources.
  • Use of an OpenSource player
  • Customization (skinning, logo, playback controls)
  • Playlist feature

Example

If browser not supports html5 video(web, mp4) do fallback to object element; flash(if the source is an flv or an swf or any of the formats supported in the jwplayer project) or wmv, qt, rm  format, etc. If none of the options above are supported, fallback to an image?? of “no video playback capabilities in this browser”.













No video playback capabilities

Implementation

The Hippo Media Plugin consists of

  • a Xinha toolbar button that will allow editors to inject media assets into a rich text editor
  • Hippo HTML Cleaner configuration which allows {{}} items to be rendered on the frontend side; read more on [how to configure the Rich-text fields|https://wiki.onehippo.com/display/CMS7/Configure+the+Rich-text+fields+(Xinha)]
  • [JW Player|http://www.longtailvideo.com/players/jw-flv-player/] \- the de facto standard Open Source Media Player

Installation in a existing project

  1. checkout the files
    {code:|borderStyle=solid}git clone git://github.com/sourcesense/hippo-media-plugin.git{code}
    into
    {code:|borderStyle=solid} /cms/xinha/xinha/plugins/InsertMedia{code}
  2. deploy on your server in the path….
    {code:|borderStyle=solid} /cms/xinha/xinha/plugins/InsertMedia{code}
    (together with all js/html/img files)
  3. insert the xinha fields
    xinha-config.xml …
    {code:|borderStyle=solid}(/hippo:namespaces/hippostd/html/editor:templates/default/root){code}
    1. InsertMedia into (Xinha.plugins)
    2. insertmedia into (Xinha.config.toolbar)
  4. configure the HTML Cleaner
    To embed a media object, the following element has to be added to the HTML cleaner configuration
    {code:|borderStyle=solid}/hippo:configuration/hippo:frontend/cms/cms-services/htmlCleanerService/cleaner.config{code}
    object
    {code:|borderStyle=solid}
    hippohtmlcleaner:name: object
    hippohtmlcleaner:attributes: the names of the allowed attributes for the element
    Required attributes: width, height, data, classid, name, and type.
    {code}
    params
    {code:|borderStyle=solid}
    hippohtmlcleaner:name: param
    hippohtmlcleaner:attributes: the names of the allowed attributes for the element
    Required attributes: name, value
    {code}
    embed
    {code:|borderStyle=solid}
    hippohtmlcleaner:name: embed
    hippohtmlcleaner:attributes: the names of the allowed attributes for the element
    Required attributes: name, value
    {code}

Clean Installation

From the root folder:
> mvn clean install
> cd hippo-media-plugin-cms
> mvn jetty:run-war

Apache Maven 2.x is required (version 2.2.1 is advised)

Something went wrong with that request. Please try again.