MediaElementPlugin

Cross-browser embedding of videos and audios

This plugin adds media support to Foswiki using MediaElement.js. MediaElement.js is an easy cross-browser HTML5 audio and video player in pure HTML and CSS while providing a Flash or Silverlight fallback for older browsers. MediaElement.js is a fully skinnable player with features like support for the <track> element, fullscreen video, and even Ambilight. It provides a consistent experience regardless of what codecs and plugins browsers support.

Note that MediaElementPlugin is not implementing a streaming media server, nor is it converting audio and video files in appropriate file formats understood by today's browsers.

For best compatibility use MP3 for audio and MP4 for video files. While supported by MediaElement.js it is not recommended to convert videos to FLV format as these files can only be displayed using a flash media player, but not natively by browsers following HTML5 specifications.

Also try to keep audio and video files small, i.e. don't try to upload rather long media files to Foswiki trying to play them back using MediaElement.js.

It is recommended to secure your attachments using Foswiki:Extensions/XSendFileContrib and not using Foswiki's native viewfile method. This will relive Foswiki from the pure delivery of the media files and instead delegate the actual process of sending over files to the HTTP server in use.

Usage

To embed a video or audio file into Foswiki, just upload it and add

%VIDEO{"myvideo.mp4"}%

to the topic page. You should get something similar to this:

Similarly, add

%AUDIO{"mysong.mp3"}%

to render an audio player for your song as part of the page.

Syntax

VIDEO

Parameter Description Default
"..." video file to be displayed, or comma-separated list of videos in alternative file formats being presented to the user's browser  
topic topic to look for the video file current topic
mime specify mime type of the video file derived from video file
width width of video player 320
height height of video player 240
controls boolean to switch on/off controls of the player on
preload boolean whether the player should pre-load the beginning of the video when the page is loaded off
autoplay boolean whether the video should immediately start playing when the page containing the %VIDEO macro is loaded off
rotate degrees to which the video should be rotated; this comes in handy when videos have been uploaded from a mobile camera 0
poster url of still image to be displayed as long as the video didn't start playing yet extracted from video using Foswiki:Extensions/ImagePlugin
frame the frame of the video to be extracted as a poster 0
id HTML id for the video element holding the player random
skin name of the skin used for the player: "default", "ted" or "wmp" default

AUDIO

Parameter Description Default
"..." audio file to be displayed  
topic topic to look for the audio file current topic
preload boolean whether the player should pre-load the beginning of the audio file when the page is loaded off
autoplay boolean whether the audio should immediately start playing when the page containing the %AUDIO macro is loaded off
skin name of the skin used for the player: "default", "ted" or "wmp" default

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. Use "Find More Extensions" to get a list of available extensions. Select "Install".

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See http://foswiki.org/Support/ManuallyInstallingExtensions for more help.

Info

