Forum user: HenSan

My playlist works and so does the tooltips, but there is something wrong with my player and overlay. I suspect that I load the player somehow wrongly when trying to use the overlay. Please see the source code for details, as I cant figure out myself where the actual problem lies... The overlay with the player is supposed to start when you click on an item in the scrolling playlist.
I howe you can help.
http://users.abo.fi/hsandber/testflow/testflow.html
Here is some of the code where the prblem might be:

<div id="videoscroll">
<!-- navigator -->
<div class="navi"></div>
<!-- prev link -->
<a class="prev"></a>
<!-- root element for scrollable -->
<div id="pl">
	<!-- root element for the items -->
	<div class="clips"> 
		 <!-- single playlist entry "template" --> 
	<a rel="#videooverlay"  href="${url}" title="${caption}"> 
		<img width="50px" src="./hipweb/video/${vthumb}"/>
		<!--<span>${size}</span>-->
		<em>${date}</em>
		<!--    -->
		<h2>${title}</h2>
	</a> 
	</div>
</div> 
<!-- next link -->
<a class="next"></a>
</div>
<!-- the tooltip --> 
<div id="videocaption">
 
</div> 
<div id="videooverlay" class="overlay">
        <div class="close"></div>
	<!-- here is the content for overlay, can be anything -->
	<a id="videoplayer" class="player"><img src="./png/play.png" /> </a>
</div>

<script>  //  script for loading the player into a-tag named player //  
$(function() {
	// install flowplayers
	$("#videoplayer").flowplayer("./flowplayer/flowplayer-3.1.5.swf", {
	clip:{
		autoPlay: true, 
        autoBuffering: true
 	},
		// our playlist 
	playlist: [ 
		{	url: './hipweb/video/video1.flv',
			size: '? kb',
			vthumb: 'video1.jpg',
			title: 'Video 1 title',
			date: '28.5.09',
			caption: 'Caption for video 1'
		},
		// more playlist items...
		], 
	// show playlist buttons in controlbar 
	plugins: { 
		controls: { 
			playlist: true 
		} 
	} 
	});
	$f().playlist("div.clips");
	// setup overlay actions to buttons
	$("a[rel]").overlay({
		// use the Apple effect for overlay
		effect: 'apple',		
		expose: '#789',				
		onLoad: function(content) {
this.getOverlay().find("#videoplayer").flowplayer(0).load();
		},
		onClose: function(content) {
			$f().unload();
		}
	});				
	// setup scrolling for the playlist elements
	$("#pl").scrollable({
        items:'div.clips',
        size:3,
        clickable:true
    }).navigator().mousewheel();
});
</script>
<!-- XXXXXXXXXXXXX Tooltip for video caption XXXXXXXXXXXXXX-->
<script>
$(document).ready(function() { 
    $("a[title]").tooltip('#videocaption'); 
});
</script>

Cheers,
Henrik

Dear Sir,
I use a scrolling palylist and overlay/expose for displaying the video. However, when closing the overlay the next video will not start since the highest level folder is lost from the BaseUrl path. (test page athttp://users.abo.fi/hsandber/testflow/HiP_index.htm ) I did not find a solution for this in the Documentation nor in the Plugin examples, maybe I just mmissed it. As a whole I think the flowplayer webpage is very useful and informative. Thanks!
Cheers,
Henrik

The code for the palyer is the following:

<script>  //  script for loading the player into a-tag named player //  
$(function() {
   $f("player", "./flowplayer/flowplayer-3.1.0.swf", {
	clip:{
		baseUrl:'http://users.abo.fi/hsandber/testflow/video/',
		autoPlay: false, 
        autoBuffering: true
 	},
		// our playlist 
	playlist: [ 
		{	url: 'video1.flv', 
			title: 'Video1 first flv',
			size: '34kb',
			date: '21.4.09',
			vthumb: 'test.png'},     
		{	url: 'video2.flv', 
			title: 'Video 2 flv',
			size: '34kb',
			date: '5.4.04',
			vthumb: 'test.png'},     
		{	url: 'video3.mp4', 
			title: 'Video3 mp4',
			size: '30kb',
			date: '6.4.04',
			vthumb: 'test.png'},     
		{	url: 'video4.mp4', 
			title: 'Video4 mp4 again',
			size: '34kb',
			date: '7.4.04',
			vthumb: 'test.png'}
	], 
	// show playlist buttons in controlbar 
	plugins: { 
		controls: { 
			playlist: true 
		} 
	} 
}); 
    /* 
        here comes the magic plugin. It uses first div.clips element as the  
        root for as playlist entries. loop parameter makes clips play 
        from the beginning to the end. 
    */ 
    $f("player").playlist("div.clips"); 
	});
</script>
<!-- XXXXXXXXXXXXX Scrolling stuff XXXXXXXXXXXXXX-->
<script>
$(function() {
	// setup scrolling for the playlist elements
	$("#pl").scrollable({
        items:'div.clips',
        size:3,
        clickable:true
    });
// overlay plus expose    
	$("a[rel]").overlay({ 
         // start exposing when overlay starts to load 
        onBeforeLoad: function() { 
             // this line does the magic. it makes the background image sit on top of the mask 
            this.getBackgroundImage().expose({color: '#fff'}); 
        },  
         // when overlay is closed take the expose instance and close it as well 
        onClose: function() { 
            $.expose.close(); 
        } 
     });             
	});
</script>

And the HTML for the overlay and playlist are.

<!-- XXXXXXXXXXX OVERLAY START XXXXXXXXXXXXXXXX-->
<div id="overlay" class="overlay">
        <div class="close"></div>
	<!-- here is the content for overlay, can be anything -->
	<h2>Video overlay</h2><br/>

	<a class="player" id="player"><img src="./png/play.png"/></a>
	<br clear="all"/>
</div>
<!-- XXXXXXXXXXXX OVERLAY END XXXXXXXXXXXXXXX-->
<div id="videoscroll">
<!-- navigator -->
<div class="navi"></div>
<!-- prev link -->
<a class="prev"></a>
<!-- root element for scrollable -->
<div id="pl">
	<!-- root element for the items -->
					<div class="clips"> 
						 <!-- single playlist entry "template" --> 
					<a rel="#overlay"  href="${url}"> 
						<img width="50px" src="http://users.abo.fi/hsandber/testflow/video/${vthumb}"/>

					   ${title} <span>${size}</span> 
						<em>${date}</em> 
					</a> 
				</div> 
</div>
<!-- next link -->
<a class="next"></a>
</div>