This is a message.

Show interactive content blocks on top of the player

The content plugin is a general purpose tool to make different kinds of video applications.

Usage

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.

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.

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.2.9.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();
}
}
}

JavaScript

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:

PropertyDescription

html

Specifies the initial HTML content for the plugin. Here is a list of supported HTML tags.

textDecoration

A value 'outline' causes a black outline to be used in the text font. This is useful when the background color of the content plugin is transparent and we want to make the text more visible on a light colored background. Especially useful when used with our captions plugin.

stylesheet

Path to the stylesheet file which specifies how each tag in the content is styled. You can find more information about styling here.

style

A styling object that is specified directly in the configuration. If an external stylesheet is in use, these settings override those external settings. You can find more information about styling here.

closeButton

true displays a closing button at the top right corner of the plugin. The default is false.

closeImage

A URL pointing to the image that is used as the closing button. Example: closeImage: url('close.png'). By default an X-like image is shown.

onClick

A javascript function that is called when the content plugin is clicked. The this variable points to the current Plugin instance and its only argument is a pointer to the current Player instance.

onMouseOver

A javascript function that is called when the mouse is positioned over the plugin. The this variable points to the current Plugin instance and its only argument is a pointer to the current Player instance.

onMouseOut

A javascript function that is called when the mouse moves outside of the plugin. The this variable points to the current Plugin instance and its only argument is a pointer to the current Player instance.

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>");

JavaScript

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:

MethodReturnsDescription

setHtml(html)

Plugin

Set the plugin's HTML content to the given string. These HTML tags are supported. The current Plugin instance is returned.

append(html)

Plugin

Append more HTML content to the end of the existing HTML.

getHtml(html)

String

Returns the current HTML content.

Supported HTML

The HTML which 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>

HTML

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 with the values "left" or "right", width, height, hspace and vspace.

NOTE: For the image to be scaled both width and height need to be specified and be given in pixels. Percentage values are not supported.

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" />

HTML

Paragraph tag <p>

Creates a paragraph. Supported attributes are align with the 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>

HTML

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>

HTML

Other tags

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

TagDescription

<b>

Renders text as bold.

<br>

Creats a line break.

<font>

Specifies a font or list of fonts to display the text in. Supported attributes are color and face. It is recommended to use CSS for styling your text.

<i>

Displays the tagged text in italics. An italic typeface must be available for the font used.

<li>

Places a bullet in front of the text that it encloses. Ordered list <ol> and unordered list <ul> tags are not 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'
}
}

JavaScript

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

CSS

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

CSS propertyCamel caseUsage and supported values

color

color

Only hexadecimal color values are supported. Named colors (such as blue) are not supported. Colors are written in the following format: #FF0000.

display

display

Supported values are inline, block, and none.

font-family

fontFamily

A comma-separated list of fonts to use, in descending order of desirability. Any font family name can be used. If you specify a generic font name, it is converted to an appropriate device font. Example: 'Georgia, "Trebuchet MS", "Times New Roman", serif'.

font-size

font-size

Sets the size of a font.

font-style

fontStyle

Supported values are normal and italic.

font-weight

fontWeight

Supported values are normal and bold.

leading

leading

The amount of space that is uniformly distributed between lines. The value specifies the number of pixels that are added after each line. A negative value condenses the space between lines.

letter-spacing

letterSpacing

The amount of space that is uniformly distributed between characters. The value specifies the number of pixels that are added after each character. A negative value condenses the space between characters.

margin-left

marginLeft

Controls the size of the left margin of an element.

margin-right

marginRight

Controls the size of the right margin of an element.

text-align

textAlign

Supported values are left, center, right, and justify.

text-decoration

textDecoration

Supported values are none and underline.

text-indent

textIndent

Indents the first line of text in an element.

Download

Get latest version of the Flowplayer Content plugin.

flowplayer.content-3.2.9.swf

just the working flash file to get you going

flowplayer.content-3.2.9.zip

working flash file (swf) + README.txt and LICENSE.txt

flowplayer.content-3.2.9-src.zip

source code

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

Note: For XSS security reasons Flash plugins must be located at and loaded from the same domain as the core player flowplayer-3.2.18.swf.

This is a Flash plugin, and its features are therefore not available on iOS. For iOS please consult the ipad plugin.

See the version history for this tool.

Found a bug?

If you encounter problems with this script, please turn to the Flowplayer Flash plugin forum with a link to a minimal sample page (no extra html, css, javascript) demonstrating the issue.