Author(s): Michael Daum
Copyright: © 2010-2014, John Dyer http://j.hn, © 2014 Michael Daum http://michaeldaumconsulting.com
License: GPL (Gnu General Public License)
Release: 1.00
Version: 1.00
Change History:  
12 Dec 2014: initial release
Dependencies:
NameVersionDescription
Foswiki::Plugins::JQueryPlugin>=4.10Required
Foswiki::Plugins::ImagePlugin>=5.00Required
Foswiki::Contrib::XSendFileContrib>=3.00Optional
Home page: Foswiki:Extensions/MediaElementPlugin
Support: Foswiki:Support/MediaElementPlugin
Topic attachments
I Attachment Action Size Date Who Comment
Audio.pngpng Audio.png manage 2 K 01 Dec 2016 - 11:36 AdminUser  
MakefileEXT Makefile manage 1 K 01 Dec 2016 - 11:36 AdminUser  
Video.pngpng Video.png manage 185 K 01 Dec 2016 - 11:36 AdminUser  
background.pngpng background.png manage 166 bytes 01 Dec 2016 - 11:36 AdminUser  
bigplay.fw.pngpng bigplay.fw.png manage 77 K 01 Dec 2016 - 11:36 AdminUser  
bigplay.pngpng bigplay.png manage 2 K 01 Dec 2016 - 11:36 AdminUser  
bigplay.svgsvg bigplay.svg manage 1 K 01 Dec 2016 - 11:36 AdminUser  
controls-ted.pngpng controls-ted.png manage 1 K 01 Dec 2016 - 11:36 AdminUser  
controls-wmp-bg.pngpng controls-wmp-bg.png manage 1 K 01 Dec 2016 - 11:36 AdminUser  
controls-wmp.pngpng controls-wmp.png manage 5 K 01 Dec 2016 - 11:36 AdminUser  
controls.fw.pngpng controls.fw.png manage 78 K 01 Dec 2016 - 11:36 AdminUser  
controls.pngpng controls.png manage 1 K 01 Dec 2016 - 11:36 AdminUser  
controls.svgsvg controls.svg manage 10 K 01 Dec 2016 - 11:36 AdminUser  
flashmediaelement-cdn.swfswf flashmediaelement-cdn.swf manage 127 K 01 Dec 2016 - 11:36 AdminUser  
flashmediaelement.swfswf flashmediaelement.swf manage 127 K 01 Dec 2016 - 11:36 AdminUser  
loading.gifgif loading.gif manage 6 K 01 Dec 2016 - 11:36 AdminUser  
mediaelement-and-player.jsjs mediaelement-and-player.js manage 114 K 01 Dec 2016 - 11:36 AdminUser  
mediaelement-and-player.js.gzgz mediaelement-and-player.js.gz manage 27 K 01 Dec 2016 - 11:36 AdminUser  
mediaelement-and-player.uncompressed.jsjs mediaelement-and-player.uncompressed.js manage 184 K 01 Dec 2016 - 11:36 AdminUser  
mediaelement.init.jsjs mediaelement.init.js manage 179 bytes 01 Dec 2016 - 11:36 AdminUser  
mediaelement.init.js.gzgz mediaelement.init.js.gz manage 150 bytes 01 Dec 2016 - 11:36 AdminUser  
mediaelement.init.uncompressed.jsjs mediaelement.init.uncompressed.js manage 225 bytes 01 Dec 2016 - 11:36 AdminUser  
mediaelement.jsjs mediaelement.js manage 33 K 01 Dec 2016 - 11:36 AdminUser  
mediaelement.js.gzgz mediaelement.js.gz manage 9 K 01 Dec 2016 - 11:36 AdminUser  
mediaelement.uncompressed.jsjs mediaelement.uncompressed.js manage 69 K 01 Dec 2016 - 11:36 AdminUser  
mediaelementplayer.csscss mediaelementplayer.css manage 20 K 01 Dec 2016 - 11:36 AdminUser  
mediaelementplayer.css.gzgz mediaelementplayer.css.gz manage 3 K 01 Dec 2016 - 11:36 AdminUser  
mediaelementplayer.jsjs mediaelementplayer.js manage 61 K 01 Dec 2016 - 11:36 AdminUser  
mediaelementplayer.js.gzgz mediaelementplayer.js.gz manage 15 K 01 Dec 2016 - 11:36 AdminUser  
mediaelementplayer.uncompressed.csscss mediaelementplayer.uncompressed.css manage 24 K 01 Dec 2016 - 11:36 AdminUser  
mediaelementplayer.uncompressed.jsjs mediaelementplayer.uncompressed.js manage 114 K 01 Dec 2016 - 11:36 AdminUser  
mejs-skins.csscss mejs-skins.css manage 5 K 01 Dec 2016 - 11:36 AdminUser  
mejs-skins.css.gzgz mejs-skins.css.gz manage 936 bytes 01 Dec 2016 - 11:36 AdminUser  
mejs-skins.uncompressed.csscss mejs-skins.uncompressed.css manage 6 K 01 Dec 2016 - 11:36 AdminUser  
pkg.csscss pkg.css manage 25 K 01 Dec 2016 - 11:36 AdminUser  
pkg.css.gzgz pkg.css.gz manage 3 K 01 Dec 2016 - 11:36 AdminUser  
pkg.jsjs pkg.js manage 94 K 01 Dec 2016 - 11:36 AdminUser  
pkg.js.gzgz pkg.js.gz manage 24 K 01 Dec 2016 - 11:36 AdminUser  
pkg.uncompressed.csscss pkg.uncompressed.css manage 25 K 01 Dec 2016 - 11:36 AdminUser  
pkg.uncompressed.jsjs pkg.uncompressed.js manage 185 K 01 Dec 2016 - 11:36 AdminUser  
silverlightmediaelement.xapxap silverlightmediaelement.xap manage 12 K 01 Dec 2016 - 11:36 AdminUser  
skipback.pngpng skipback.png manage 4 K 01 Dec 2016 - 11:36 AdminUser  
Topic revision: r5 - 15 Dec 2016, AdminUser
This site is powered by FoswikiCopyright &© by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback