DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:flowplay2

flowplay2 Plugin

Compatible with DokuWiki

2008-05-05

plugin Integrates the flowplayer to stream video to an embedded flash applet (like on YouTube) probably better that the original flowplay plugin does

Last updated on
2008-04-16
Provides
Syntax
Conflicts with
flowplay

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

Tagged with !experimental, !obsolete, embed, flash, media, video

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 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 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-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 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 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 ?720×576, not widthxheight: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;
	}
}
 
?>
plugin/flowplay2.txt · Last modified: 2023-12-21 15:35 by Aleksandr

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki