Forum user: dammad

I've read several times about people having problems with this. Does it work now? Are there any fixes?

To be concrete I want to have a non-manual playlist such as, but combine with scrollable. Playlist on its own works fine.

<div id="playlistwrap" >
<div id="playcol" class="clips col"> 
     
    <!-- single playlist entry as an "template" --> 
    <a href="${url}"> 
        ${title}
        <br>
    </a>      
</div> 
</div>  

<script>

$(function() {
	// setup player 
	$f("player", "/alantest/public/js/flow310/flowplayer.swf", {
		  
		autoPlay: true,
		autoBuffering: true,
			
		clip: {
		    provider: 'lighttpd',
		    bufferLength: 1, 
		    scaling: 'fit'
		},
         
		playlist: [  
  	        {
		    url: 'http://192.168.0.10:81/uploads/710/634/clip0.flv',
		    title: 'foo',
	        }
                ,
 ...
        		], 
        		
       		// show playlist buttons in controlbar 
        	plugins: { 
            		controls: { 
               			playlist: true,
               			fullscreen: false 
         			}, 
		lighttpd: {
			url: '/alantest/public/js/flow310/flowplayer.pseudostreaming.swf'
		}
       	},
    	
	});

	$f("player").playlist("div.clips:first", {loop:true});
	
});

Did this get fixed? I'm facing the same problem.

I've been tried to convert my existing working playlist from anchor href=.. list items to div href=.. ones.

While the playlist runs, the playlist.css (flowplayer example one) no longer makes the playlist look right. I've tried correcting the CSS but don't really understand it.

Does anyone have a working example somewhere of a playlist displayed using div href=.. and matching CSS to style it?

I'm using flowplayer 3.10. Everything works fine with videos, but playlists with images in refuse to call onStart(). Does anyone know a fix? Please help.

NOTE I used "A l a n <backslash> <apostrophe> s" in the real code.

<div id="playcol" class="clips col"> 
    <!-- single playlist entry as an "template" --> 
    <a href="${url}"> 
        <div id="thumb">
        <img src="${thumbpath}" width="70"/>
        </div>
        ${title}
    </a> 
</div> 

<script>

$(function() {
	// setup player 
	$f("player", "/alantest/public/js/flow310/flowplayer.swf", {
		  
		autoPlay: true,
		autoBuffering: true,
			
		clip: {
		    provider: 'lighttpd',
		    bufferLength: 1
		},
         
		playlist: [ 
	                {
		             url: "http://192.168.0.10:81/uploads/310/396/clip0.flv",
		             title: "Alan"+apostrophe+"s",
		             thumbpath: "/uploads/310/396/thumbs/00000001.jpg"
	                }
                       ...
        		], 
        		
        	// show playlist buttons in controlbar 
        	plugins: { 
            		controls: { 
               			   playlist: true 
         			}, 
 			        lighttpd: {
				        url: '/alantest/public/js/flow310/flowplayer.pseudostreaming.swf'
			         }
        	},
    		
    		log: {
                 	level: 'debug'
        	}
	});

	$f("player").playlist("div.clips:first", {loop:true});
});
</script>

In fact it seems that apostrophe breaks the forum, because I could post the first text and the example broke the 2nd message. I had to insert +apostrophe+ rather than the character itself!

If I place an escaped apostrophe in a playlist variable it breaks the whole playlist. I assume because it is not escaped correctly.

In the example below, because the 'title' in the playlist is "Alan"+apostrophe+"s" it breaks. Replace it with "Alan" and it works fine.

How to I make sure it is escaped correctly for flowplayer?

Great. bufferLength:1 fixes the problem. Sounds like the default buffer length is 3 seconds. This should be in the documents somewhere.

Anyone know what triggers onBufferFull event? (Apart from some buffer becoming full?)

Yeap same thing no matter what media file I use. Flvtool2 seems to indicate that I have 8 keyframes in the file, so that should be fine.

I think this has more to do with whatever triggers 'onBufferFull'. It seems if the clips are short that onBufferFull doesn't trigger.

With debugging turned on, it seems to show that onBufferFull fails to fire and the 3 second clip, but does fire for a 5 second clip. Also the cut-off for onBufferFull NOT firing is longer with the firebug console going (3+ seconds rather than 3.003s) so suspect this is some kind of race condition on onBufferFull firing.

Firebug logs below:

========== First playlist item 3 seconds in length ===========
 ....loading....
Firebug's log limit has been reached. %S entries not shown.		Preferences	 
Firebug's log limit has been reached. %S entries not shown.		Preferences	 
Firebug's log limit has been reached. %S entries not shown.		Preferences	 
Firebug's log limit has been reached. %S entries not shown.		Preferences	 
$f.fireEvent ["onBeforeClick"]
$f.fireEvent ["onBeforeLoad"]
$f.fireEvent ["onLoad", "controls", null, null, null, null]
$f.fireEvent ["onLoad", "play", null, null, null, null]
$f.fireEvent ["onLoad", "player", null, null, null, null]
$f.fireEvent ["onBeforeBegin", 0, null, null, null, null]
$f.fireEvent ["onConnect", 0, null, null, null, null]
$f.fireEvent ["onBegin", 0, false, null, null, null]
$f.fireEvent ["onMouseOut", null, null, null, null, null]
$f.fireEvent ["onMetaData", 0, Object, null, null, null]
$f.fireEvent ["onStart", 0, Object, null, null, null]

========== First playlist item *5* seconds in length ===========
 ....loading....
Firebug's log limit has been reached. %S entries not shown.		Preferences	 
Firebug's log limit has been reached. %S entries not shown.		Preferences	 
Firebug's log limit has been reached. %S entries not shown.		PreferencesFirebug's log limit has been reached. %S entries not shown.		Preferences	 
$f.fireEvent ["onBeforeClick"]
$f.fireEvent ["onBeforeLoad"]
$f.fireEvent ["onLoad", "controls", null, null, null, null]
$f.fireEvent ["onLoad", "play", null, null, null, null]
$f.fireEvent ["onLoad", "player", null, null, null, null]
$f.fireEvent ["onBeforeBegin", 0, null, null, null, null]
$f.fireEvent ["onConnect", 0, null, null, null, null]
$f.fireEvent ["onBegin", 0, false, null, null, null]
$f.fireEvent ["onMouseOut", null, null, null, null, null]
$f.fireEvent ["onMetaData", 0, Object, null, null, null]
$f.fireEvent ["onStart", 0, Object, null, null, null]
$f.fireEvent ["onBufferFull", 0, null, null, null, null]
$f.fireEvent ["onLastSecond", 0, null, null, null, null]
$f.fireEvent ["onBeforeFinish", 0, null, null, null, null]
$f.fireEvent ["onFinish", 0, null, null, null, null]
$f.fireEvent ["onBeforeBegin", 1, null, null, null, null]
$f.fireEvent ["onConnect", 1, null, null, null, null]
....

I have posted on this before, but have been digging deeper into the problem since it is still broken in V3.1. If I take the standard demo of playlists and replace the first playlist item with any FLV file less than 3003ms the playlist refuses to auto-advance to the next item. Wth debugging, onBeforeFinish doesn't seem to fire.

Why is there is limit of ~3secs for clips in playlists?

<script>

