Table of Contents
flowplay2 Plugin
Compatible with DokuWiki
2008-05-05
Integrates the flowplayer to stream video to an embedded flash applet (like on YouTube) probably better that the original flowplay plugin does
This extension is marked as obsoleted. Therefore it is hidden in the Extension Manager and the extension listing. Furthermore, it is candidate for removal.
This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.
Similar to flashplayer, flowplay, flowplayer, jukebox, mp3play, video, youtube
Flash is not available anymore in browsers. Video functionality is included in DokuWiki, see the media syntax description and video options included adding subtitles.
Description
Using this plugin, you can embed audio and video files into your wiki pages. Anyone with a reasonably recent Flash Player will have to be able to watch your videos and listen to your songs right in their browser.
This is accomplished by embedding Flowplayer.
In contrast to the original flowplay-plugin, flowplay2 allows to use one player instance for many video/audio files on the same page. Further, it allows for more sophisticated configuration of the flowplayer.
Demo pages
Demo pages please go here.
Acknowledgments
This plugin is based on the original flowplay-plugin by Dave Kliczbor. So his acknowledgments apply to this plugin as well:
“This plugin is merely a wrapper for the excellent FlowPlayer by Anssi Piirainen. I just wrote the glue to DokuWiki and bundled it with FlowPlayer.
Half of the plugin code was copied from the video plugin by Jason Byrne and Chris Smith (I just needed a template, and that code was similar enough to mine)”
Configuration
Two configuration options are provided:
player_swf
Flowplayer provides different .swf-files. They have all the same functionality, but look different. By setting the player_swf option you can choose which one to use. The path is relative to the flowplayer-directory inside the plugin-directory.
player_base_url
Works like for the flowplay plugin. Citing Dave Kliczbor again:
In most cases, no additional configuration is needed. There are some rare cases when the video does not play… I haven't completely sorted it out, but you seem to get a better chance if you let the browser load the .swf file over HTTP. Then again, you may want to use another FlowPlayer installation on your server.
In both cases, you have one configuration variable to set:$conf['plugin']['flowplay']['player_base_url'] = 'http://yourserver.tld/flowplayer-0.14/';
This example assumes that the URL ofFlowPlayer.swf
is:http://yourserver.tld/flowplayer-0.14/FlowPlayer.swf
Usage
Of course you need to convert your audio/video files to some type flowplayer understands. Currently these are
- video: flv, mp4, H.264
- image: JPG, PNG
- audio: MP3
Check https://flowplayer.com/ for updates.
About the conversion take a look at http://flowplayer.sourceforge.net/encoding.html or the flowplay plugin page.
To actually embed files into your page, you
- have to embed the player, and
- optionally may define further files to be shown in the player.
Embedding the player
Syntax:
{{flowplay>_path_to_media_file_?_player_options_}}
The _path_to_media_file_
is – you may have guessed – a path to any media file recognized by the player. It is though optional: If you leave it out, the player won't be shown (and loaded) until one of the playlist items (see below) is clicked.
The _player_options_
is a list of space-separated options passed to the flowplayer as follows:
- An option looking like
widthxheight
sets the width and height of the player. - An option looking like
option:value
sets any non-booleanoption
tovalue
. - An option looking like
option
sets the booleanoption
to true. - An option looking like
nooption
set the booleanoption
to false. (ie. If “autoplay” is the option, it'd be?noautoplay
, and notnooption:autoplay
or anything like that.)
For a list of the options recognized by flowplayer, look here.
Defining playlist items
You may add any number of playlist items to your page. These are links which will trigger the player to play some specified file.
The syntax is:
[[flowplay>_path_to_media_file_|_link_title_]]
- The
_path_to_media_file_
again is the path to your media file. It is of course not optional here. - The
_link_title_
the title of the link – any wiki markup allowed.
Known Bugs
- Using an image inside a playlist item link does not work as expected - it will link to the image but not trigger the player.
- There are some problems with the flowplay-plugin regarding HTTPS and something else I forgot, which will probably also apply to this plugin.
Changelog
- 2008-04-16 Version 0.3:
- Initial release. This has number 0.3 because it is based on flowplay 0.2
Discussion
Here you go… Could you/somebody please make clear how to use the player options. I want to set autoPlay to false (as movies start to stream immediately with page loading which I don't like), but couldn't figure out how do do that. Otherwise the plugin works fine → thanks a lot for your work!
You must use “noautoPlay” as option.Like this:{flowplay>filepath?noautoPlay}}
. I updated thenooption
portion above to make that more clear as well. Confused me for a good chunk of time also.
I use the following syntax, but it doesn´t work. Is the syntax wrong or is it a technical error?
{{flowplay>[[flowplay>http://someurl/movie.flv|Title]][[flowplay>http://someurl/anothermovie.flv|Title2]]?withxheight:720x576}}
You need to split that apart.{flowplay>…}}
as one call for a player, and your links in the double square brackets outside the curly bracket call.
Also, the syntax is just?720×576
, notwidthxheight:720×576
.
Does anybody know how to get a widthxheight working with noautoPlay? ?noautoPlay
by itself works fine but if I add the widthxheight, it forces autoplay no matter what I do.
yes: you have to space the 2 options, like this: ?noautoPlay ?320×240, for istance:
{{flowplay>http://yoursite.com/doku/yourvideodirectory/lavienrose.flv?noautoPlay ?320x240}} Maurizio
Is there some reason why some videos don't play? I'm trying to embed an FLV, using the same syntax that's worked for other videos I've embeded. But for this one, it just doesn't seem to want to play. I've even converted it to MP4, but that hasn't worked either. Here's the syntax I'm using
{{flowplay>http://www.path-to-video.com/video-name.flv?noautoPlay 320x240}}
But for some reason it doesn't work
Since the last update (to latest version 2009) of dokuwiki I think, this flowplayer can't play *.flv videos properly in the internet explorer - with firefox it works fine as before the update. In IE the page gets white and on the bottom left IE reports this error:
- line: 1
- character: 615
- Error: 'undefined' is null or no object
- code: 0
I tried this with IE version 6 up to version 8.
Problems with two renders
I have had some problems showing two renders of the plugin. I modified the source. Not very clean but good enough.
$ LANG=C diff -uNr syntax.php ~/dokuwiki/lib/plugins/flowplay2/syntax.php --- syntax.php 2009-02-13 10:59:30.000000000 +0000 +++ /home/eduardo/dokuwiki/lib/plugins/flowplay2/syntax.php 2009-10-26 11:41:25.000000000 +0000 @@ -179,6 +179,10 @@ $r .= "videoFile: '" . ml($indata["url"]) . "'"; $r .= "} " . DOKU_LF; + + // Eduardo + preg_match("/:(\w+)\./",$indata["url"],$url_id); + //$r .= "\\\\ " . $url_id[1] . DOKU_LF; // EMBED configuration $r .= "var embedConfig = " . DOKU_LF . @@ -191,10 +195,14 @@ "</script>" . DOKU_LF; // add the player-div - $r .= "<div id='flowplayer'></div>"; + //$r .= "<div id='flowplayer'></div>"; + // Eduardo + $r .= "<div id='flowplayer_" . $url_id[1] . "' class='flowplayitem'></div>"; + + $r .= '<script language="javascript">runFlowPlayer(playerConfig["videoFile"]);</script>'; return $r; } } -?> \ No newline at end of file +?>
and also
$ LANG=C diff -uNr playlist.js ~/dokuwiki/lib/plugins/flowplay2/playlist.js --- playlist.js 2008-04-16 22:17:52.000000000 +0100 +++ /home/eduardo/dokuwiki/lib/plugins/flowplay2/playlist.js 2009-10-26 11:41:47.000000000 +0000 @@ -31,6 +31,9 @@ { // set URL playerConfig.videoFile = url; + + // Eduardo + var id_url = url.match(/:(\w+)\./); // if flowplayer is not loaded. load it now. if (flowplayerobject == null) @@ -39,7 +42,8 @@ // Flash API is automatically returned (flashembed.js ver. 0.27) flowplayerobject = flashembed ( - "flowplayer", + "flowplayer_" + id_url[1], + //"flowplayer", embedConfig, {config: playerConfig} ); @@ -53,27 +57,29 @@ } + window.onload = function() { - var links = document.getElementsByTagName("a"); - for (var i = 0; i < links.length; i++) - { - if (links[i].className == "flowplayitem") - { - links[i].onclick = function() - { - playerConfig.autoPlay = true; - runFlowPlayer(this.getAttribute("href")); - - // disable link's default behaviour - return false; - } - } - } - - // start player if url is given - if (playerConfig["videoFile"]) - runFlowPlayer(playerConfig["videoFile"]); + + //var links = document.getElementsByTagName("a"); + //for (var i = 0; i < links.length; i++) + //{ + // if (links[i].className == "flowplayitem") + // { + // links[i].onclick = function() + // { + // playerConfig.autoPlay = true; + // runFlowPlayer(this.getAttribute("href")); + // + // // disable link's default behaviour + // return false; + // } + // } + //} + // + //// start player if url is given + //if (playerConfig["videoFile"]) + // runFlowPlayer(playerConfig["videoFile"]); // when user presses splash image it triggers our first playlist entry if (document.getElementById("splash"))
Putting more than one player on a page
- syntax.php
<?php /** * flowplay2: embeds a video stream player flash applet into your page * * This is mostly based on the flowplay-plugin by Dave Kliczbor et al. * * Syntax: * Please look at the README * * @license GPL 2 (http://www.gnu.org/licenses/gpl.html) * @version 0.3 * @author bSpot <blind@bspot.de> */ if(!defined('DOKU_INC')) define('DOKU_INC',realpath(dirname(__FILE__).'/../../').'/'); if(!defined('DOKU_PLUGIN')) define('DOKU_PLUGIN',DOKU_INC.'lib/plugins/'); define('PLUGIN_FLOW', DOKU_BASE.'lib/plugins/flowplay2/flowplayer/'); require_once(DOKU_PLUGIN.'syntax.php'); if (!function_exists('hsc')) { function hsc($string){ return htmlspecialchars($string, ENT_QUOTES, 'UTF-8'); } } class syntax_plugin_flowplay2 extends DokuWiki_Syntax_Plugin { function getInfo() { return array ( 'author' => 'bSpot', 'email' => 'blind@bspot.de', 'date' => '2008-04-16', 'version'=> '0.3', 'name' => 'flowplay2', 'desc' => 'Embeds a video stream player flash applet into your page', 'url' => 'http://wiki.splitbrain.org/plugin:flowplay2', 'ack' => 'This is mostly based on the flowplay-plugin by Dave Kliczbor et al.', ); } function getType() { return 'protected';} function getAllowedTypes() { return array('container','substition','protected','disabled','formatting','paragraphs'); } function getPType() { return 'normal';} function getSort() { return 191; } function connectTo($mode) { // pattern for the flashplayer $this->Lexer->addSpecialPattern('{{flowplay>.*?}}', $mode, 'plugin_flowplay2'); // entry pattern for playlist-items $this->Lexer->addEntryPattern('\[\[flowplay>[^|]*\|',$mode,'plugin_flowplay2'); } function postConnect() { // exit pattern for playlist-items $this->Lexer->addExitPattern('\]\]','plugin_flowplay2'); } function handle($match,$state,$pos,&$handler) { $m = array(); switch ($state) { // player case DOKU_LEXER_SPECIAL: list($url, $paramStr) = explode('?', substr($match, strlen('{{flowplay>'), -2), 2); // prepare parameter list foreach (explode(" ", $paramStr) as $param) { // width/height parameter if ( preg_match('/(\d+)x(\d+)/', $param, $m) ) { $params['width'] = $m[1]; $params['height'] = $m[2]; } // non-boolean parameter else if ( preg_match('/([^:]+):(.*)$/', $param, $m) ) $params[$m[1]] = $m[2]; // boolean parameter set to false else if (substr($param, 0, 2) == "no") $params[strtolower(substr($param, 2, 1)) . substr($param, 3)] = False; // boolean parameter set to true else $params[$param] = True; } return array('type' => 'player', 'url' => $url, 'paramStr' => $paramStr, 'params' => $params); // playlist case DOKU_LEXER_ENTER: $url = substr($match, strlen('[[flowplay>'), -1); return array('type' => 'playlist_open', 'url' => $url); case DOKU_LEXER_MATCHED: return array('type' => 'data', 'match' => $match); case DOKU_LEXER_UNMATCHED: return array('type' => 'data', 'match' => $match); case DOKU_LEXER_EXIT: return array('type' => 'playlist_close', 'match' => $match); } return false; } function render($mode, &$renderer, $indata) { if($mode == 'xhtml') { switch ($indata['type']) { // player case 'player' : /* // DISABLED DEBUG OUTPUT $renderer->doc .= "<ul>"; $renderer->doc .= "<b>url => " . $indata['url'] . " (" . ml($indata['url']) . ")</b>"; foreach ($indata['params'] as $k => $v) $renderer->doc .= "<li>" . $k . " => " . $v. "</li>"; $renderer->doc .= "</ul>";*/ $renderer->doc .= $this->_renderPlayer($indata, preg_match_all('/id\=\'flowplayer/',$renderer->doc,$dummy ) ); break; // playlist case 'playlist_open' : $renderer->doc .= "<a href='" . ml($indata["url"]) . "' class='flowplayitem'>"; break; case 'data': $renderer->doc .= $renderer->_xmlEntities($indata['match']); break; case 'playlist_close' : $renderer->doc .= "</a>"; break; } return true; } return false; } function _renderPlayer($indata, $oc) { // determine player url if( strlen($this->getConf('player_base_url')) > 0 ) $prefix = $this->getConf('player_base_url'); else $prefix = PLUGIN_FLOW; if( $prefix{strlen($prefix)-1} !== '/' ) $prefix .= '/'; $params = $indata["params"]; // embed javascript $r = ""; if ($oc < 1){ //this is the first one $r .= '<script language="javascript" src="' . $prefix . 'html/flashembed.min.js"></script>'; $r .= '<script language="javascript" src="' . $prefix . '../playlist.js"></script>'; $oc=''; } // player configuration $r .= "<script language='javascript'>" . DOKU_LF . "var playerConfig$oc = " . DOKU_LF . "{ " . DOKU_LF . " controlBarBackgroundColor: '0x99cddc', " . DOKU_LF; // add params foreach ($indata['params'] as $k => $v) $r .= $k . ": " . ($v === True ? "true" : ($v === False ? "false" : "'" . $v . "'")) . ","; // run player on startup if a url is given if ($indata["url"] != "") $r .= "videoFile: '" . ml($indata["url"]) . "'"; $r .= "} " . DOKU_LF; // EMBED configuration $r .= "var embedConfig$oc = " . DOKU_LF . "{ " . DOKU_LF . ($params["width"] ? "width: " . $params["width"] . ", " . DOKU_LF : "") . ($params["height"] ? "height: " . $params["height"] . ", " . DOKU_LF : "") . " src:'" . $prefix . $this->getConf('player_swf') . "', " . DOKU_LF . " bgcolor:'#6F7485' " . DOKU_LF . "} " . DOKU_LF . "</script>" . DOKU_LF; // add the player-div $r .= "<div id='flowplayer$oc'></div>"; if ($oc != '') $r .="<script language='javascript'> flashembed('flowplayer$oc', embedConfig$oc, {config: playerConfig$oc}); </script>"; return $r; } } ?>