Flowplayer Tools

Embedding Flowplayers with flow.embed.js

flowembed is a tool that you can use to place multiple player instances into the same page by using following amazingly simple HTML syntax. 

<a class="flowplayer" href="[PATH TO VIDEO]">
  <img src="[SPLASH IMAGE]" />
</a>

Example

Features

  • When link's class is flowplayer it is "video- enabled". The playable video is given in href- attribute. There can be unlimited amount of these entries on the same page.
  • Overlayed play button is automatically generated without additional HTML tags.
  • Only one video is playable at once and other videos automatically resumed into their original HTML stage.This makes page work smoother and user is not distracted with simultaneously playing movies.
  • When playback finishes video is automatically resumed into it's original HTML stage.
  • Due to simple HTML syntax videos can be easily embedded from database or with authoring tools such as dreamweaver.
  • Using fallback attribute you can play hiqh quality videos in h.264 format so that the player will automatically offer flv videos for clients that do not support this format.

The Code

Plase following script node anywhere on your page, preferrably inside HEAD tag. 

<script>
	// selectt all link tags with "flowplayer" class and "video- enable" them.
	$(function() {
		$("a.flowplayer").flowembed("../video/FlowPlayerDark.swf");		
	});
</script>

CSS coding

This is our complete CSS. 

/* dimensios for both splash image and the player wrapper */
a.flowplayer, a.flowplayer img {
	display:block;				
	width:300px;
	height:240px;
	border:0px;		
}

/* play button on top of splash screenn */
div.playButton {
	background:url(../img/btn/play.png) no-repeat;
	width:50px;
	height:50px;
	position:relative;
	top:-140px;
	left:125px;	
	opacity:0.9;
	margin-bottom:-50px;
}

/* play button upon mouseover */
div.playButton:hover {
	opacity:1.0;		
}

Full Syntax

Here are all arguments that you can supply to flowembed. First two arguments are given directly to flashembed and third argument is specific to this tool. 

// select nodes that will be "video- enabled"
$("jquery selector").flowembed({FLASH CONFIG}, {FLOWPLAYER CONFIG},  {
	/*
		By default only one player instance is allowed on the page. if this
		is set to false then many instances can be played simultaneously.
	*/
	oneInstance:true,
	
	// CSS class for the currently playing flowplayer instance
	activeClass:'playing',
	
	// CSS class for the overlayed play button, default "playButton"
	overlayClass: 'playButton'	, 
	
	/* 
		If your video is in h.264 format and you want to offer flv videos 
		for those clients that do not support it specify alternate video 
		extension here. Usually this is "flv"
	*/
	fallback: null
});
1:st argument are standard Adobe Flash parameters. If this argument is given as string it is intepreted as src parameter. This is the most common scenario.
2:nd argument is an object that you can use to configure Flowplayer with these configuration variables

Download

flow.embed.js (unpacked source code 1.8 kb)

This script requires that following JavaScript tools are included into the page.

  1. jQuery JavaScript library which helps you to write code that works smoothly on different browsers.
  2. flashembed.js for embedding Flash into the page

note: Working example of this tool is included into our latest build which can be downloaded here.

Quick start

Documentation

JavaScript tools

roadmap

resources