This is kind of an old post, but I'm trying to implement something like this info an instream playlist, can anyone help me tweak it to work?
I'm a little confused by the clip in onStart. What is the proper sintax for this when it's inside of a playlist. Also the onStart event doesn't seem to be firing for me. ( Ignore the actual player, just using the < flowplayer > to show the code.
HTML setup for the player
<!-- include latest Flowplayer javascript file -->
<script language="javascript" src="path/to/flowplayer-3.2.6.js"></script>
<!-- player container with optional splash image -->
<a href="path/to/video_file" id="playerContainer">
<img src="path/to/splash_image" />
</a>
JavaScript coding
Following script will install Flowplayer into our player container
<script language="javascript">
// our custom configuration is given in third argument
flowplayer("playerContainer", "path/tohttp://releases.flowplayer.org/swf/flowplayer-3.2.7.swf",{
<script>
flowplayer("player", "./includes/flowplayer-3.1.1.swf",{
plugins: {
content: {
url: './includes/flowplayer.content-3.1.0.swf',
bottom: 5,
left:80,
width: 300,
height:30,
// styling
backgroundColor:'#000000',
backgroundGradient:'low',
borderRadius:'0',
borderColor:'#222222',
align:'center',
opacity:0
}
},
playlist: [
{ url:"[INITIAL IMAGE]" , autoPlay: true,
scaling: "fit" } ,
{
url: "[MAIN VIDEO]",
scaling: "fit",
autoPlay: false,
playlist:[
{
url:"[PREROLL]" , autoPlay: true, position:0,
onStart: function(clip) {
// now present user with time remaining time of ad
// place inside your 'clip' or playlist item
this.getPlugin("content").animate({opacity:1.0}, 1200);
var remaining = clip.duration;
var myPlayer = this;
var timer = setInterval(function() {
myPlayer.getPlugin("content").setHtml("A word from our sponsors... " + Math.round(clip.duration - myPlayer.getTime()));
if (remaining < 1) clearInterval(timer);
}, 1000);
}
},
{ url:"[POSTROLL]" , autoPlay: true, position:-1 }
]
}
]
});
</script>
});
</script>