// wait for the DOM to load using jQuery
$(function() {
	
	// setup player normally
	$f("player1", "http://192.168.0.10/alantest/public/js/flow310/flowplayer.swf", {
	
		// clip properties common to all playlist entries
		clip: {
			subTitle: 'from blib.tv video sharing site',
			time: '20 sec'
		},
		
		// our playlist
		playlist: [
			{
				url: 'http://192.168.0.10:81/uploads/43/69/test.flv',
				title: 'Palm trees and the sun'
			},	
			{
				url: 'http://blip.tv/file/get/KimAronson-TwentySeconds58192.flv',
				title: 'Happy feet in a car'
			},	
			{
				url: 'http://blip.tv/file/get/KimAronson-TwentySeconds63617.flv',
				title: 'People jogging'
			}
		],
		
		// 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("player1").playlist("div.clips:first", {loop:true});
	
});
</script>

I have checked that the FLV file is updated with onMetaData tags, etc. But no luck.

# flvtool2 -CUP -i 0 -o 3002 0.flv test.flv
---
/uploads/43/69/0.flv:
  hasKeyframes: true
  hasMetadata: true
  duration: 3.003
  cuePoints:
  audiosamplerate:
  audiodatarate: 0
  datasize: 356712
  framerate: 30
  hasVideo: true
  audiosamplesize:
  stereo:
  canSeekToEnd: false
  videocodecid: 2
  lasttimestamp: 2.97
  lastkeyframetimestamp: 2.803
  audiosize: 0
  hasAudio: false
  audiodelay: 0
  videosize: 355873
  keyframes:
    filepositions:
      - 822
      - 100478
      - 125092
      - 151110
      - 180060
      - 211326
      - 252860
      - 327153
    times:
      - 0
      - 0.4
      - 0.801
      - 1.201
      - 1.602
      - 2.002
      - 2.402
      - 2.803
  height: 480
  filesize: 357093
  metadatadate: Tue Apr 28 11:46:03 GMT-0700 2009
  metadatacreator: inlet media FLVTool2 v1.0.6 - http://www.inlet-media.de/flvtool2
  audiocodecid:
  videodatarate: 955.913804713805
  hasCuePoints: false
  width: 640
...

Yeah strange.

I used ffmpeg to generate the FLV rather than flvtool, but will try with flvtool. I hadn't thought of keyframes, but yes that might be the problem.

Is ffmpeg known to create bad flv?

Understood, here is a version with

. however you are right, unlikely to be a syntax error when changing the clip size causes problems. Alas I don't have easy access to a public version.




<html lang="en"> 
<head>
    <link type="text/css" rel="stylesheet" 
    		href="http://192.168.0.10/alantest/public/css/playlist.css"/>         
</head>	
<body>

<div id="searchbox">
<script src="http://192.168.0.10/alantest/public/js/flow307/jquery-1.3.2.min.js"></script>
<script src="http://192.168.0.10/alantest/public/js/flow307/flowplayer-3.0.6.min.js"></script>
<script src="http://192.168.0.10/alantest/public/js/flow307/flowplayer.playlist-3.0.5.min.js"></script> 
<!-- the player using splash image --> 
<a class="player plain col last" id="player"> 
</a>

<!-- root element for playlist entries --> 
<div id="playlistwrap">
<div id="playcol" class="clips col"> 
     
    <!-- single playlist entry as an "template" --> 
    <a href="${url}"> 
	foo
    </a> 
     
</div> 
</div>  

<script>
$(function() {
	// setup player 
	$f("player", "http://192.168.0.10/alantest/public/js/flow307/flowplayer-3.0.7.swf", {
	      
		playlist: [ 
			{ url: 'http://192.168.0.10/uploads/30/31/clip0.flv'},
			{ url: 'http://192.168.0.10/uploads/29/30/clip0.flv'},
			{ url: 'http://192.168.0.10/uploads/25/25/clip0.flv'}
        		], 
        		
        		// show playlist buttons in controlbar 
        	plugins: { 
            		controls: { 
               			playlist: true 
         			}, 
        	},
        	log: {
            	level: 'debug'
        	}
		
	// playlist plugin 
	});

	$f("player").playlist("div.clips:first", {loop:true});	
});

</script>

<!-- let the rest of the page float normally -->
<br clear="all" />

</div>
</body>
</html>