Flash plugins / content plugin Flash plugins - Demo 1 / 7

Introduction

The content plugin allows you to place HTML content on inside Flowplayer. This content can be placed of top of the video screen or even below it. This demo shows you some basic usage of this plugin. The demo also works as a good introduction how Flowplayer plugins are configured and used in general.

HTML coding

We have a player container setup normally. We also have an extra DIV on the page that contains the HTML to be inserted to the content plugin.

<!-- player container-->
<a 
	href="http://flowplayer.org/video/flowplayer-700.flv" 
	style="display:block;width:425px;height:300px;" 
	id="player">
</a>

<!-- here is the content for the plugin -->
<div id="theContent" style="display:none">
	<p>This big overlay is a content plugin</p>
</div>

You could have also written the html directly as a value to the html property, but if you have complex HTML to be inserted this method is much more easy and you don't have to deal with complex string quotations. Note that the styling you make for the DIV element does not have any impact on the styling for the HTML when it's been placed inside Flowplayer - you have to style that content on the content plugin configuration.

JavaScript coding

Here is the setup for the player and the content plugin.

flowplayer("player", "/swf/flowplayer-3.1.5.swf", {
	plugins: {
		content: {
			
			// the only required property
			url: 'flowplayer.content-3.1.0.swf',
			
			// some display properties
			height: 220,
			padding:30,
			backgroundColor: '#112233',
			opacity: 0.7,
			
			// one styling property 
			backgroundGradient: [0.1, 0.1, 1.0],
			
			/*** content plugin specific properties ***/
			
			// fetch the actual HTML inside a DIV element on the page
			html: document.getElementById("theContent").innerHTML,
			
			// some styling for the content
			style: {p: {fontSize: 40}}			
		},
		
		// change default skin to "tube"
		controls: {
			url: 'flowplayer.controls-tube-3.1.5.swf'
		}		
	} 
});