Here is a content plugin

The content plugin supports minimalistic HTML and it can be styled with CSS.

Links and images are supported too.

Click on the buttons below to see how things can be scripted.

Flash plugin: Content Place HTML over or beside the video screen

Demo

Toggle visibility Toggle style Toggle content Animate Toggle another content

Download (Version 3.1.0)

Features

• Use the HTML language to layout text, images, links and even SWF files over or beside the video screen.
• The HTML content can be styled with CSS. This CSS can be placed in an external file or it can be defined directly in the configuration.
• Content can be placed inside a box that can be styled in many ways. You can set background colors, background images, have curved corners and tweak background gradient settings. The content background can also be transparent.
• The content plugin can contain links that trigger JavaScript functions - in that way your content plugin can do almost anything.
• The content can be animated just like any other plugin.
• For JavaScript programmers this plugin exposes many useful methods such as setHtml, append, onMouseOver, onMouseOut and onClick.
• You can have many content plugins configured at the same time as in our example above.

Usage examples

You may want to use this plugin in the following scenarios:

• Show captions.
• Show descriptive text while the video plays.
• Show advertisements.
• Show a list of links at the end of the video where the user may want to go.
• Display images that trigger JavaScript functions that can do many things.

You may find it useful to combine the content plugin with cuepoints so that you can show HTML content at various points of time during video playback.

Configuration

Here is a example configuration for the content plugin:

plugins: {

	// "myContent" is the name of our plugin
	myContent: {

		// location of the plugin
		url: 'flowplayer.content-3.1.0.swf',

		// display properties
		top: 20,
		width: 300,

		// styling properties
		borderRadius: 10,
		backgroundImage: 'url(pattern.png)',

		// linked stylesheet
		stylesheet: 'content-plugin.css',

		// "inline" styling (overrides external stylesheet rules),
		style: {
			'.title' {
				fontSize: 16,
				fontFamily: 'verdana,arial,helvetica'
			}
		}

		/*
			initial HTML content. content can also be fetched from the HTML document
			like we did in the example above. see the source code for that.
		*/
		html: '<img src="hello-world.png" align="left" /><p class="title">My title</p>',

		// clicking on the plugin hides it (but you can do anything)
		onClick: function() {
			this.hide();
		}
	}
}

The content plugin supports both display properties and styling properties like any other styleable plugin. Please follow the links to find out more information about them.

Here is a list of all content plugin specific configuration variables:

Look here for the JavaScript API documentation for more information about Plugin and Player instances.

Scripting

Here are some scripting examples:

// first get access to the plugin using the getPlugin call
var plugin = $f("myDiv").getPlugin("myContent");

// after that you can use the standard plugin's methods
plugin.animate({top:30, width:'40%'});

// and you can use content plugin specific methods
plugin.append("<p>Some more HTML content</p>");

You can find the list of standard Plugin methods such as animate and css here. Here is a list of the content plugin specific methods:

Supported HTML

The HTML that is supported by the content plugin is far less flexible and feature rich than the HTML supported by browsers. However, it is flexible enough for placing different types of content over video. The a, img, p and span HTML tags will be those mostly used with the content plugin. By combining those tags with class names and CSS styling you have a lot of different design possibilities.

Anchor tag <a>

Creates a hypertext link. Examples:

<!-- a link pointing to a specific url -->
<a href="http://acme.org">Acme website</a>

<!-- trigger JavaScript. huge possibilities!  -->
<a href="javascript:getEmbedCode()">Get embed code</a>

<!-- open the page in a new browser window or tab -->
<a href="help.html" target="_blank">Player help</a>

You can also define a:link, a:hover, and a:active styles for the anchor tags. See the styling section later.

Image tag <img>

The <img> tag lets you embed external JPG, GIF and PNG files and even SWF files. Text automatically flows around images you embed in text fields or components. Supported attributes are: align, width, height, hspace and vspace. Examples:

<!-- place an image -->
<img src="my-image.png" />

<!-- align image to the right edge of the content plugin -->
<img src="my-image.png" align="right" />

<!-- remove image's default margins -->
<img src="my-image.png" vspace="0" hspace="0" />

Paragraph tag <p>

Creates a paragraph. Supported attributes are align with values "left", "right" or "center" and class that specifies a CSS style class.

<!-- make a title. styled with CSS -->
<p class="title">This is a title</p>

<p align="right">right aligned paragraph</p>

Span tag <span>

This tag is usually used inside the p tag to highlight text with different CSS attributes. It is usually accompanied with a class attribute. Examples:

<!-- span.highlight is styled with CSS -->
<p>
	This is an <span class="highlight">interesting</span> paragraph
</p>

Other tags

These tags are not so commonly used, but are fully supported:

Styling with CSS

The content plugin supports a subset of the CSS standard for styling HTML tags. All principles are identical to common CSS coding practices. If you are not familiar with CSS you can find lots of good turorials on the net.

There are two ways of styling HTML tags: by specifying styling directly in the configuration (inline) or supplying an external CSS file. When specifying CSS directly in the configuration you must use the so-called camel case naming convention when defining CSS properties as well as quoting all string values. Notice how the CSS property font-size becomes fontSize (without quotes) in the inline configuration below. See the table below for a complete list of CSS properties and their camel case equivialents. Here is an example of inline styling:

style {

	// "p.title" is not supported. you just have to write ".title"
	'.title': {
		fontSize: 16,
		fontFamily: 'verdana'
	},

	'.highlight': {
		color: '#339999',
		fontWeight: 'bold'
	}
}

And here is the corresponding styling in the external stylesheet. The syntax is the same as CSS files used in other web pages.

.title {
	font-size: 16;
	font-family: verdana;
}

span.highlight {
	color: #339999;
	font-weight: bold;
}

When specifying numeric values only the numeric part of the value is used. The units (px, pt) can be given but they are not parsed; pixels and points are equivalent. em is not supported.

Supported CSS properties

Download

Get the latest version of Flowplayer content plugin.

Please right-click and choose "Save link as..." (or similar)

See the version history for this tool.

NOTE We are no longer providing packed scripts. Althought they may have smaller file size they offer less performance than minified scripts. See details from JavaScript Library Loading Speed.

Found a bug?

If you encounter problems in this script, please send a bug report to the bug reporting forum. If you have a problematic page, including a direct URL to that page is by far the most effective way of helping us to find a bug.