DokuWiki

You've loaded an old revision of the document! If you save it, you will create a new version with this data.

====== flowplay2 plugin ======

---- plugin ----
description: Integrates the flowplayer to stream video to an embedded flash applet (like on YouTube) probably better that the original flowplay plugin does.
author     : bspot
email      : blind (at) bspot.de
type       : syntax
lastupdate : 2008-04-16
compatible : ???
depends    : 
conflicts  : flowplay
similar    : youtube, youtubev2, google_video, flashplayer, video, flowplay
tags       : media, video, flash, embed, !experimental
----

===== Description =====

Using this plugin, you can embed audio and video files into your wiki pages. Anyone with a reasonably recent Flash Player will <del>have to</del> be able to watch your videos and listen to your songs right in their browser.

This is accomplished by embedding [[http://flowplayer.org/|flowplayer]].

In contrast to the original [[:plugin:flowplay|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 [[plugin:flowplay|flowplay-plugin]] by Dave Kliczbor. So his acknowledgments apply to this plugin as well:

>"This plugin is merely a wrapper for the excellent [[http://flowplayer.sourceforge.net/|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)"

===== Installation =====

Paste one of these into your plugin manager: [[http://www.bspot.de/lib/exe/fetch.php?id=flowplay2%3Astart&cache=cache&media=flowplay2:flowplay2-0.3.zip|flowplay2-0.3.zip]], [[http://www.bspot.de/lib/exe/fetch.php?id=flowplay2%3Astart&cache=cache&media=flowplay2:flowplay2-0.3.tar.gz|flowplay2-0.3.tar.gz]]

===== 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: <code>
$conf['plugin']['flowplay']['player_base_url'] = 'http://yourserver.tld/flowplayer-0.14/';
</code>
>This example assumes that the URL of ''FlowPlayer.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 [[http://flowplayer.org]] for updates.

About the conversion take a look at [[http://flowplayer.sourceforge.net/encoding.html]] or the [[:plugin:flowplay|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:

<code>
{{flowplay>_path_to_media_file_?_player_options_}}
</code>

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-boolean ''option'' to ''value''.
  * An option looking like ''option'' sets the boolean ''option'' to true.
  * An option looking like ''nooption'' set the boolean ''option'' to false. (ie. If "autoplay" is the option, it'd be ''?noautoplay'', and not ''nooption:autoplay'' or anything like that.)
For a list of the options recognized by flowplayer, look [[http://flowplayer.org/player/configuration.html|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:

<code>
[[flowplay>_path_to_media_file_|_link_title_]]
</code>

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 [[:plugin:flowplay|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 the ''nooption'' 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 ''?720x576'', not ''widthxheight:720x576''.

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 ?320x240, 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
<code>{{flowplay>http://www.path-to-video.com/video-name.flv?noautoPlay 320x240}}</code>
 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 ======
<code 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.',
		);
	}

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;
	}

Please fill all the letters into the box to prove you're human. W H A G M Please keep this field empty:

Edit summary

Note: By editing this page you agree to license your content under the following license: CC Attribution-Share Alike 4.0 International