This is a message.

Content Plugin

Show content inside Flowplayer

standalone demo

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

HTML

We have a player container set up normally.

We also have an extra DIV on the page that contains the HTML to be inserted to the content plugin. This could have also been written directly as a value to the html property. However, inserting complex HTML with this method is easier 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 in the content plugin configuration. 

<!-- player container-->
<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"    class="player"
    style="display:block;width:425px;height:300px;margin:10px auto"
    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>

HTML

Javascript

Here is the setup: 

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
    plugins: {
        content: {
 
            // the only required property
            url: "http://releases.flowplayer.org/swf/flowplayer.content-3.2.8.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: "http://releases.flowplayer.org/swf/flowplayer.controls-tube-3.2.11.swf"
        }
    }
});

JavaScript